Marcadores

Marcadores

Uma cápsula para tudo o que foi dito sobre algo em uma palavra: um estado, um nome, uma versão, uma categoria. Eram dois objetos até o dia em que um código e um estado ficaram lado a lado em um cabeçalho, um cabeça de distância, e ninguém pôde dizer o que a diferença significava — então a forma é uma e o tom é o todo do que os distingue. O que carrega é livre: uma palavra, uma figura, um glifo, ou dois dos três. O círculo está onde não há espaço para uma cápsula, e o contador, que pendura de uma linha e é dimensionado no texto do qual pendura, é a única coisa aqui que não é um marcador.

No meio de uma frase

Uma palavra destacada enquanto é lida: uma versão, uma fase, uma categoria. O tom neutro, porque um marcador que chega colorido já fez uma afirmação sobre o que marca — e em uma frase não há nada a reivindicar.

Versão 2.4 é Liberado Esta API é Depreciado

As categorias

Tons que distinguem as coisas sem classificá-las. Eles não carregam significado — nada diz que o terceiro é melhor que o quinto — o que é exatamente o que os torna utilizáveis para uma taxonomia, onde o significado seria uma mentira. Usados exatamente como um estado é: mesma cápsula, mesmo ritmo.
Neutro ruby grapefruit bittersweet sunflower straw grass mint teal aqua blue-jeans plum lavender pink-rose

Um estado em palavras

Anunciado em uma frase ou ao lado de um título, onde é a mensagem em vez de uma marca em uma coluna.
Operação bem-sucedida Ocorreu um erro Prossiga com cautela Para sua informação

Um estado lido em dúzias

Em uma coluna, uma marca ao lado de uma contagem neutra é lida como dois objetos e uma tabela deles é lida como ruído. Aqui a cor envolve a figura e a coluna é escaneada em uma única passada — compacta, já que uma célula não tem espaço a sobrar.
15 success 15 error 15 warning 15 info 15 running 15 pending 15 paused 15 play 15 skipped 15 disabled

O que carrega

Uma palavra para o que o estado é, uma figura para quantos existem, ambos, ou nenhum. A figura está sempre desenhada um passo atrás do resto: ela qualifica o estado, não é o estado.
Aprovado 15 Aprovado15

As três formas lado a lado

A mesma informação no lugar onde realmente é lida. O círculo é a forma para uma célula muito estreita para uma cápsula, e a única que pode mostrar um estado sendo uma quantidade — e é desenhada com a mesma cor que a cápsula preenche.
Formasuccesswarningerrorskipped
Cápsula 15 15 15 15
Círculo

Círculos

Um estado contado por um círculo em vez de por uma palavra, para um lugar onde os estados são lidos em dúzias — uma lista de execuções, uma linha de trabalhos. O anel carrega a cor, o glifo dentro diz qual estado é, e ambos os lados da pilha desenham a mesma marcação.
success error warning info running pending paused play skipped disabled

LEDs

Um ponto aceso e suas palavras: um estado lido à primeira vista em uma linha, por dezenas em um resumo ou uma lista de serviços. Menor que um marcador, mais discreto que um círculo. off é o ponto apagado — uma contagem em zero —, running respira.
success info running warning error dev off cat-mint
34 ok 2 em execução 0 erros 0 na fila

Contagens

Quantos aguardam para serem vistos, como uma pílula: no canto de um ícone ou um botão (em um pai com contagem), vermelho a menos que dito, 99+ além de 99; uma palavra (« Novo ») ou um ponto em vez do número; nada em zero a menos que solicitado. countApply() mantém um atual à medida que a página muda.
3 99+ 12 2 Novo
Caixa de entrada 4 error 7 warning 14 success 21 info 28 accent 35 Mostrado como zero 0

Um estado que é uma quantidade

Uma execução é o único estado com uma quantidade a ele, então seu anel é desenhado até onde a execução chegou. Twig imprime o valor que lhe é dado; movê-lo depois é responsabilidade do navegador.
0% 25% 50% 75% 100%

Tamanhos de círculos

Um contador ao lado de um marcador

A única distinção restante, e não se trata de significado. À esquerda um contador: doze de algo, pendurado na linha que leva a ele e dimensionado no texto dessa linha. À direita um marcador: doze de algo que foi bem, de pé e dimensionado em tokens. Uma contagem ao lado de um item de menu é um contador; a mesma figura em uma coluna de pipeline é um marcador.
12 12

Vue

O mesmo componente, acionado: mudar o tipo ou o valor move o arco em vez de redesenhá-lo. Este é o que um app coloca quando o estado vai mudar diante dos olhos do leitor.

Uso

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