پرش به محتوا
بناBana UI

حالت نمایش

پالت رنگی

با ↑ ↓ جابه‌جا شوید و Enter را بزنید. Esc برای بستن.

Command Menu

پنجره جست‌وجوی سریع با Ctrl+K (در مک ⌘+K). جست‌وجو مخصوص فارسی است: «ي/ی»، «ك/ک»، ارقام فارسی و عربی، نیم‌فاصله و اعراب نادیده گرفته می‌شوند.

Command Menu
کد
<button ui="secondary" data-command-open>جست‌وجو… <kbd>Ctrl K</kbd></button>
<dialog ui="command" aria-label="جست‌وجو و فرمان‌ها">
  <input type="search" placeholder="یک فرمان یا صفحه را بنویسید…">
  <ul role="listbox" aria-label="نتایج">
    <li role="presentation">صفحه‌ها</li>
    <li role="option"><a href="#palette">پالت رنگی</a></li>
    <li role="option" data-keywords="dark night شب"><a href="#themes">تم‌ها</a></li>
    <li role="option"><a href="#forms">فرم و ورودی‌ها</a></li>
    <li role="presentation">عملیات</li>
    <li role="option" data-keywords="toast notification">نمایش اعلان آزمایشی</li>
  </ul>
  <p data-empty hidden>نتیجه‌ای پیدا نشد. عبارت کوتاه‌تری امتحان کنید.</p>
</dialog>

هر role="option" می‌تواند لینک داخلش داشته باشد یا به رویداد bana:command-select گوش دهید (e.detail.item). کلمه‌های هم‌معنی را در data-keywords بگذارید. کلیدها: ↑↓، Enter، Esc. فوکوس همیشه در ورودی می‌ماند و گزینه فعال با aria-activedescendant اعلام می‌شود. از JS: Bana.command.open().

ویرایش این صفحه در GitHub