Navigatsiya · shell
Almaştirgiç
Workspace, brend yoki korxona almaştirgiçi: yon panel tepasida brend örnida turadi — belgi, nom, ikkinçi qator va chevron; bosilsa menyu oçiladi, tanlangani ✓ bilan belgilanadi va tugmaga köçadi. Şakli PDP almaştirgiçidan, ölçamlari FoxUI kalibridan. Yiğilgan yon menyuda faqat belgi qoladi. Kengaytma: .fx-switcher__logo[data-add] (“+ Yangi” belgisi), .fx-switcher__search (menyu içidagi qidiruv maydoni; filtrlaş ilovada).
Variantlar
| Atribut | Qiymatlar | Standart |
|---|---|---|
data-color | brandyellowpinkbluecoralgreenpurple | brand |
data-size | mdsm menyu bandida | md |
Anatomiya
- root
.fx-switcherşart - logo
.fx-switcher__logoşart - label
.fx-switcher__labelixtiyoriy - name
.fx-switcher__nameşart - sub
.fx-switcher__subixtiyoriy - chevron
.fx-switcher__chevixtiyoriy - search
.fx-switcher__searchixtiyoriy
Holatlar
Klaviatura va kiriş
| Tugma | Amal |
|---|---|
| Enter, Space | Menyuni oçadi |
| ↑ ↓ Home End | Bandlar böylab yuradi |
| Enter | Tanlaydi va yopadi |
| Esc | Yopadi |
Tugma: aria-haspopup="menu", aria-expanded (xulq yangilaydi); bandlar role="menuitemradio" + aria-checked; belgi aria-hidden.
Naqş: WAI-ARIA APG menu-button · rol button
Kod
AI uçun: qaçon işlatiladi
- Foydalanuvçi bir neçta workspace, brend yoki korxona orasida almaşadi va ular bir xil interfeysni ulaşadi.
npx foxui add switcher
<button class="fx-switcher" type="button" popovertarget="ws" aria-haspopup="menu" aria-expanded="false" data-fx-switcher> <span class="fx-switcher__logo" data-color="coral"><svg viewBox="0 0 32 32" aria-hidden="true"><path d="M4 4l8 7h8l8-7v13c0 6-5.4 11-12 11S4 23 4 17z" fill="currentColor"/></svg></span> <span class="fx-switcher__label"><span class="fx-switcher__name">RedFox</span><span class="fx-switcher__sub">Workspace</span></span> <svg class="fx-switcher__chev" viewBox="0 0 16 16" aria-hidden="true"><path d="M5 6l3-3 3 3M5 10l3 3 3-3" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg> </button> <div class="fx-menu" id="ws" role="menu" popover data-fx-menu> <div class="fx-menu__title" role="presentation">Workspace</div> <button class="fx-menu__item" role="menuitemradio" aria-checked="true" data-value="redfox"><span class="fx-switcher__logo" data-size="sm" data-color="coral">R</span>RedFox</button> <button class="fx-menu__item" role="menuitemradio" aria-checked="false" data-value="webfox"><span class="fx-switcher__logo" data-size="sm" data-color="blue">W</span>WebFox</button> <button class="fx-menu__item" role="menuitemradio" aria-checked="false" data-value="nomlab"><span class="fx-switcher__logo" data-size="sm" data-color="green">N</span>NomLab</button> <button class="fx-menu__item" role="menuitemradio" aria-checked="false" data-value="foxui"><span class="fx-switcher__logo" data-size="sm" data-color="purple">F</span>FoxUI</button> <hr class="fx-menu__sep"> <button class="fx-menu__item" role="menuitemradio" aria-checked="false" data-value="all" data-label="Hammasi" data-sub="4 ta workspace"><span class="fx-switcher__logo" data-size="sm">∗</span>Hammasi</button> </div> <input class="fx-switcher__search" type="search" placeholder="Workspace qidiriş" aria-label="Workspace qidiriş"> <span class="fx-switcher__logo" data-add aria-hidden="true">+</span>
Tokenlar: --fx-bg-brand-solid --fx-bg-category-blue --fx-bg-category-coral --fx-bg-category-green --fx-bg-category-pink --fx-bg-category-purple --fx-bg-category-yellow --fx-bg-field --fx-bg-muted --fx-border-color-field --fx-border-color-focus --fx-border-color-strong --fx-border-width-default --fx-border-width-focus --fx-control-h-sm --fx-ease-emphasized --fx-ease-standard --fx-font-size-md --fx-font-size-sm --fx-font-size-xs --fx-font-weight-semibold --fx-motion-fast --fx-motion-instant --fx-motion-press --fx-motion-slow --fx-radius-control --fx-radius-nav --fx-radius-surface --fx-size-avatar-md --fx-size-icon-lg --fx-size-icon-sm --fx-space-1 --fx-space-12 --fx-space-2 --fx-space-3 --fx-space-4 --fx-text-on-brand --fx-text-on-category --fx-text-primary --fx-text-tertiary