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

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

شريط مزدوج بلوحة سياقية

عمود أيقونات يبدّل محتوى العمود المجاور

13 تصاميم من هذه العائلة
شريط مزدوج بلوحة سياقيةشريط جانبي بشارات حيّةشريط جانبي قابل للطيّشريط جانبي بلوحة أوامردرج جانبي للجوّالشريط جانبي بمجموعاتشريط أيقونات بتلميحاتشريط جانبي متعدّد المستوياتشريط جانبي بتثبيت البنودشريط جانبي بملفّ المستخدمشريط جانبي بمؤشّرات إنجازشريط جانبي ببحثشريط جانبي بمبدّل مساحات
متقدّم
<div class="sb sbsp">
  <nav class="rail" aria-label="الأقسام">
    <ul>
      <li><button class="item" aria-current="page" aria-controls="p1" data-rail
        aria-label="المقرّرات"><span class="ic" aria-hidden="true">◧</span></button></li>
      <li><button class="item" aria-controls="p2" data-rail
        aria-label="الطلاب"><span class="ic" aria-hidden="true">◕</span></button></li>
      <li><button class="item" aria-controls="p3" data-rail
        aria-label="التقييم"><span class="ic" aria-hidden="true">◔</span></button></li>
    </ul>
  </nav>
  <div class="panel">
    <div id="p1" class="pane">
      <b data-ar="المقرّرات" data-en="Courses">المقرّرات</b>
      <ul>
        <li><button class="item" aria-current="page"><span class="lbl" data-ar="كل المقرّرات" data-en="All courses">كل المقرّرات</span></button></li>
        <li><button class="item"><span class="lbl" data-ar="قيد الإعداد" data-en="Drafts">قيد الإعداد</span></button></li>
        <li><button class="item"><span class="lbl" data-ar="المنشورة" data-en="Published">المنشورة</span></button></li>
      </ul>
    </div>
    <div id="p2" class="pane" hidden>
      <b data-ar="الطلاب" data-en="Students">الطلاب</b>
      <ul>
        <li><button class="item" aria-current="page"><span class="lbl" data-ar="المسجّلون" data-en="Enrolled">المسجّلون</span></button></li>
        <li><button class="item"><span class="lbl" data-ar="المتعثّرون" data-en="At risk">المتعثّرون</span></button></li>
        <li><button class="item"><span class="lbl" data-ar="الخرّيجون" data-en="Graduates">الخرّيجون</span></button></li>
      </ul>
    </div>
    <div id="p3" class="pane" hidden>
      <b data-ar="التقييم" data-en="Assessment">التقييم</b>
      <ul>
        <li><button class="item" aria-current="page"><span class="lbl" data-ar="الاختبارات" data-en="Quizzes">الاختبارات</span></button></li>
        <li><button class="item"><span class="lbl" data-ar="الواجبات" data-en="Assignments">الواجبات</span></button></li>
        <li><button class="item"><span class="lbl" data-ar="الشهادات" data-en="Certificates">الشهادات</span></button></li>
      </ul>
    </div>
  </div>
    <div class="body">
      <h4 data-ar="منصّة تعليمية" data-en="Learning platform">منصّة تعليمية</h4>
      <p data-ar="اضغط أي بند لتراه ينشط. التنقّل بالكيبورد يعمل بالأسهم." data-en="Click any item to activate it. Arrow keys navigate.">اضغط أي بند لتراه ينشط. التنقّل بالكيبورد يعمل بالأسهم.</p>
    </div>
</div>
← شريط جانبي ببحثشريط جانبي بمبدّل مساحات →