Bootstrap 4

Dropdowns




bootstrap

يمكنك تبديل التراكبات السياقية لعرض قوائم الروابط والمزيد مع المكوّن الإضافي المنسدل لبوتستراب.

نظرة عامة

القوائم المنسدلة عبارة عن تراكبات للسياق يمكن عرضه لعرض قوائم الروابط والمزيد. إنها تفاعلية مع إضافة جافا سكريبت المنسدلة لبرنامج Bootstrap. يتم تثبيتها عن طريق النقر وليس عن طريق تحريك الماوس ؛ هذا هو قرار التصميم المتعمد.

يتم إنشاء Popper.js المنسدلة على مكتبة Popper.js لجهة خارجية ، وهي Popper.js ، والتي توفر ميزة تحديد الموقع الديناميكي وكشف إطار العرض. تأكد من تضمين popper.min.js قبل JavaScript في Bootstrap أو استخدم bootstrap.bundle.min.js / bootstrap.bundle.js الذي يحتوي على Popper.js. لا يتم استخدام Popper.js لوضع القوائم المنسدلة في navbars رغم أن تحديد المواقع الديناميكي غير مطلوب.

إذا كنت تقوم ببناء جافا سكريبت لدينا من المصدر ، فإنه يتطلب util.js

إمكانية الوصول

يحدد معيار WAI ARIA عنصرًا فعليًا role="menu" ، ولكن هذا محدد للقوائم التي تشبه التطبيقات والتي تؤدي إلى اتخاذ إجراءات أو وظائف. لا يمكن أن تحتوي قوائم ARIA إلا على عناصر القائمة ، وعناصر قائمة الاختيار ، وعناصر قائمة زر الراديو ، ومجموعات الأزرار ، والقوائم الفرعية.

من ناحية أخرى ، تم تصميم القوائم المنسدلة لبوتستراب بحيث تكون عامة وقابلة للتطبيق على مجموعة متنوعة من المواقف وهياكل التمييز. على سبيل المثال ، من الممكن إنشاء قوائم منسدلة تحتوي على مدخلات إضافية وعناصر تحكم بالنماذج ، مثل حقول البحث أو نماذج تسجيل الدخول. لهذا السبب ، لا يتوقع Bootstrap (ولا يضيف تلقائيًا) أيًا من role aria- المطلوبة لقوائم ARIA الحقيقية. سيتعين على المؤلفين تضمين هذه السمات الأكثر تحديدًا بأنفسهم.

ومع ذلك ، فإن Bootstrap يضيف دعمًا مدمجًا لمعظم تفاعلات قائمة لوحة المفاتيح القياسية ، مثل القدرة على التنقل من خلال عناصر فردية .dropdown-item باستخدام مفاتيح المؤشر وإغلاق القائمة باستخدام مفتاح ESC .

أمثلة

لف مفتاح تبديل القائمة المنسدلة (الزر أو الرابط) والقائمة المنسدلة داخل .dropdown أو أي عنصر آخر يعلن عن position: relative; . يمكن تشغيل القوائم المنسدلة من عناصر <a> أو <button> لملاءمة احتياجاتك المحتملة.

القوائم المنسدلة للزر الواحد

يمكن تحويل أي .btn واحد إلى تبديل القائمة المنسدلة مع بعض التغييرات الترميز. في ما يلي كيفية وضعهم للعمل مع عناصر <button> :

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown button
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>

ومع عناصر <a> :

<div class="dropdown show">
  <a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown link
  </a>

  <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>

أفضل جزء هو أنه يمكنك القيام بذلك باستخدام أي زر مختلف ، أيضًا:

<!-- Example single danger button -->
<div class="btn-group">
  <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Action
  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
    <div class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">Separated link</a>
  </div>
</div>

تقسيم القوائم المنسدلة

وبالمثل ، قم بإنشاء .dropdown-toggle-split مع نفس ترميز .dropdown-toggle-split المنسدلة للزر المفرد ، ولكن مع إضافة .dropdown-toggle-split للتباعد الصحيح حول علامة الإقحام المنسدلة.

نستخدم هذه الفئة الإضافية لتقليل padding الأفقي على جانبي علامة الإقحام بنسبة 25٪ وإزالة margin-left المضاف للقوائم المنسدلة للزر العادي. هذه التغييرات الإضافية تبقي علامة الإقحام متمركزة في زر التقسيم وتوفر منطقة ضرب أكثر ملائمة بشكل مناسب بجوار الزر الرئيسي.

<!-- Example split danger button -->
<div class="btn-group">
  <button type="button" class="btn btn-danger">Action</button>
  <button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
    <div class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">Separated link</a>
  </div>
</div>

التحجيم

تعمل القوائم المنسدلة للأزرار مع الأزرار من جميع الأحجام ، بما في ذلك الأزرار المنسدلة الافتراضية والمنقسمة.

<!-- Large button groups (default and split) -->
<div class="btn-group">
  <button class="btn btn-secondary btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Large button
  </button>
  <div class="dropdown-menu">
    ...
  </div>
</div>
<div class="btn-group">
  <button class="btn btn-secondary btn-lg" type="button">
    Large split button
  </button>
  <button type="button" class="btn btn-lg btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu">
    ...
  </div>
</div>

<!-- Small button groups (default and split) -->
<div class="btn-group">
  <button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Small button
  </button>
  <div class="dropdown-menu">
    ...
  </div>
</div>
<div class="btn-group">
  <button class="btn btn-secondary btn-sm" type="button">
    Small split button
  </button>
  <button type="button" class="btn btn-sm btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu">
    ...
  </div>
</div>

اختلاف dropup

قم .dropup القوائم المنسدلة فوق العناصر عن طريق إضافة .dropup إلى العنصر الأصل.

<!-- Default dropup button -->
<div class="btn-group dropup">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropup
  </button>
  <div class="dropdown-menu">
    <!-- Dropdown menu links -->
  </div>
</div>

<!-- Split dropup button -->
<div class="btn-group dropup">
  <button type="button" class="btn btn-secondary">
    Split dropup
  </button>
  <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu">
    <!-- Dropdown menu links -->
  </div>
</div>

اختلاف dropright

قم .dropright القوائم المنسدلة على يمين العناصر بإضافة .dropright إلى العنصر الأصل.

<!-- Default dropright button -->
<div class="btn-group dropright">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropright
  </button>
  <div class="dropdown-menu">
    <!-- Dropdown menu links -->
  </div>
</div>

<!-- Split dropright button -->
<div class="btn-group dropright">
  <button type="button" class="btn btn-secondary">
    Split dropright
  </button>
  <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="sr-only">Toggle Dropright</span>
  </button>
  <div class="dropdown-menu">
    <!-- Dropdown menu links -->
  </div>
</div>

الاختلاف في القطر

قم .dropleft القوائم المنسدلة على يسار العناصر عن طريق إضافة .dropleft إلى العنصر الرئيسي.

<!-- Default dropleft button -->
<div class="btn-group dropleft">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropleft
  </button>
  <div class="dropdown-menu">
    <!-- Dropdown menu links -->
  </div>
</div>

<!-- Split dropleft button -->
<div class="btn-group">
  <div class="btn-group dropleft" role="group">
    <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      <span class="sr-only">Toggle Dropleft</span>
    </button>
    <div class="dropdown-menu">
      <!-- Dropdown menu links -->
    </div>
  </div>
  <button type="button" class="btn btn-secondary">
    Split dropleft
  </button>
</div>

يجب أن تكون محتويات القائمة المنسدلة تاريخيًا روابط ، ولكن لم يعد هذا هو الحال مع الإصدار 4. يمكنك الآن استخدام عناصر <button> اختياريًا في القوائم المنسدلة بدلاً من <a> s فقط.

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenu2">
    <button class="dropdown-item" type="button">Action</button>
    <button class="dropdown-item" type="button">Another action</button>
    <button class="dropdown-item" type="button">Something else here</button>
  </div>
</div>

بشكل افتراضي ، يتم وضع القائمة المنسدلة تلقائيًا بنسبة 100٪ من الجزء العلوي وعلى طول الجانب الأيسر من العنصر الرئيسي. أضف. .dropdown-menu-right to a .dropdown-menu to right align the dropdown menu.

انتباه! يتم وضع القوائم المنسدلة بفضل Popper.js (باستثناء ما يتم تضمينه في شريط التنقل).

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Right-aligned menu
  </button>
  <div class="dropdown-menu dropdown-menu-right">
    <button class="dropdown-item" type="button">Action</button>
    <button class="dropdown-item" type="button">Another action</button>
    <button class="dropdown-item" type="button">Something else here</button>
  </div>
</div>

أضف رأسًا لتصنيف أقسام الإجراءات في أي قائمة منسدلة.

<div class="dropdown-menu">
  <h6 class="dropdown-header">Dropdown header</h6>
  <a class="dropdown-item" href="#">Action</a>
  <a class="dropdown-item" href="#">Another action</a>
</div>

مجموعات منفصلة من عناصر القائمة ذات الصلة مع الحاجز.

<div class="dropdown-menu">
  <a class="dropdown-item" href="#">Action</a>
  <a class="dropdown-item" href="#">Another action</a>
  <a class="dropdown-item" href="#">Something else here</a>
  <div class="dropdown-divider"></div>
  <a class="dropdown-item" href="#">Separated link</a>
</div>

ضع نموذجًا ضمن قائمة منسدلة ، أو اجعله في قائمة منسدلة ، واستخدم أدوات مساعدة للهامش أو الحشو لإعطائه المساحة السلبية التي تحتاجها.

<div class="dropdown-menu">
  <form class="px-4 py-3">
    <div class="form-group">
      <label for="exampleDropdownFormEmail1">Email address</label>
      <input type="email" class="form-control" id="exampleDropdownFormEmail1" placeholder="[email protected]">
    </div>
    <div class="form-group">
      <label for="exampleDropdownFormPassword1">Password</label>
      <input type="password" class="form-control" id="exampleDropdownFormPassword1" placeholder="Password">
    </div>
    <div class="form-check">
      <input type="checkbox" class="form-check-input" id="dropdownCheck">
      <label class="form-check-label" for="dropdownCheck">
        Remember me
      </label>
    </div>
    <button type="submit" class="btn btn-primary">Sign in</button>
  </form>
  <div class="dropdown-divider"></div>
  <a class="dropdown-item" href="#">New around here? Sign up</a>
  <a class="dropdown-item" href="#">Forgot password?</a>
</div>
<form class="dropdown-menu p-4">
  <div class="form-group">
    <label for="exampleDropdownFormEmail2">Email address</label>
    <input type="email" class="form-control" id="exampleDropdownFormEmail2" placeholder="[email protected]">
  </div>
  <div class="form-group">
    <label for="exampleDropdownFormPassword2">Password</label>
    <input type="password" class="form-control" id="exampleDropdownFormPassword2" placeholder="Password">
  </div>
  <div class="form-check">
    <input type="checkbox" class="form-check-input" id="dropdownCheck2">
    <label class="form-check-label" for="dropdownCheck2">
      Remember me
    </label>
  </div>
  <button type="submit" class="btn btn-primary">Sign in</button>
</form>

عناصر القائمة النشطة

أضف. .active إلى العناصر في القائمة المنسدلة .active على أنها نشطة .

<div class="dropdown-menu">
  <a class="dropdown-item" href="#">Regular link</a>
  <a class="dropdown-item active" href="#">Active link</a>
  <a class="dropdown-item" href="#">Another link</a>
</div>

عناصر قائمة معطل

أضف .disabled للعناصر في القائمة المنسدلة .disabled على هيئة معطلة .

<div class="dropdown-menu">
  <a class="dropdown-item" href="#">Regular link</a>
  <a class="dropdown-item disabled" href="#">Disabled link</a>
  <a class="dropdown-item" href="#">Another link</a>
</div>

استعمال

عبر سمات البيانات أو JavaScript ، يقوم المكون الإضافي المنسدل .show المحتوى المخفي (القوائم المنسدلة) عن طريق تبديل طبقة .show في عنصر القائمة الرئيسية. يتم الاعتماد على السمة data-toggle="dropdown" لإغلاق القوائم المنسدلة على مستوى التطبيق ، لذا من الأفضل دائمًا استخدامها.

على الأجهزة التي تعمل باللمس ، يؤدي فتح القائمة المنسدلة إلى إضافة معالجات mouseover الفارغة ( $.noop ) إلى الأطفال $.noop <body> . يعد هذا الاختراق القبيح أمرًا ضروريًا للتغلب على أحد التفضيلات في وفد الحدث في iOS ، والذي من شأنه أن يمنع في أي مكان خارج القائمة المنسدلة من تشغيل الرمز الذي يغلق القائمة المنسدلة. بمجرد إغلاق القائمة المنسدلة ، تتم إزالة معالجات mouseover الفارغة الإضافية هذه.

عبر سمات البيانات

أضف data-toggle="dropdown" إلى رابط أو زر للتبديل بين قائمة منسدلة.

<div class="dropdown">
  <button id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown trigger
  </button>
  <div class="dropdown-menu" aria-labelledby="dLabel">
    ...
  </div>
</div>

عبر JavaScript

اتصل بالقوائم المنسدلة عبر JavaScript:

$('.dropdown-toggle').dropdown()
data-toggle="dropdown" لا تزال مطلوبة

بغض النظر عما إذا كنت تتصل بقائمة منسدلة عبر جافا سكريبت أو تستخدم بيانات api ، فإن data-toggle="dropdown" مطلوبة دائمًا لتكون موجودة في عنصر مشغل القائمة المنسدلة.

خيارات

يمكن تمرير الخيارات عبر سمات البيانات أو JavaScript. بالنسبة لسمات البيانات ، قم بإلحاق اسم الخيار data- ، كما هو الحال في data-offset="" .

اسم اكتب افتراضي وصف
الأوفست رقم | سلسلة | وظيفة 0 إزاحة القائمة المنسدلة بالنسبة إلى هدفها. لمزيد من المعلومات ، راجع مستندات إزاحة Popper.js.
يواجه منطقية صحيح اسمح للناحية المنسدلة بالقفز في حالة وجود تداخل في عنصر المراجع. لمزيد من المعلومات ، راجع مستندات flip الخاصة بـ Popper.js.
حدود سلسلة | جزء "scrollParent" حدود تجاوز الحد الأقصى للقائمة القائمة المنسدلة. يقبل قيم 'viewport' أو 'window' أو 'scrollParent' أو مرجع HTMLElement (JavaScript فقط). للحصول على مزيد من المعلومات ، راجع مستندات منع Poperver.js .

ملاحظة عند تعيين boundary على أي قيمة أخرى بخلاف 'scrollParent' ، يتم تطبيق position: static النمط position: static على الحاوية .dropdown .

أساليب

طريقة وصف
$().dropdown('toggle') لتبديل القائمة المنسدلة في شريط التنقل المحدد أو التنقل المبوب.
$().dropdown('update') تحديث موضع القائمة المنسدلة لعنصر.
$().dropdown('dispose') يدمر القائمة المنسدلة لعنصر.

أحداث

يتم تشغيل جميع أحداث القائمة المنسدلة في العنصر الرئيسي ل. .dropdown-menu ولها خاصية ذات relatedTarget ، والتي تكون قيمة عنصر الربط.

هدف وصف
show.bs.dropdown ينطلق هذا الحدث فورًا عندما يتم استدعاء طريقة مثيل العرض.
shown.bs.dropdown يتم تشغيل هذا الحدث عندما يكون المنسدل مرئيًا للمستخدم (سينتظر انتقالات CSS ، لإكماله).
hide.bs.dropdown يتم تشغيل هذا الحدث على الفور عندما تم استدعاء أسلوب مثيل المخفية.
hidden.bs.dropdown يتم تشغيل هذا الحدث عند انتهاء القائمة المنسدلة من المستخدم (سينتظر إنتقالات CSS ، لإكمال).
$('#myDropdown').on('show.bs.dropdown', function () {
  // do something…
})