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

المكوّنات · لوحة مرشّحات

لوحة مرشّحات

التغييرات مؤقّتة حتى «تطبيق»، و«إعادة ضبط» تُرجعها

7 تصاميم من هذه العائلة
لوحة مرشّحاتلوحة إجراءاتلوحة تأكيد لا رجعة فيهلوحة سفلية بنقاط توقّفلوحة اختيار وسيلة الدفعلوحة منتقي بعجلاتلوحة مشاركة بشبكة
متقدّم
<div class="ap apsl"><div class="ph">
  <div class="sb"><span class="tm num"></span>
    <span class="r" aria-hidden="true"><span>▲</span><span>◗</span><span class="bt num"></span></span></div>
  <div class="scr"><div class="body">
    <div class="hd"><h6 data-ar="الأزياء" data-en="Fashion">الأزياء</h6>
      <button class="fb tap" aria-expanded="false"><span data-ar="تصفية" data-en="Filter">تصفية</span>
        <b class="fc num"></b></button></div>
    <div class="cnt num"></div>
    <div class="grid"></div>
    <p class="empty" hidden data-ar="لا منتج يطابق" data-en="Nothing matches">لا منتج يطابق</p>
  </div></div>
  <div class="scrim" hidden></div>
  <section class="sheet" hidden aria-label="المرشّحات">
    <div class="grab" role="separator" aria-label="مقبض اللوحة"></div>
    <div class="sh"><b data-ar="تصفية" data-en="Filter">تصفية</b>
      <button class="rs" data-ar="إعادة ضبط" data-en="Reset">إعادة ضبط</button></div>
    <div class="cn">
      <div class="fg"><span data-ar="الفئة" data-en="Category">الفئة</span><div class="ck cat"></div></div>
      <div class="fg"><span data-ar="المقاس" data-en="Size">المقاس</span><div class="ck sz"></div></div>
      <div class="fg"><span data-ar="السعر الأقصى" data-en="Max price">السعر الأقصى</span>
        <input class="pr" type="range" min="40" max="400" step="20" value="400" aria-label="السعر الأقصى">
        <b class="pv num"></b></div>
    </div>
    <button class="ap-btn" data-ar="تطبيق" data-en="Apply">تطبيق</button>
  </section>
  <div class="safe"></div>
</div></div>
← لوحة سفلية بنقاط توقّفلوحة اختيار وسيلة الدفع →