Marcatori

Marcatori

Una capsula per tutto ciò che è stato detto su una cosa in una parola: uno stato, un nome, una versione, una categoria. Erano due oggetti fino al giorno in cui un codice e uno stato si sono trovati fianco a fianco in un'unica intestazione, a un passo di distanza, e nessuno poteva dire cosa significasse la differenza — quindi la forma è unica e il tono è l'insieme di ciò che li distingue. Ciò che porta è libero: una parola, una figura, un glifo, o due dei tre. Il cerchio sta dove non c'è spazio per una capsula, e il contatore, che pende da una riga ed è dimensionato nel testo da cui pende, è l'unica cosa qui che non è un marcatore.

Nel mezzo di una frase

Una parola messa in evidenza mentre viene letta: una versione, una fase, una categoria. Il tono neutro, perché un marcatore che arriva colorato ha già fatto una rivendicazione su ciò che contrassegna — e in una frase non c'è nulla da rivendicare.

La versione 2.4 è Rilasciato Questa API è Deprecato

Le categorie

Toni che distinguono le cose senza classificarle. Non portano significato — nulla dice che il terzo sia meglio del quinto — il che è esattamente ciò che li rende utilizzabili per una tassonomia, dove il significato sarebbe una menzogna. Indossati esattamente come uno stato è: stessa capsula, stesso ritmo.
Neutro ruby grapefruit bittersweet sunflower straw grass mint teal aqua blue-jeans plum lavender pink-rose

Uno stato in parole

Annunciato in una frase o accanto a un titolo, dove è il messaggio piuttosto che un segno in una colonna.
Operazione riuscita Si è verificato un errore Procedere con cautela Per tua informazione

Uno stato letto per dozzine

In una colonna, un segno accanto a un conteggio neutro viene letto come due oggetti e una tabella di essi viene letta come rumore. Qui il colore racchiude la figura e la colonna è scansionata in un colpo solo — compatta, poiché una cella non ha spazio da risparmiare.
15 success 15 error 15 warning 15 info 15 running 15 pending 15 paused 15 play 15 skipped 15 disabled

Ciò che porta

Una parola per ciò che è lo stato, una figura per quanti ce ne sono, entrambi, o nessuno. La figura è sempre disegnata un passo indietro rispetto al resto: qualifica lo stato, non è lo stato.
Superato 15 Superato15

Le tre forme affiancate

Le stesse informazioni nel luogo in cui vengono effettivamente lette. Il cerchio è la forma per una cella troppo stretta per una capsula, e l'unica che può mostrare uno stato come quantità — ed è disegnata con il colore che la capsula riempie.
Formasuccesswarningerrorskipped
Capsula 15 15 15 15
Cerchio

Cerchi

Uno stato raccontato da un cerchio piuttosto che da una parola, per un luogo in cui gli stati sono letti per dozzine — un elenco di esecuzioni, una fila di lavori. L'anello porta il colore, il glifo all'interno indica quale stato è, e entrambi i lati della pila disegnano lo stesso markup.
success error warning info running pending paused play skipped disabled

LED

Un punto acceso e le sue parole: uno stato letto a colpo d'occhio in una riga, per dozzine in un riepilogo o in un elenco di servizi. Più piccolo di un marcatore, più silenzioso di un cerchio. spento è il punto spento — un conteggio a zero —, in esecuzione respira.
success info running warning error dev off cat-mint
34 ok 2 in esecuzione 0 errori 0 in coda

Conteggi

Quanti aspettano di essere visti, come una pillola: nell'angolo di un'icona o di un pulsante (in un genitore con conteggio), rosso a meno che non sia specificato, 99+ oltre 99; una parola (« Nuovo ») o un punto invece della cifra; nulla a zero a meno che non sia richiesto. countApply() tiene uno aggiornato mentre la pagina cambia.
3 99+ 12 2 Nuovo
Posta in arrivo 4 error 7 warning 14 success 21 info 28 accent 35 Mostrato a zero 0

Uno stato che è una quantità

Un'esecuzione è l'unico stato con un ammontare, quindi il suo anello è disegnato fino a dove è arrivata l'esecuzione. Twig stampa il valore che riceve; spostarlo successivamente è compito del browser.
0% 25% 50% 75% 100%

Dimensioni dei cerchi

Un contatore accanto a un marcatore

L'unica distinzione rimasta, e non riguarda il significato. A sinistra un contatore: dodici di qualcosa, pendente dalla riga che porta a esso e dimensionato nel testo di quella riga. A destra un marcatore: dodici di qualcosa che è andato bene, in piedi da solo e dimensionato in token. Un conteggio accanto a un elemento di menu è un contatore; la stessa figura in una colonna di pipeline è un marcatore.
12 12

Vue

Lo stesso componente, pilotato: cambiare il tipo o il valore muove l'arco invece di ridisegnarlo. Questo è ciò che un'app posiziona quando lo stato sta per cambiare sotto gli occhi del lettore.

Utilizzo

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