Navigatsiya · compound
Buyruqlar oynasi
Ctrl/⌘+K: hamma sahifa va amalni bir joydan qidiriş. Native <dialog> tepada, qidiruv maydoni, guruhlangan variantlar, böş holat, pastda maslahat. Xulq foxui.js'da. Içma-iç sahifalar (variant bosilsa içiga kiradi, Backspace/Esc — orqaga) va «Oxirgi» tanlanganlar ham bor.
Anatomiya
- root
.fx-commandşart - input
.fx-command__inputşart - foot
.fx-command__footixtiyoriy - crumbs
.fx-command__crumbsixtiyoriy - crumb
.fx-command__crumbixtiyoriy
Holatlar
Klaviatura va kiriş
| Tugma | Amal |
|---|---|
| Ctrl/⌘ + K | Oçadi / yopadi |
| ↑ ↓ | Variant |
| Enter | Oçadi |
| Esc | Yopadi |
| Backspace (boʻsh maydonda), Esc (sahifa ichida) | Bir sahifa orqaga |
Input role="combobox" + aria-controls; faol variant aria-activedescendant; Esc — dialog.
Naqş: WAI-ARIA APG combobox · rol dialog
Kod
AI uçun: qaçon işlatiladi
- Köp bölimli ilovada tez ötiş va amallar.
- Röyxat içida qidiriş →
search - Har bir tugmani buyruqlar oynasiga qöymang — sahifalar va tez-tez amallar.
- Sahifa içida sahifa içida sahifa qilmang — ikki bosqiçdan çuqur bölsa, tuzilmani qayta öylang.
npx foxui add command
<button class="fx-btn" data-fx-command-open="cmd">Qidiriş <kbd class="fx-kbd">⌘K</kbd></button>
<dialog class="fx-command" id="cmd" aria-label="Buyruqlar" data-fx-command>
<div class="fx-command__crumbs" hidden></div>
<input class="fx-command__input" placeholder="Sahifa yoki amalni yozing" role="combobox" aria-expanded="true" aria-controls="cmd-list" autocomplete="off">
<ul class="fx-listbox" role="listbox" id="cmd-list">
<li class="fx-listbox__group" role="presentation" data-fx-recent>Oxirgilar</li>
<li class="fx-listbox__group" role="presentation">Sahifalar</li>
<li class="fx-option" role="option" id="c1"><a href="#" tabindex="-1" style="color:inherit;text-decoration:none">Arizalar</a></li>
<li class="fx-option" role="option" id="c2" data-keywords="mijoz crm"><a href="#" tabindex="-1" style="color:inherit;text-decoration:none">Mijozlar</a></li>
<li class="fx-listbox__group" role="presentation">Amallar</li>
<li class="fx-option" role="option" id="c3">Yangi ariza <span class="fx-option__hint">N</span></li>
<li class="fx-option" role="option" id="c4">Qoronği rejim</li>
<li class="fx-option" role="option" id="c5" data-page="tema" data-keywords="rang mavzu">Mavzuni özgartiriş…</li>
<li class="fx-option" role="option" id="c6" data-parent="tema">Moviy mavzu</li>
<li class="fx-option" role="option" id="c7" data-parent="tema">Yaşil mavzu</li>
<li class="fx-listbox__empty" hidden>Heç narsa topilmadi</li>
</ul>
<div class="fx-command__foot"><span>↑ ↓ tanlaş</span><span>Enter oçiş</span><span>Esc yopiş</span></div>
</dialog>Tokenlar: --fx-bg-muted --fx-bg-overlay --fx-bg-surface --fx-border-color-default --fx-border-color-surface --fx-border-width-default --fx-control-h-lg --fx-dialog-width --fx-ease-enter --fx-ease-exit --fx-font-size-md --fx-font-size-xs --fx-font-weight-medium --fx-motion-base --fx-motion-exit-fast --fx-motion-scale-enter --fx-radius-badge --fx-radius-overlay --fx-shadow-lg --fx-space-1 --fx-space-12 --fx-space-2 --fx-space-3 --fx-space-4 --fx-space-5 --fx-space-8 --fx-text-primary --fx-text-secondary --fx-text-tertiary