Dados

Anel e legenda

Anel em segmentos que se desenha ao entrar, número no centro e legenda que destaca o trecho.

data-u="ring"

Exemplo

Saúde do build

Estável.

Testes: 1.180 passando

Lint: nenhum aviso novo

Tipos: 2 pendências

<article class="u-card u-wall" data-wall="sleep">
  <div class="u-panel">
    <div class="u-head">
      <div><div class="u-label">Saúde do build</div><div class="u-big">Estável.</div></div>
    </div>
    <div data-u="ring" data-u-props='{
      "value": 98,
      "segments": [
        {"v": 38, "color": "var(--c6)"},
        {"v": 34, "color": "var(--c1)"},
        {"v": 28, "color": "var(--c2)"}
      ]
    }'></div>
    <div class="u-legend">
      <div class="u-legend__row" data-seg="0"><i class="u-legend__sq" style="background:var(--c6)"></i>Testes: 1.180 passando</div>
      <div class="u-legend__row" data-seg="1"><i class="u-legend__sq" style="background:var(--c1)"></i>Lint: nenhum aviso novo</div>
      <div class="u-legend__row" data-seg="2"><i class="u-legend__sq" style="background:var(--c2)"></i>Tipos: 2 pendências</div>
    </div>
  </div>
</article>

Instalação

Anel e legenda vem no pacote completo, em unslop.css e unslop.js:

curl -fsSL unslop.leallabs.dev/i | sh

Um bloco pronto que usa anel e legenda:

curl -fsSL unslop.leallabs.dev/i | sh -s add wall-sleep

Sem build O add por nome serve pra gráficos e blocos. Componentes com JS moram em unslop.js, que monta sozinho todo data-u da página.

Props

Vão em data-u-props, como JSON.

Prop	Tipo	Padrão	O que faz
`segments`	array	`[]`	Lista de `{v, color}`. v é o peso do trecho; color é opcional e cai em --c1, --c2...
`value`	number	0	Número no centro, contando de 0.
`gap`	number	20	Espaço entre trechos, em unidades da circunferência (314).

Classes e variantes

Classe	O que faz
`u-legend`	A legenda.
`u-legend__row[data-seg="i"]`	Linha ligada ao trecho i: hover destaca o trecho e esmaece o resto.
`u-legend__sq`	Quadradinho de cor.

Acessibilidade e teclado

Estado e papéis

Onde	Atributo	O que diz
svg	`aria-hidden="true"`	O anel é decoração. A legenda em texto carrega a informação.

O destaque é por ponteiro. Pelo teclado, a legenda é lida como texto.