Cifra (stat)
Un número que merece leerse: una etiqueta encima, la cifra en numerales tabulares, una variación opcional con su dirección y una nota debajo. Varias forman un iv-stat-group, una rejilla separada por filetes en vez de por cajas. Las cifras son estáticas; el contador animado es otro componente y llega en una versión posterior.
<div class="iv-stat-group">
<div class="iv-stat">
<span class="iv-stat__label">Stylesheet</span>
<strong class="iv-stat__value">22.17<span class="iv-u-text-sm"> KiB</span></strong>
<span class="iv-stat__delta" data-iv-tone="flat">+1.17 KiB vs v0.5</span>
<span class="iv-stat__hint">min + gzip, budget 40 KiB</span>
</div>
<div class="iv-stat">
<span class="iv-stat__label">Bundled JS</span>
<strong class="iv-stat__value">35.42<span class="iv-u-text-sm"> KiB</span></strong>
<span class="iv-stat__delta" data-iv-tone="flat">no change<span class="iv-u-sr-only"> since v0.5</span></span>
<span class="iv-stat__hint">all components, budget 48 KiB</span>
</div>
<div class="iv-stat">
<span class="iv-stat__label">Unit tests</span>
<strong class="iv-stat__value">590</strong>
<span class="iv-stat__delta" data-iv-tone="up">all passing<span class="iv-u-sr-only">, no failures</span></span>
<span class="iv-stat__hint">25 files, last full run</span>
</div>
<div class="iv-stat">
<span class="iv-stat__label">Engines</span>
<strong class="iv-stat__value">3</strong>
<span class="iv-stat__hint">Chromium, Firefox and WebKit: tested in, not "all browsers"</span>
</div>
</div>
<p class="iv-u-text-sm iv-u-text-muted iv-u-mt-6">These are the figures measured by the gate of this package at <code>0.5.0-beta.0</code> (<code>npm run sizes</code>, <code>npm test</code>); they are not marketing numbers. The tone of a delta is its sentiment, not its sign: growing by 1.17 KiB is neither good nor bad, so it stays muted, while a passing suite is marked up. The sign and the direction live in the text and in the arrow, never in the colour alone.</p>Tarjetas, grande y destello
iv-stat--card pone una cifra sobre su propia superficie con la elevación ambiental común, iv-stat--lg sube el valor un escalón de la escala tipográfica y iv-stat--glow lo pinta con el degradado de marca. Los tres se combinan.
<div class="iv-stat-group">
<div class="iv-stat iv-stat--card iv-stat--glow">
<span class="iv-stat__label">Core stylesheet</span>
<strong class="iv-stat__value">2.51<span class="iv-u-text-sm"> KiB</span></strong>
<span class="iv-stat__delta" data-iv-tone="flat">unchanged since v0.5</span>
<span class="iv-stat__hint">tokens + reset, budget 8 KiB</span>
</div>
<div class="iv-stat iv-stat--card">
<span class="iv-stat__label">Components</span>
<strong class="iv-stat__value">24</strong>
<span class="iv-stat__delta" data-iv-tone="up">+5 in v0.6<span class="iv-u-sr-only"> more than v0.5</span></span>
<span class="iv-stat__hint">navbar, stepper, timeline, stat, avatar</span>
</div>
<div class="iv-stat iv-stat--card">
<span class="iv-stat__label">Open failures</span>
<strong class="iv-stat__value">0</strong>
<span class="iv-stat__delta" data-iv-tone="up">all clear<span class="iv-u-sr-only">, none open</span></span>
<span class="iv-stat__hint">of high severity, see PROJECT_STATE</span>
</div>
</div>
<div class="iv-stat iv-stat--lg iv-u-mt-8">
<span class="iv-stat__label">Published releases</span>
<strong class="iv-stat__value">0</strong>
<span class="iv-stat__hint">nothing has been published or deployed</span>
</div>
<p class="iv-u-text-sm iv-u-text-muted iv-u-mt-6">Card figures sit on their own surface with the shared ambient elevation. The large variant is the same block at <code>text-4xl</code>. All numbers come from the state of this repository, including the zero.</p>Anatomía
| Clase | Función |
|---|---|
iv-stat | El bloque: etiqueta, valor, variación y nota en columna. |
iv-stat__label | Qué se mide, en versalitas con --iv-tracking-caps. |
iv-stat__value | La cifra, a --iv-text-3xl con numerales tabulares y --iv-tracking-tight. |
iv-stat__delta | La variación, con una flecha dibujada por máscara y un tono en data-iv-tone. |
iv-stat__hint | La nota al pie: periodo, presupuesto, fuente. |
iv-stat-group | Rejilla de columnas minmax(10rem, 1fr) con un filete entre cifras desde md. |
Tonos, y decir la verdad
data-iv-tone en la variación admite up (éxito), down (peligro) y flat (atenuado); la flecha gira con él. El tono es sentimiento, no aritmética: que la hoja de estilos crezca 1,17 KiB no es bueno ni malo, así que se queda plano, mientras que una suite que pasa se marca hacia arriba. Lo que diga el color tiene que decirlo también el texto: el signo, la dirección, o una palabra invisible detrás. Las cifras de las fixtures de arriba son las que mide el gate de este paquete, presupuestos incluidos, y el cero de versiones publicadas es un cero real.
Tokens y locales
| Local | Por defecto | Qué mueve |
|---|---|---|
--iv-stat-size | var(--iv-text-3xl) | Tamaño del valor; --lg lo sube a 4xl. |
--iv-stat-gap | var(--iv-space-1) | Separación entre etiqueta, valor, variación y nota. |
--iv-stat-align | start | Alineación del bloque; center para una fila centrada. |
--iv-stat-group-min | 10rem | Lo más estrecha que puede quedar una columna antes de que la rejilla salte de línea. |
Una cifra en tarjeta usa --iv-shadow-ambient, la elevación en reposo que comparte con tarjetas, tablas y alertas desde la v0.6.
Accesibilidad y teclado
Aquí no hay nada enfocable, así que no hay comportamiento de teclado que aprender: es texto. El orden en el marcado es etiqueta, valor, variación y nota, que es también el orden en que se lee. La flecha es decoración pintada por CSS, así que la dirección tiene que vivir en el texto: +8,2 %, down o una palabra en iv-u-sr-only. Si una cifra necesita unidades, escríbelas; un lector de pantalla no ve la cabecera de columna que tu ojo suple. Cuando varias cifras son una tabla de números y no una fila de titulares, usa una tabla.
Sin JavaScript
No hay JavaScript. Los valores se sirven como texto y se quedan como se sirvieron.
Errores frecuentes
- Una cifra sin etiqueta o sin periodo. «12,4 k» a secas no informa de nada.
- El color como único indicio de la dirección.
- Números inventados en una demostración que no dice que lo son.
- Un grupo de ocho cifras: una fila de titulares deja de leerse a partir de cuatro o cinco.