Qatlamlar · compound

Klaviatura yorliqlari oynasi

«?» bosilganda oçiladigan yorliqlar röyxati: guruhlangan (umumiy, ötiş, röyxat), har qatorda amal va tugmalar (fx-kbd), «G keyin I» ketma-ketligi, qidiruv. Mac'da ⌘ ni ilova özi matnga yozadi.

beta0.23.0 dan.fx-shortcutsCSS + JS

Anatomiya

root.fx-shortcutsşart
head.fx-shortcuts__headixtiyoriy
title.fx-shortcuts__titleşart
search.fx-shortcuts__searchixtiyoriy
body.fx-shortcuts__bodyixtiyoriy
group.fx-shortcuts__groupşart
group title.fx-shortcuts__group-titleixtiyoriy
row.fx-shortcuts__rowixtiyoriy
label.fx-shortcuts__labelixtiyoriy
keys.fx-shortcuts__keysixtiyoriy
then.fx-shortcuts__thenixtiyoriy
empty.fx-shortcuts__emptyixtiyoriy

Holatlar

open

Klaviatura va kiriş

Tugma	Amal
`?`	Oçadi
`Esc`	Yopadi
`Tab`	Qidiruv va yopiş tugmasi

Native <dialog aria-labelledby> — fokus tuzoği va Esc brauzerda. Guruh <dl>: amal <dt>, tugmalar <dd>. «?» yoziş maydonida va boşqa dialog oçiqligida işlamaydi.

Naqş: WAI-ARIA APG dialog-modal · rol dialog

Kod

AI uçun: qaçon işlatiladi

Işlating

Klaviatura bilan köp işlanadigan ilovada (CRM, kiruvçilar, muharrir) yorliqlar ma'lumotnomasi.

Işlatmang

Hamma sahifa va amalni qidiriş → command
Bitta tugma yorliğini körsatiş → kbd
Röyxatni qölda yangilab yurmang — ilovadagi yorliqlar röyxatidan hosil qiling, aks holda eskiradi.
Yorliqni faqat şu oynada e'lon qilmang — menyu bandlari va tooltip'larda ham körsating.

npx foxui add shortcuts

<button class="fx-btn" data-fx-shortcuts-open="sc">Yorliqlar <kbd class="fx-kbd">?</kbd></button>
<dialog class="fx-shortcuts" id="sc" aria-labelledby="sc-t" data-fx-shortcuts>
  <div class="fx-shortcuts__head"><h2 class="fx-shortcuts__title" id="sc-t">Klaviatura yorliqlari</h2><input class="fx-shortcuts__search" type="search" placeholder="Qidiriş" aria-label="Yorliq qidiriş" autocomplete="off"><form method="dialog"><button class="fx-btn" data-variant="ghost" data-shape="icon" data-size="sm" aria-label="Yopiş"><svg viewBox="0 0 16 16" aria-hidden="true"><path d="M4 4l8 8M12 4l-8 8" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg></button></form></div>
  <div class="fx-shortcuts__body">
    <dl class="fx-shortcuts__group"><dt class="fx-shortcuts__group-title">Umumiy</dt>
      <div class="fx-shortcuts__row"><dt class="fx-shortcuts__label">Buyruqlar oynasi</dt><dd class="fx-shortcuts__keys"><kbd class="fx-kbd">Ctrl</kbd><kbd class="fx-kbd">K</kbd></dd></div>
      <div class="fx-shortcuts__row"><dt class="fx-shortcuts__label">Yorliqlar oynasi</dt><dd class="fx-shortcuts__keys"><kbd class="fx-kbd">?</kbd></dd></div>
      <div class="fx-shortcuts__row"><dt class="fx-shortcuts__label">Qidiriş</dt><dd class="fx-shortcuts__keys"><kbd class="fx-kbd">/</kbd></dd></div>
    </dl>
    <dl class="fx-shortcuts__group"><dt class="fx-shortcuts__group-title">Ötiş</dt>
      <div class="fx-shortcuts__row"><dt class="fx-shortcuts__label">Kiruvçilarga</dt><dd class="fx-shortcuts__keys"><kbd class="fx-kbd">G</kbd> <span class="fx-shortcuts__then">keyin</span> <kbd class="fx-kbd">I</kbd></dd></div>
      <div class="fx-shortcuts__row"><dt class="fx-shortcuts__label">Arizalarga</dt><dd class="fx-shortcuts__keys"><kbd class="fx-kbd">G</kbd> <span class="fx-shortcuts__then">keyin</span> <kbd class="fx-kbd">A</kbd></dd></div>
    </dl>
    <dl class="fx-shortcuts__group"><dt class="fx-shortcuts__group-title">Röyxat</dt>
      <div class="fx-shortcuts__row"><dt class="fx-shortcuts__label">Keyingi / oldingi</dt><dd class="fx-shortcuts__keys"><kbd class="fx-kbd">J</kbd><kbd class="fx-kbd">K</kbd></dd></div>
      <div class="fx-shortcuts__row"><dt class="fx-shortcuts__label">Arxivlaş</dt><dd class="fx-shortcuts__keys"><kbd class="fx-kbd">E</kbd></dd></div>
    </dl>
    <p class="fx-shortcuts__empty" hidden>Bunday yorliq topilmadi</p>
  </div>
</dialog>

Tokenlar: --fx-bg-field --fx-bg-overlay --fx-bg-surface --fx-border-color-default --fx-border-color-field --fx-border-color-focus --fx-border-color-surface --fx-border-width-default --fx-border-width-focus --fx-control-h-sm --fx-dialog-width --fx-ease-enter --fx-ease-exit --fx-font-size-lg --fx-font-size-sm --fx-font-size-xs --fx-font-weight-medium --fx-font-weight-semibold --fx-motion-base --fx-motion-exit-fast --fx-motion-scale-enter --fx-popover-width --fx-radius-control --fx-radius-overlay --fx-shadow-lg --fx-space-1 --fx-space-3 --fx-space-4 --fx-space-5 --fx-space-6 --fx-space-8 --fx-text-primary --fx-text-secondary --fx-text-tertiary

Şu toifadan

AI yordamçi (widget)Saytlar uçun AI yordamçi: öng pastda dumaloq tugma (çat ikonkasi yoki ixtiyoriy personaj) → suhbat oynasi.Kontekst menyuMaydon yoki qator ustida öng tugma, sensorda uzoq bosiş yoki klaviaturada Shift+F10 / ☰ bilan menyu kursor örnida oçiladi.Kontekst menyuÖng tugma, uzoq bosiş (telefon) yoki Shift+F10 / Menu tugmasi bilan kursor joyida oçiladigan menyu (4.147).DialogTasdiq va qisqa formalar uçun modal oyna.Suzuvçi oynaSahifa ustida qoladigan, modal bölmagan panel (4.152): video qönğiroq, AI yordamçi, kalkulyator, tezkor eslatma — foydalanuvçi orqadagi sahifa bilan işlaşda davom etadi.Hover kartaIsm, havola yoki avatar ustida keçikiş bilan çiqadigan kartoçka (4.149): mijoz profili, bitim qisqaçasi, havola oldindan körinişi.

Klaviatura yorliqlari oynasi