Angular2实现了一个scale组件

Question

我想构建一个充当比例的组件，并且比例的参数可以是数字或文本。见样机：

我怎样才能实现这样的组件，特别是HTML和css考虑参数每次使用这个组件都可以不同？

Answer 1

由于这个问题有些含糊不清，以下是我用于为向导导航标题创建类似组件的方向的一些指导原则：

• 由于元素的动态数量而避免使用CSS
• 使用组件HTML创建组件
的表
• 将有N列（其中N是您拥有的谨慎值的数量）
• 使用N个单元格的表格行来定义文本（例如您的范围或名称），并使文本居中对齐
• 使用另一个表格行的单元格来定义线条（例如，使用这些单元格上的边框）
• 如果需要，可以选择使用另一个表格行显示您的图标
• 最后，所有事物都与中心对齐，线条应略微延伸远离第一个和最后一个文本
• 组件模板将是ngFor迭代您所拥有的值的组合