Marcadores
Marcadores
Una cápsula para todo lo dicho sobre algo en una palabra: un estado, un nombre, una versión, una categoría. Eran dos objetos hasta el día en que un código y un estado estuvieron uno al lado del otro en un encabezado, a un cabezal de distancia, y nadie pudo decir qué significaba la diferencia — así que la forma es una y el tono es todo lo que los distingue. Lo que lleva es libre: una palabra, una figura, un glifo, o dos de los tres. El círculo está donde no hay espacio para una cápsula, y el contador, que cuelga de una fila y se dimensiona en el texto del que cuelga, es lo único aquí que no es un marcador.
En medio de una oración
Una palabra destacada tal como se lee: una versión, una fase, una categoría. El tono neutro, porque un marcador que llega coloreado ya ha hecho una afirmación sobre lo que marca — y en una oración no hay nada que afirmar.
La versión 2.4 es Liberado Esta API es Obsoleto
Las categorías
Tonos que distinguen cosas sin clasificarlas. No llevan significado — nada dice que el tercero sea mejor que el quinto — lo que es exactamente lo que los hace utilizables para una taxonomía, donde el significado sería una mentira. Usados exactamente como un estado: misma cápsula, mismo ritmo.
Neutro
ruby
grapefruit
bittersweet
sunflower
straw
grass
mint
teal
aqua
blue-jeans
plum
lavender
pink-rose
Un estado en palabras
Anunciado en una oración o al lado de un título, donde es el mensaje en lugar de una marca en una columna.
Operación exitosa
Ocurrió un error
Proceda con precaución
Para su información
Un estado leído por docenas
En una columna, una marca al lado de un conteo neutro se lee como dos objetos y una tabla de ellos se lee como ruido. Aquí el color encierra la figura y la columna se escanea en una sola pasada — compacto, ya que una celda no tiene espacio que sobrar.
15
success
15
error
15
warning
15
info
15
running
15
pending
15
paused
15
play
15
skipped
15
disabled
Lo que lleva
Una palabra para lo que es el estado, una figura para cuántos hay, ambos, o ninguno. La figura siempre se dibuja un paso atrás del resto: califica el estado, no es el estado.
Aprobado
15
Aprobado15
Las tres formas lado a lado
La misma información en el lugar donde realmente se lee. El círculo es la forma para una celda demasiado estrecha para una cápsula, y la única que puede mostrar un estado siendo una cantidad — y se dibuja con el mismo color que la cápsula llena.
| Forma | success | warning | error | skipped |
|---|---|---|---|---|
| Cápsula | 15 | 15 | 15 | 15 |
| Círculo |
Círculos
Un estado contado por un círculo en lugar de por una palabra, para un lugar donde los estados se leen por docenas — una lista de ejecuciones, una fila de trabajos. El anillo lleva el color, el glifo dentro dice qué estado es, y ambos lados de la pila dibujan la misma marca.
success
error
warning
info
running
pending
paused
play
skipped
disabled
LEDs
Un punto iluminado y sus palabras: un estado leído de un vistazo en una línea, por docenas en un resumen o una lista de servicios. Más pequeño que un marcador, más silencioso que un círculo. apagado es el punto sin luz — un conteo en cero —, en ejecución respira.
success
info
running
warning
error
dev
off
cat-mint
34 ok
2 en ejecución
0 errores
0 en cola
Contadores
Cuántos esperan ser vistos, como una pastilla: en la esquina de un ícono o un botón (en un padre con conteo), rojo a menos que se indique, 99+ después de 99; una palabra (« Nuevo ») o un punto en lugar de la cifra; nada en cero a menos que se pida. countApply() mantiene uno actual a medida que cambia la página.
2
Bandeja de entrada 4
error 7
warning 14
success 21
info 28
accent 35
Mostrado en cero 0
Un estado que es una cantidad
Una ejecución es el único estado con un monto, así que su anillo se dibuja hasta donde ha llegado la ejecución. Twig imprime el valor que se le da; moverlo después es asunto del navegador.
0%
25%
50%
75%
100%
Tamaños de círculo
Un contador al lado de un marcador
La única distinción que queda, y no se trata de significado. A la izquierda un contador: doce de algo, colgando de la fila que lleva a él y dimensionado en el texto de esa fila. A la derecha un marcador: doce de algo que fue bien, de pie por sí mismo y dimensionado en tokens. Un conteo al lado de un elemento de menú es un contador; la misma figura en una columna de pipeline es un marcador.
12
12
Vue
El mismo componente, impulsado: cambiar el tipo o el valor mueve el arco en lugar de redibujar. Este es el que una aplicación coloca cuando el estado va a cambiar ante los ojos del lector.
Uso
{{ marker('success', 'Operation successful') }}
{{ marker('success', null, { count: 15, compact: true }) }}
{{ status_icon('running', { progress: 0.4 }) }}