PenTool UIتصفّح المكتبة

المكوّنات · شريط جانبي بلوحة أوامر

شريط جانبي بلوحة أوامر

Ctrl+K تفتح بحثًا يقفز إلى أي قسم بالكيبورد وحده

13 تصاميم من هذه العائلة
شريط جانبي بلوحة أوامرشريط جانبي بشارات حيّةشريط جانبي قابل للطيّدرج جانبي للجوّالشريط جانبي بمجموعاتشريط أيقونات بتلميحاتشريط جانبي متعدّد المستوياتشريط جانبي بتثبيت البنودشريط جانبي بملفّ المستخدمشريط جانبي بمؤشّرات إنجازشريط جانبي ببحثشريط مزدوج بلوحة سياقيةشريط جانبي بمبدّل مساحات
متقدّم
<div class="sb sbcm">
  <nav aria-label="التنقّل الرئيسي">
    <div class="sb-head">
      <b data-ar="مشاريع نُهى" data-en="Nuha Projects">مشاريع نُهى</b>
      <kbd class="hint">Ctrl K</kbd>
    </div>
    <ul>
      <li data-k="اللوحة Board"><button class="item" data-nav aria-current="page">
        <span class="ic" aria-hidden="true">◰</span>
        <span class="lbl" data-ar="اللوحة" data-en="Board">اللوحة</span>
      </button></li>
      <li data-k="المهامّ Tasks"><button class="item" data-nav>
        <span class="ic" aria-hidden="true">◱</span>
        <span class="lbl" data-ar="المهامّ" data-en="Tasks">المهامّ</span>
      </button></li>
      <li data-k="المراحل Milestones"><button class="item" data-nav>
        <span class="ic" aria-hidden="true">◲</span>
        <span class="lbl" data-ar="المراحل" data-en="Milestones">المراحل</span>
      </button></li>
      <li data-k="الفريق Team"><button class="item" data-nav>
        <span class="ic" aria-hidden="true">◳</span>
        <span class="lbl" data-ar="الفريق" data-en="Team">الفريق</span>
      </button></li>
      <li data-k="الوقت Time"><button class="item" data-nav>
        <span class="ic" aria-hidden="true">◴</span>
        <span class="lbl" data-ar="الوقت" data-en="Time">الوقت</span>
      </button></li>
      <li data-k="الملفات Files"><button class="item" data-nav>
        <span class="ic" aria-hidden="true">◵</span>
        <span class="lbl" data-ar="الملفات" data-en="Files">الملفات</span>
      </button></li>
    </ul>
  </nav>
    <div class="body">
      <h4 data-ar="إدارة مشاريع" data-en="Project management">إدارة مشاريع</h4>
      <p data-ar="اضغط أي بند لتراه ينشط. التنقّل بالكيبورد يعمل بالأسهم." data-en="Click any item to activate it. Arrow keys navigate.">اضغط أي بند لتراه ينشط. التنقّل بالكيبورد يعمل بالأسهم.</p>
      <button class="openp" data-ar="افتح لوحة الأوامر" data-en="Open command palette">افتح لوحة الأوامر</button>
    </div>
  <div class="pal" hidden role="dialog" aria-modal="true" aria-label="لوحة الأوامر">
    <input class="pq" type="text" aria-label="اكتب للبحث"
           placeholder="اكتب للانتقال…" data-ar-ph="اكتب للانتقال…" data-en-ph="Type to jump…">
    <ul class="pres" role="listbox"></ul>
    <p class="pempty" hidden data-ar="لا نتائج" data-en="No results">لا نتائج</p>
  </div>
</div>
← شريط جانبي قابل للطيّدرج جانبي للجوّال →