Ma'lumot · molecule
Davr çiziqlari
Bir neçta davr yoki umrni bitta vaqt öqida taqqoslaş: tepada yil belgilari, har qator — nom va boşlaniş–tugaş çiziği; asosiy qahramon (data-current) — töliq brend rangi; davomi noma'lum (data-open) — oçiq uç; fonda davr soyasi (.fx-span__era). JS'siz: idişda --fx-span-min/--fx-span-max, qatorda --s/--e (yillar) — örni va eni CSS hisoblaydi. Keng bölsa öz içida suriladi (.fx-span-scroll). Manbaa'dan (④ umr çiziqlari, Fox MB topşirdi, 20.10).
Variantlar
| Atribut | Qiymatlar | Standart |
|---|---|---|
data-current | true | — |
data-open | true | — |
Anatomiya
- scroll
.fx-span-scrollixtiyoriy - root
.fx-spanşart - axis
.fx-span__axisixtiyoriy - eras
.fx-span__erasixtiyoriy - era
.fx-span__eraixtiyoriy - row
.fx-span__rowşart - bar
.fx-span__barşart - name
.fx-span__nameixtiyoriy - meta
.fx-span__metaixtiyoriy
Holatlar
Klaviatura va kiriş
| Tugma | Amal |
|---|---|
| Tab | Havola bölgan çiziqqa ötadi |
Röyxat — <ul>/<li>, aria-label bilan; har qator matnida nom va yillar (çiziq — köriniş). Öq va davr soyasi — bezak (aria-hidden).
Kod
AI uçun: qaçon işlatiladi
- Zamondoşlar, hukmdorlar, poytaxtlar tarixi — davrlar ustma-ust taqqoslanganda.
- Loyiha bosqiçlari yillar böyiça (uzoq muddatli).
npx foxui add span
<div class="fx-span-scroll" style="inline-size:100%"><ul class="fx-span" style="--fx-span-min:1360;--fx-span-max:1560" aria-label="Alişer Navoiyning zamondoşlari"> <li class="fx-span__axis" aria-hidden="true"><span style="--y:1360">1360</span><span style="--y:1400">1400</span><span style="--y:1440">1440</span><span style="--y:1480">1480</span><span style="--y:1520">1520</span><span style="--y:1560">1560</span></li> <li class="fx-span__eras" aria-hidden="true"><span class="fx-span__era" style="--s:1469;--e:1506"><b>Husayn Boyqaro saltanati</b></span></li> <li class="fx-span__row" style="--s:1441;--e:1501" data-current><span class="fx-span__bar"><span class="fx-span__name">Alişer Navoiy</span><span class="fx-span__meta">1441–1501</span></span></li><li class="fx-span__row" style="--s:1403;--e:1474"><span class="fx-span__bar"><span class="fx-span__name">Ali Quşçi</span><span class="fx-span__meta">1403–1474 · 33 yil bir davrda</span></span></li><li class="fx-span__row" style="--s:1413;--e:1482"><span class="fx-span__bar"><span class="fx-span__name">Abdurazzoq Samarqandiy</span><span class="fx-span__meta">1413–1482 · 41 yil bir davrda</span></span></li><li class="fx-span__row" style="--s:1438;--e:1506"><span class="fx-span__bar"><span class="fx-span__name">Husayn Boyqaro</span><span class="fx-span__meta">1438–1506 · 60 yil bir davrda</span></span></li><li class="fx-span__row" style="--s:1450;--e:1535"><span class="fx-span__bar"><span class="fx-span__name">Kamoliddin Behzod</span><span class="fx-span__meta">1450–1535 · 51 yil bir davrda</span></span></li><li class="fx-span__row" style="--s:1483;--e:1530"><span class="fx-span__bar"><span class="fx-span__name">Zahiriddin Muhammad Bobur</span><span class="fx-span__meta">1483–1530 · 18 yil bir davrda</span></span></li><li class="fx-span__row" style="--s:1370;--e:1560" data-open><span class="fx-span__bar"><span class="fx-span__name">Temuriylar uyi (davomi)</span><span class="fx-span__meta">1370–…</span></span></li> </ul></div>
Tokenlar: --fx-bg-brand-solid --fx-bg-surface --fx-border-color-default --fx-border-color-focus --fx-border-width-default --fx-border-width-focus --fx-font-size-sm --fx-font-size-xs --fx-font-weight-medium --fx-font-weight-semibold --fx-radius-control --fx-space-1 --fx-space-10 --fx-space-12 --fx-space-2 --fx-space-6 --fx-text-on-brand --fx-text-primary --fx-text-tertiary --fx-viz-brand