Marker

Eine Kapsel für alles, was über eine Sache in einem Wort gesagt wird: ein Zustand, ein Name, eine Version, eine Kategorie. Sie waren zwei Objekte, bis an dem Tag, an dem ein Code und ein Zustand nebeneinander in einer Überschrift standen, ein Kopf auseinander, und niemand sagen konnte, was der Unterschied bedeuten sollte – die Form ist also eine und der Ton ist das Ganze, was sie unterscheidet. Was sie trägt, ist frei: ein Wort, eine Zahl, ein Glyph oder zwei von drei. Der Kreis steht dort, wo kein Platz für eine Kapsel ist, und der Zähler, der von einer Reihe hängt und in dem Text, von dem er hängt, dimensioniert ist, ist das eine hier, das kein Marker ist.

In der Mitte eines Satzes

Ein Wort, das beim Lesen hervorgehoben wird: eine Version, eine Phase, eine Kategorie. Der neutrale Ton, weil ein Marker, der farbig ankommt, bereits einen Anspruch auf das erhebt, was er markiert – und in einem Satz gibt es nichts zu beanspruchen.

Version 2.4 ist Veröffentlicht Diese API ist Veraltet

Die Kategorien

Töne, die Dinge unterscheiden, ohne sie zu bewerten. Sie tragen keine Bedeutung – nichts sagt, dass der dritte besser ist als der fünfte – was genau das ist, was sie für eine Taxonomie nutzbar macht, wo Bedeutung eine Lüge wäre. Trägt genau wie ein Zustand: gleiche Kapsel, gleicher Rhythmus.

Neutral ruby grapefruit bittersweet sunflower straw grass mint teal aqua blue-jeans plum lavender pink-rose

Ein Zustand in Worten

Angekündigt in einem Satz oder neben einem Titel, wo es die Botschaft ist und nicht ein Zeichen in einer Spalte.

Vorgang erfolgreich Es ist ein Fehler aufgetreten Vorsicht geboten Zu Ihrer Information

Ein Zustand, der durch Dutzende gelesen wird

In einer Spalte wird ein Häkchen neben einer neutralen Zählung als zwei Objekte gelesen, und eine Tabelle davon liest sich als Lärm. Hier umschließt die Farbe die Figur und die Spalte wird in einem Durchgang gescannt – kompakt, da eine Zelle keinen Platz zu verschenken hat.

15 success 15 error 15 warning 15 info 15 running 15 pending 15 paused 15 play 15 skipped 15 disabled

Was es trägt

Ein Wort für den Zustand, wie viele davon vorhanden sind, beides oder keins. Die Zahl wird immer einen Schritt zurück von dem Rest gezogen: sie qualifiziert den Zustand, sie ist nicht der Zustand.

Bestanden 15 Bestanden15

Die drei Formen nebeneinander

Die gleichen Informationen an dem Ort, an dem sie tatsächlich gelesen werden. Der Kreis ist die Form für eine Zelle, die zu schmal für eine Kapsel ist, und das einzige, das einen Zustand als Menge zeigen kann – und er wird mit genau der Farbe gezeichnet, mit der die Kapsel gefüllt ist.

Form	success	warning	error	skipped
Kapsel	15	15	15	15
Kreis

Kreise

Ein Zustand, der durch einen Kreis und nicht durch ein Wort erzählt wird, für einen Ort, an dem Zustände durch Dutzende gelesen werden – eine Liste von Abläufen, eine Reihe von Aufgaben. Der Ring trägt die Farbe, das Glyph im Inneren sagt, welcher Zustand es ist, und beide Seiten des Stacks ziehen dasselbe Markup.

success error warning info running pending paused play skipped disabled

LEDs

Ein leuchtender Punkt und seine Worte: ein Zustand, der auf einen Blick in einer Zeile abgelesen wird, Dutzende in einer Zusammenfassung oder einer Liste von Diensten. Kleiner als ein Marker, leiser als ein Kreis. aus ist der Punkt nicht beleuchtet — ein Zähler bei null —, läuft atmet.

success info running warning error dev off cat-mint

34 ok 2 läuft 0 Fehler 0 wartend

Zähler

Wie viele darauf warten, gesehen zu werden, als Pille: an der Ecke eines Symbols oder einer Schaltfläche (in einem has-count-Elternteil), rot, es sei denn, es wird anders angegeben, 99+ über 99; ein Wort („Neu“) oder ein Punkt anstelle der Zahl; nichts bei null, es sei denn, es wird angefordert. countApply() hält einen aktuell, während sich die Seite ändert.

3 99+ 12 2 Neu

Posteingang 4 error 7 warning 14 success 21 info 28 accent 35 Bei null angezeigt 0

Ein Zustand, der eine Menge ist

Ein Ablauf ist der eine Zustand mit einer Menge, also wird sein Ring so weit gezeichnet, wie der Ablauf gekommen ist. Twig gibt den Wert aus, den er erhält; ihn danach zu bewegen, ist Sache des Browsers.

0% 25% 50% 75% 100%

Kreisgrößen

Ein Zähler neben einem Marker

Die eine Unterscheidung, die bleibt, und sie betrifft nicht die Bedeutung. Links ein Zähler: zwölf von etwas, das von der Reihe hängt, die zu ihm führt und in dem Text dieser Reihe dimensioniert ist. Rechts ein Marker: zwölf von etwas, das gut gelaufen ist, steht für sich und ist in Tokens dimensioniert. Eine Zählung neben einem Menüpunkt ist ein Zähler; dieselbe Zahl in einer Pipeline-Spalte ist ein Marker.

12 12

Vue

Dasselbe Element, betrieben: Die Art oder den Wert zu wechseln, bewegt den Bogen, anstatt ihn neu zu zeichnen. Dies ist das, was eine App platziert, wenn der Zustand sich vor den Augen des Lesers ändern wird.

Verwendung

{{ marker('success', 'Operation successful') }}
{{ marker('success', null, { count: 15, compact: true }) }}
{{ status_icon('running', { progress: 0.4 }) }}