Navigatsiya · compound
Daraxt
Içma-iç röyxat (papkalar, bilim bazasi, bölimlar): papka — <details>, chevron yopiqda −90°; çapda yöl çiziği; joriy band brend tusida. Kengaytma: barg ikoni a[data-kind=file|image|code|folder], aria-busy (lazy yuklaniş spinneri), içida .fx-check, details oçiliş animatsiyasi. Sudrab köçiriş va qayta nomlaş (4.136, foxui.js → tree): data-dnd — bandni papkaga (içiga) yoki faylga (undan keyin) sudraş; klaviatura muqobili — Ctrl+X bilan oliş, boşqa papkada Ctrl+V, Esc — bekor; holat yaşirin jonli hududda söz bilan. data-rename — F2 yoki ikki marta bosiş: joyida maydon, Enter saqlaydi, Esc bekor qiladi, böş nom qabul qilinmaydi. Hodisalar fx-tree-move va fx-tree-rename (bekor qilinadi).
Variantlar
| Atribut | Qiymatlar | Standart |
|---|---|---|
data-kind | fileimagecodefolder | — |
data-dnd | | — |
data-rename | | — |
Anatomiya
- root
.fx-treeşart - item
.fx-tree__itemşart - rename
.fx-tree__renameixtiyoriy
Holatlar
Klaviatura va kiriş
| Tugma | Amal |
|---|---|
| Enter, Space | Papkani oçadi / yopadi |
| Tab | Keyingi band |
| Ctrl+X | Bandni köçiriş uçun oliş (data-dnd) |
| Ctrl+V | Olingan bandni fokusdagi papkaga (yoki fayldan keyin) köçiriş |
| Esc | Köçirişni yoki nomlaşni bekor qiliş |
| F2 | Qayta nomlaş (data-rename); Enter — saqlaş |
Native details/summary + havolalar (disclosure naqşi); joriy band aria-current="page".
Naqş: WAI-ARIA APG disclosure · rol list
Kod
AI uçun: qaçon işlatiladi
- Papkalar, bilim bazasi, içma-iç bölimlar.
- Bir darajali menyu →
nav - 5 darajadan çuqur daraxt qilmang — qidiruv qöşing.
npx foxui add tree
<ul class="fx-tree" aria-label="Bilimlar">
<li><details open><summary class="fx-tree__item">Loyihalar</summary>
<ul>
<li><a class="fx-tree__item" href="#" aria-current="page">FoxUI action plan</a></li>
<li><details><summary class="fx-tree__item">Server</summary><ul><li><a class="fx-tree__item" href="#">Caddy</a></li></ul></details></li>
</ul>
</details></li>
<li><a class="fx-tree__item" href="#">Qarorlar</a></li>
</ul>
<ul class="fx-tree"><li><details open><summary class="fx-tree__item">src</summary><ul><li><a class="fx-tree__item" href="#" data-kind="code">main.js</a></li><li><a class="fx-tree__item" href="#" data-kind="image">logo.png</a></li></ul></details></li></ul>
<!-- Sudrab koʻchirish va qayta nomlash (4.136) -->
<ul class="fx-tree" id="tr-dnd" data-fx-tree data-dnd data-rename aria-label="Loyiha fayllari — sudrang, F2 — nomlaş">
<li><details open><summary class="fx-tree__item">Şartnomalar</summary><ul>
<li><a class="fx-tree__item" href="#" data-kind="file">Samarqand Savdo.pdf</a></li>
<li><a class="fx-tree__item" href="#" data-kind="file">Tong Maktabi.pdf</a></li>
</ul></details></li>
<li><details open><summary class="fx-tree__item">Hisobotlar</summary><ul>
<li><a class="fx-tree__item" href="#" data-kind="file">3-chorak.xlsx</a></li>
</ul></details></li>
<li><details><summary class="fx-tree__item">Arxiv</summary><ul></ul></details></li>
<li><a class="fx-tree__item" href="#" data-kind="image">logo.png</a></li>
</ul>Tokenlar: --fx-bg-brand-solid --fx-bg-brand-subtle --fx-bg-field --fx-bg-muted --fx-bg-pressed --fx-border-color-default --fx-border-color-error --fx-border-color-focus --fx-border-color-strong --fx-border-width-default --fx-border-width-focus --fx-duration-pulse --fx-duration-spin --fx-ease-standard --fx-font-size-sm --fx-motion-base --fx-motion-fast --fx-nav-subitem-height --fx-radius-badge --fx-radius-circle --fx-radius-nav --fx-size-icon-sm --fx-space-1 --fx-space-2 --fx-text-brand --fx-text-primary --fx-text-secondary --fx-text-tertiary