Karkas · compound
Bölinadigan panellar
Ikki panel (röyxat va tafsilot, kod va natija) örtasida tortiladigan ajratgiç. Siçqonça/sensor bilan tortiladi, klaviaturada ← → (ustma-ust bölsa ↑ ↓) qadamlab suradi, Enter yoki ikki marta bosiş birinçi panelni yiğadi. Qiymat foizda, istasangiz localStorage'da saqlanadi.
- Aziz Karimov
- Madina Yusupova
- Bobur Toş
Sayt buyurtmasi · 12-oktyabr
Variantlar
| Atribut | Qiymatlar | Standart |
|---|---|---|
data-orientation | horizontalvertical Ustma-ust | horizontal |
Anatomiya
- root
.fx-splitşart - pane
.fx-split__paneşart - handle
.fx-split__handleşart
Holatlar
Klaviatura va kiriş
| Tugma | Amal |
|---|---|
| ← → | Birinçi panelni 5 % kiçraytiradi/kattalaştiradi (vertikalda ↑ ↓) |
| Shift + strelka | Katta qadam |
| Home, End | Eng kiçik / eng katta |
| Enter | Birinçi panelni yiğadi yoki qaytaradi |
Ajratgiç role="separator" tabindex=0 + aria-valuenow/min/max (foiz) + aria-controls (birinçi panel) + aria-label; aria-orientation xulq tomonidan qöyiladi.
Naqş: WAI-ARIA APG windowsplitter · rol separator
Kod
AI uçun: qaçon işlatiladi
- Röyxat va tafsilotni yonma-yon körsatişda foydalanuvçi özi eni sozlasin (poçta, fayl menejeri, kod muharriri).
npx foxui add split
<div class="fx-split" data-fx-split style="block-size: 14rem; border: 1px solid var(--fx-border-color-default)">
<div class="fx-split__pane" id="sp-list" tabindex="0" role="region" aria-label="Arizalar röyxati">
<ul class="fx-list" style="padding-inline: var(--fx-space-4)">
<li class="fx-list__item"><div class="fx-list__body"><span class="fx-list__title">Aziz Karimov</span><span class="fx-list__meta">Sayt buyurtmasi</span></div></li>
<li class="fx-list__item"><div class="fx-list__body"><span class="fx-list__title">Madina Yusupova</span><span class="fx-list__meta">Mobil ilova</span></div></li>
<li class="fx-list__item"><div class="fx-list__body"><span class="fx-list__title">Bobur Toş</span><span class="fx-list__meta">Dizayn tizimi</span></div></li>
</ul>
</div>
<div class="fx-split__handle" role="separator" tabindex="0" aria-label="Röyxat eni" aria-controls="sp-list" aria-valuenow="35" aria-valuemin="20" aria-valuemax="70"></div>
<div class="fx-split__pane" role="region" aria-label="Ariza tafsiloti" tabindex="0"><div style="padding: var(--fx-space-4)"><strong>Aziz Karimov</strong><p class="fx-hint">Sayt buyurtmasi · 12-oktyabr</p></div></div>
</div>Tokenlar: --fx-bg-brand-solid --fx-bg-page --fx-border-color-default --fx-border-color-focus --fx-border-width-default --fx-border-width-focus --fx-ease-standard --fx-motion-fast --fx-radius-circle --fx-space-1 --fx-space-2 --fx-space-6