Angular2 Implementierung einer Skalierungskomponente

Question

Ich möchte eine Komponente erstellen, die als Maßstab dient und Parameter für die Skala numerisch oder textuell sein können. Siehe Mockup:

Wie kann ich eine solche Komponente zu realisieren, insbesondere HTML und CSS unter Berücksichtigung Parameter unterschiedlich sein können jedes Mal diese Komponente verwenden?

Answer 1

Da diese Frage irgendwie vage ist, sind hier einige Richtlinien einer Richtung, die ich verwendet, um eine ähnliche Komponente für einen Assistenten Navigation Header zu erstellen:

• Vermeiden Sie nur mit Hilfe von CSS wegen einer dynamischen Anzahl von Elementen
• die Komponente HTML Verwenden Sie eine Tabelle Ihr die Komponente
erstellen
• Es wird N Spalten sein (wobei N die Anzahl der diskreten Werte, die Sie haben)
• Verwenden Sie eine Tabellenzeile von N Zellen, die Texte zu definieren (zB Ihre Bereiche oder Namen) und center-align t Die Texte
• Verwenden Sie eine andere Tabellenzeile der Zellen, um die Zeilen zu definieren (z. (Verwenden Sie einen Rahmen für diese Zellen)
• Optional verwenden Sie eine andere Tabellenzeile für die Symbole, die Sie dort haben, wenn Sie das brauchen
• Am Ende sind alle Dinge auf die Mitte ausgerichtet, und die Linien sollten etwas von der erste und letzte Texte
• Die Komponente Vorlage wird eine Kombination aus ngFor Iterieren über die Werte, die Sie haben es