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

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

شريط جانبي بشارات حيّة

عدّادات تتغيّر ويُعلَن تغيّرها لقارئ الشاشة

13 تصاميم من هذه العائلة
شريط جانبي بشارات حيّةشريط جانبي قابل للطيّشريط جانبي بلوحة أوامردرج جانبي للجوّالشريط جانبي بمجموعاتشريط أيقونات بتلميحاتشريط جانبي متعدّد المستوياتشريط جانبي بتثبيت البنودشريط جانبي بملفّ المستخدمشريط جانبي بمؤشّرات إنجازشريط جانبي ببحثشريط مزدوج بلوحة سياقيةشريط جانبي بمبدّل مساحات
متوسّط
<div class="sb sbb">
  <nav aria-label="التنقّل الرئيسي">
    <div class="sb-head"><b data-ar="الدعم الفنّي" data-en="Support">الدعم الفنّي</b></div>
    <ul>
      <li><button class="item" data-nav aria-current="page">
        <span class="ic" aria-hidden="true">◍</span>
        <span class="lbl" data-ar="الوارد" data-en="Inbox">الوارد</span><span class="bdg">18</span>
      </button></li>
      <li><button class="item" data-nav>
        <span class="ic" aria-hidden="true">◎</span>
        <span class="lbl" data-ar="المسنَدة إليّ" data-en="Assigned">المسنَدة إليّ</span><span class="bdg">5</span>
      </button></li>
      <li><button class="item" data-nav>
        <span class="ic" aria-hidden="true">◌</span>
        <span class="lbl" data-ar="قيد المعالجة" data-en="In progress">قيد المعالجة</span><span class="bdg">9</span>
      </button></li>
      <li><button class="item" data-nav>
        <span class="ic" aria-hidden="true">◉</span>
        <span class="lbl" data-ar="متأخّرة" data-en="Overdue">متأخّرة</span><span class="bdg">2</span>
      </button></li>
      <li><button class="item" data-nav>
        <span class="ic" aria-hidden="true">◐</span>
        <span class="lbl" data-ar="مغلقة" data-en="Closed">مغلقة</span>
      </button></li>
      <li><button class="item" data-nav>
        <span class="ic" aria-hidden="true">⚙</span>
        <span class="lbl" data-ar="الإعدادات" data-en="Settings">الإعدادات</span>
      </button></li>
    </ul>
  </nav>
  <div class="body">
    <h4 data-ar="مركز الدعم" data-en="Support desk">مركز الدعم</h4>
    <p data-ar="العدّاد يتغيّر كل ثلاث ثوانٍ، ويُعلَن لقارئ الشاشة بلا مقاطعة." data-en="The counter changes every three seconds and is announced without interrupting.">العدّاد يتغيّر كل ثلاث ثوانٍ، ويُعلَن لقارئ الشاشة بلا مقاطعة.</p>
    <button class="bump" data-ar="تذكرة جديدة" data-en="New ticket">تذكرة جديدة</button>
  </div>
</div>
← معالج تهيئةشريط جانبي قابل للطيّ →