Navigatsiya · compound
Mundarija
Uzun sahifaning yon mundarijasi (#87): sarlavhalarga havolalar, hozir körinayotgan bölim aria-current="location" bilan belgilanadi (IntersectionObserver). Havola bosilsa tekis siljiydi (reduced-motion'da bir zumda). 2 daraja (h2/h3).
Kiriş
Matn.
Örnatiş
Matn.
npm orqali
Matn.
Sozlaş
Matn.
Anatomiya
- root
.fx-tocşart - title
.fx-toc__titleixtiyoriy - list
.fx-toc__listşart - link
.fx-toc__linkşart
Holatlar
Klaviatura va kiriş
| Tugma | Amal |
|---|---|
| Tab, Enter | Bölimga siljiydi |
<nav aria-label>; faol havola aria-current="location"; havolalar oddiy <a href="#id"> — JS'siz ham işlaydi.
Naqş: WAI-ARIA APG landmarks · rol navigation
Kod
AI uçun: qaçon işlatiladi
npx foxui add toc
<nav class="fx-toc" aria-label="Sahifa mundarijasi" data-fx-toc>
<p class="fx-toc__title">Şu sahifada</p>
<ul class="fx-toc__list">
<li><a class="fx-toc__link" href="#toc-kirish">Kiriş</a></li>
<li><a class="fx-toc__link" href="#toc-ornatish">Örnatiş</a></li>
<li><a class="fx-toc__link" data-depth="3" href="#toc-npm">npm orqali</a></li>
<li><a class="fx-toc__link" href="#toc-sozlash">Sozlaş</a></li>
</ul>
</nav>
<h2 id="toc-kirish">Kiriş</h2><p>Matn.</p>
<h2 id="toc-ornatish">Örnatiş</h2><p>Matn.</p>
<h3 id="toc-npm">npm orqali</h3><p>Matn.</p>
<h2 id="toc-sozlash">Sozlaş</h2><p>Matn.</p>Tokenlar: --fx-bg-brand-solid --fx-border-color-default --fx-border-color-focus --fx-border-width-default --fx-border-width-focus --fx-ease-standard --fx-font-size-sm --fx-font-size-xs --fx-font-weight-medium --fx-font-weight-semibold --fx-motion-base --fx-motion-fast --fx-radius-badge --fx-size-topbar --fx-space-1 --fx-space-2 --fx-space-3 --fx-space-4 --fx-space-6 --fx-space-8 --fx-text-brand --fx-text-primary --fx-text-secondary