Marqueurs
Marqueurs
Une seule capsule pour tout ce qui se dit d'une chose en un mot : un état, un nom, une version, une catégorie. C'étaient deux objets jusqu'au jour où un code et un état se sont retrouvés côte à côte dans un même en-tête, à une tête d'écart, sans que personne puisse dire ce que la différence voulait signifier — la forme est donc unique, et c'est le ton seul qui les distingue. Ce qu'elle porte est libre : un mot, un chiffre, un pictogramme, ou deux des trois. Le cercle prend la place quand une capsule n'a pas la place, et le compteur, qui dépend d'une ligne et se dimensionne sur le texte dont il dépend, est ici la seule chose qui ne soit pas un marqueur.
Au fil d'une phrase
Un mot mis à part tel qu'on le lit : une version, une phase, une catégorie. Le ton neutre, parce qu'un marqueur qui arrive en couleur affirme déjà quelque chose de ce qu'il marque — et dans une phrase, il n'y a rien à affirmer.
La version 2.4 est Publiée Cette API est Obsolète
Les catégories
Des tons qui distinguent sans hiérarchiser. Ils ne portent aucun sens — rien ne dit que le troisième vaut mieux que le cinquième — et c'est justement ce qui les rend utilisables pour une taxonomie, où un sens serait un mensonge. Portés exactement comme un état : même capsule, même rythme.
Neutre
ruby
grapefruit
bittersweet
sunflower
straw
grass
mint
teal
aqua
blue-jeans
plum
lavender
pink-rose
Un état en toutes lettres
Annoncé dans une phrase ou à côté d'un titre, là où il est le message plutôt qu'une marque dans une colonne.
Opération réussie
Une erreur est survenue
Procédez avec prudence
Pour information
Un état lu à la douzaine
Dans une colonne, une coche à côté d'un nombre neutre se lit comme deux objets, et un tableau de ces paires se lit comme du bruit. Ici la couleur enveloppe le chiffre et la colonne se parcourt d'un seul regard — en version compacte, puisqu'une cellule n'a pas de place à perdre.
15
success
15
error
15
warning
15
info
15
running
15
pending
15
paused
15
play
15
skipped
15
disabled
Ce qu'il porte
Un mot pour dire quel est l'état, un chiffre pour dire combien il y en a, les deux, ou aucun. Le chiffre est toujours dessiné un cran en retrait : il qualifie l'état, il n'est pas l'état.
Réussi
15
Réussi15
Les trois formes côte à côte
La même information à l'endroit où on la lit vraiment. Le cercle est la forme d'une cellule trop étroite pour une capsule, et la seule qui puisse montrer un état qui est une quantité — il est dessiné dans la couleur même dont la capsule se remplit.
| Forme | success | warning | error | skipped |
|---|---|---|---|---|
| Capsule | 15 | 15 | 15 | 15 |
| Cercle |
Cercles
Un état dit par un cercle plutôt que par un mot, là où les états se lisent à la douzaine — une liste d'exécutions, une rangée de tâches. L'anneau porte la couleur, le pictogramme à l'intérieur dit quel est l'état, et les deux côtés de la pile produisent le même balisage.
success
error
warning
info
running
pending
paused
play
skipped
disabled
LED
Un point allumé et ses mots : un état lu d'un coup d'œil dans une ligne, par dizaines dans un résumé ou une liste de services. Plus petit qu'un marqueur, plus discret qu'un cercle. off est le point éteint — un compteur à zéro —, running respire.
success
info
running
warning
error
dev
off
cat-mint
34 ok
2 en cours
0 erreurs
0 en file
Compteurs
Combien attendent d'être vus, en pastille : sur le coin d'une icône ou d'un bouton (dans un parent has-count), rouge sauf mention, 99+ au-delà de 99 ; un mot (« Nouveau ») ou un point à la place du nombre ; rien à zéro sauf demande. countApply() la tient à jour quand la page change.
2
Boîte de réception 4
error 7
warning 14
success 21
info 28
accent 35
Montré à zéro 0
Un état qui est une quantité
Une exécution est le seul état qui ait une quantité, son anneau est donc tracé jusqu'où l'exécution est arrivée. Twig affiche la valeur qu'on lui donne ; la faire avancer ensuite est l'affaire du navigateur.
0%
25%
50%
75%
100%
Tailles des cercles
Un compteur à côté d'un marqueur
La seule distinction qui reste, et elle ne tient pas au sens. À gauche, un compteur : douze de quelque chose, rattaché à la ligne qui y mène et dimensionné sur le texte de cette ligne. À droite, un marqueur : douze de quelque chose qui s'est bien passé, autonome et dimensionné en tokens. Un nombre à côté d'un élément de menu est un compteur ; le même chiffre dans une colonne de pipeline est un marqueur.
12
12
Vue
Le même composant, piloté : changer le type ou la valeur déplace l'arc au lieu de le redessiner. C'est celui qu'une application place quand l'état va changer sous les yeux du lecteur.
Utilisation
{{ marker('success', 'Operation successful') }}
{{ marker('success', null, { count: 15, compact: true }) }}
{{ status_icon('running', { progress: 0.4 }) }}