Ma'lumot · compound
Taşkiliy tuzilma
Taşkiliy tuzilma (4.139): rahbar → bölimlar → xodimlar daraxti, tepadan pastga, boğlovçi çiziqlar bilan. Tugunlar yiğiladi (kartoçka ostidagi «−» / «+N» — yaşirin odamlar soni), kenglik siğmasa gorizontal aylanadi; data-layout="list" — tor ekran uçun çekinişli röyxat. Kartoçka: avatar, ism, lavozim; bölim uçun data-kind="unit" (avatarsiz). APG treeview klaviaturasi.
- Rustam SaidovBoş direktor
- Dilnoza YusupovaSavdo bölimi rahbari
- Aziz KarimovMenejer, Toşkent
- Bobur RahimovMenejer, Samarqand
- Jasur AliyevIşlab çiqariş rahbari
- Töquv sexi24 xodim
- Böyoq sexi11 xodim
- Sifat nazorati5 xodim
- Malika SaidovaBoş hisobçi
- Feruza IsmoilovaHisobçi
Variantlar
| Atribut | Qiymatlar | Standart |
|---|---|---|
data-layout | tree tepadan pastgalist çekinişli röyxat (telefon) | tree |
data-kind | personunit bölim kartoçkasi | person |
Anatomiya
- root
.fx-orgchartşart - node
.fx-orgchart__nodeşart - card
.fx-orgchart__cardşart - name
.fx-orgchart__nameşart - role
.fx-orgchart__roleixtiyoriy - group
.fx-orgchart__groupixtiyoriy - toggle
.fx-orgchart__toggleixtiyoriy
Holatlar
Klaviatura va kiriş
| Tugma | Amal |
|---|---|
| ↓ ↑ | Keyingi / oldingi körinadigan tugun |
| → | Yopiq tugunni oçadi; oçiq bölsa — birinçi böysunuvçiga |
| ← | Oçiq tugunni yopadi; aks holda rahbarga |
| Home / End | Birinçi / oxirgi tugun |
| * | Şu darajadagi hammasini oçadi |
| Enter / Boʻshliq | Tugunni tanlaydi |
role="tree" → har tugun role="treeitem" (aria-level, aria-expanded, aria-label: «Dilnoza Yusupova, Savdo bölimi rahbari, 2 kişi»), böysunuvçilar role="group". Bitta Tab bekati; yiğiş tugmasi siçqonça uçun (aria-hidden) — klaviaturada → / ←. Tanlangan tugun aria-selected + brend çegara.
Naqş: WAI-ARIA APG treeview · rol tree
Kod
AI uçun: qaçon işlatiladi
- HR / kadrlar bölimi: kim kimga böysunadi.
- Kompaniya profili, bölimlar tuzilmasi, ruxsatlar ierarxiyasi.
- Fayl va papkalar, menyu →
tree - Jarayon bosqiçlari (ketma-ket) →
flow - Ierarxik jadval (ustunlar bilan) →
treegrid - 300 tadan köp tugunni bir ekranga oçmang — 2-darajadan pastini yiğilgan holda bering.
- Lavozimni faqat rang bilan bildirmang (rahbar — kök) — yozuv bilan.
- Fayl yoki menyu daraxti uçun işlatmang — tree.
npx foxui add orgchart
<ul class="fx-orgchart" data-fx-orgchart aria-label="«Zarafşon Tekstil» taşkiliy tuzilmasi">
<li class="fx-orgchart__node"><div class="fx-orgchart__card"><span class="fx-avatar" data-size="sm" data-color="purple" aria-hidden="true">RS</span><span class="fx-orgchart__name">Rustam Saidov</span><span class="fx-orgchart__role">Boş direktor</span></div>
<ul class="fx-orgchart__group">
<li class="fx-orgchart__node"><div class="fx-orgchart__card"><span class="fx-avatar" data-size="sm" data-color="green" aria-hidden="true">DY</span><span class="fx-orgchart__name">Dilnoza Yusupova</span><span class="fx-orgchart__role">Savdo bölimi rahbari</span></div>
<ul class="fx-orgchart__group">
<li class="fx-orgchart__node"><div class="fx-orgchart__card"><span class="fx-avatar" data-size="sm" data-color="blue" aria-hidden="true">AK</span><span class="fx-orgchart__name">Aziz Karimov</span><span class="fx-orgchart__role">Menejer, Toşkent</span></div></li>
<li class="fx-orgchart__node"><div class="fx-orgchart__card"><span class="fx-avatar" data-size="sm" data-color="yellow" aria-hidden="true">BR</span><span class="fx-orgchart__name">Bobur Rahimov</span><span class="fx-orgchart__role">Menejer, Samarqand</span></div></li>
</ul>
</li>
<li class="fx-orgchart__node" aria-expanded="false"><div class="fx-orgchart__card"><span class="fx-avatar" data-size="sm" data-color="coral" aria-hidden="true">JA</span><span class="fx-orgchart__name">Jasur Aliyev</span><span class="fx-orgchart__role">Işlab çiqariş rahbari</span></div>
<ul class="fx-orgchart__group">
<li class="fx-orgchart__node"><div class="fx-orgchart__card" data-kind="unit"><span class="fx-orgchart__name">Töquv sexi</span><span class="fx-orgchart__role">24 xodim</span></div></li>
<li class="fx-orgchart__node"><div class="fx-orgchart__card" data-kind="unit"><span class="fx-orgchart__name">Böyoq sexi</span><span class="fx-orgchart__role">11 xodim</span></div></li>
<li class="fx-orgchart__node"><div class="fx-orgchart__card" data-kind="unit"><span class="fx-orgchart__name">Sifat nazorati</span><span class="fx-orgchart__role">5 xodim</span></div></li>
</ul>
</li>
<li class="fx-orgchart__node"><div class="fx-orgchart__card"><span class="fx-avatar" data-size="sm" data-color="pink" aria-hidden="true">MS</span><span class="fx-orgchart__name">Malika Saidova</span><span class="fx-orgchart__role">Boş hisobçi</span></div>
<ul class="fx-orgchart__group">
<li class="fx-orgchart__node"><div class="fx-orgchart__card"><span class="fx-avatar" data-size="sm" data-color="green" aria-hidden="true">FI</span><span class="fx-orgchart__name">Feruza Ismoilova</span><span class="fx-orgchart__role">Hisobçi</span></div></li>
</ul>
</li>
</ul>
</li>
</ul>Tokenlar: --fx-bg-brand-solid --fx-bg-brand-subtle --fx-bg-muted --fx-bg-pressed --fx-bg-subtle --fx-bg-surface --fx-border-color-focus --fx-border-color-strong --fx-border-color-surface --fx-border-width-default --fx-border-width-focus --fx-ease-standard --fx-font-size-sm --fx-font-size-xs --fx-font-weight-semibold --fx-motion-fast --fx-radius-badge --fx-radius-control --fx-radius-pill --fx-shadow-md --fx-shadow-sm --fx-size-checkbox --fx-space-1 --fx-space-12 --fx-space-2 --fx-space-3 --fx-space-4 --fx-space-6 --fx-space-8 --fx-text-on-brand --fx-text-primary --fx-text-secondary --fx-text-tertiary