Catalog · Conținut și date
Grafic cu bare
Vizualizează un tabel de date ca bare, prin CSS pur — nu o reprezentare separată de sincronizat.
AlphaComponentăConținut și date
Preview și markup canonic
Previzualizarea de mai jos redă exact șirul HTML afișat în exemplul de cod. Nu există o implementare paralelă pentru documentație.
Previzualizare din markup-ul canonic
| Instituție | Cereri |
|---|---|
| Alba Iulia | 1.248 cereri |
| Cluj-Napoca | 3.986 cereri |
Instalare și importuri
pnpm add @sistem-digital/tokens @sistem-digital/components@import '@sistem-digital/components/content.css';<figure class="sd-chart" aria-labelledby="catalog-chart-title"><figcaption class="sd-chart__title" id="catalog-chart-title">Cereri per instituție</figcaption><table class="sd-chart__table"><caption class="sd-visually-hidden">Numărul de cereri înregistrate, per instituție</caption><thead><tr><th scope="col" class="sd-visually-hidden">Instituție</th><th scope="col" class="sd-visually-hidden">Cereri</th></tr></thead><tbody><tr><th scope="row">Alba Iulia</th><td><span class="sd-chart__cell"><span class="sd-chart__bar-track" aria-hidden="true"><span class="sd-chart__bar" style="--sd-chart-value: 31%"></span></span><span class="sd-chart__value">1.248 cereri</span></span></td></tr><tr><th scope="row">Cluj-Napoca</th><td><span class="sd-chart__cell"><span class="sd-chart__bar-track" aria-hidden="true"><span class="sd-chart__bar" style="--sd-chart-value: 100%"></span></span><span class="sd-chart__value">3.986 cereri</span></span></td></tr></tbody></table></figure>Contract și surse
Schimbarea claselor publice, a markup-ului canonic sau a comportamentului helperelor necesită versionare și instrucțiuni de migrare.
A fost utilă această pagină?
Linkul deschide un formular GitHub precompletat. Nu transmitem nimic până când alegi să publici feedback-ul și îți recomandăm să nu incluzi date personale.