هبوط قطرة
قم بتبديل التراكبات السياقية لعرض قوائم الروابط والمزيد باستخدام البرنامج الإضافي المنسدل Bootstrap.
ملخص
القوائم المنسدلة هي تراكبات سياقية قابلة للتبديل لعرض قوائم الروابط والمزيد. لقد تم جعلها تفاعلية مع البرنامج المساعد JavaScript لقائمة Bootstrap المنسدلة. يتم تبديلهم عن طريق النقر وليس بالمرور ؛ هذا قرار تصميم مقصود .
القوائم المنسدلة مبنية على مكتبة طرف ثالث ، Popper ، والتي توفر تحديد المواقع الديناميكي واكتشاف منفذ العرض. تأكد من تضمين popper.min.js قبل JavaScript في Bootstrap أو استخدم bootstrap.bundle.min.js
/ bootstrap.bundle.js
الذي يحتوي على Popper. لا يتم استخدام Popper لوضع القوائم المنسدلة في أشرطة التنقل على الرغم من أن تحديد المواقع الديناميكي غير مطلوب.
إمكانية الوصول
يحدد معيار WAI ARIArole="menu"
عنصر واجهة مستخدم فعليًا ، ولكن هذا خاص بالقوائم الشبيهة بالتطبيقات التي تؤدي إلى تشغيل الإجراءات أو الوظائف. يمكن أن تحتوي قوائم ARIA فقط على عناصر القائمة وعناصر قائمة مربعات الاختيار وعناصر قائمة أزرار الاختيار ومجموعات أزرار الاختيار والقوائم الفرعية.
من ناحية أخرى ، تم تصميم القوائم المنسدلة لـ Bootstrap لتكون عامة وقابلة للتطبيق على مجموعة متنوعة من المواقف وهياكل العلامات. على سبيل المثال ، من الممكن إنشاء قوائم منسدلة تحتوي على مدخلات إضافية وعناصر تحكم في النموذج ، مثل حقول البحث أو نماذج تسجيل الدخول. لهذا السبب ، لا يتوقع Bootstrap (ولا يضيف تلقائيًا) أيًا من السمات والسمات role
المطلوبة لقوائم ARIAaria-
الحقيقية . سيتعين على المؤلفين تضمين هذه السمات الأكثر تحديدًا بأنفسهم.
ومع ذلك ، يضيف Bootstrap دعمًا مضمنًا لمعظم تفاعلات قائمة لوحة المفاتيح القياسية ، مثل القدرة على التنقل عبر .dropdown-item
العناصر الفردية باستخدام مفاتيح المؤشر وإغلاق القائمة باستخدام ESCالمفتاح.
أمثلة
قم بلف مفتاح تبديل القائمة المنسدلة (الزر أو الارتباط الخاص بك) والقائمة المنسدلة بداخله .dropdown
، أو بداخله أي عنصر آخر يتم الإعلان عنه position: relative;
. يمكن تشغيل القوائم المنسدلة <a>
أو <button>
العناصر لتناسب احتياجاتك المحتملة بشكل أفضل. تستخدم الأمثلة الموضحة هنا <ul>
العناصر الدلالية عند الاقتضاء ، لكن الترميز المخصص مدعوم.
زر واحد
.btn
يمكن تحويل أي منفردة إلى قائمة منسدلة للتبديل مع بعض التغييرات في الترميز. إليك كيف يمكنك وضعها للعمل مع أي من <button>
العناصر:
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown button
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</div>
ومع <a>
العناصر:
<div class="dropdown">
<a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown link
</a>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</div>
أفضل جزء هو أنه يمكنك القيام بذلك باستخدام أي متغير للأزرار أيضًا:
<!-- Example single danger button -->
<div class="btn-group">
<button type="button" class="btn btn-danger dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
Action
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</div>
زر الانقسام
وبالمثل ، قم بإنشاء قوائم منسدلة لأزرار الانقسام بنفس الترميز تقريبًا مثل القوائم المنسدلة ذات الزر الفردي ، ولكن مع إضافة .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-bs-toggle="dropdown" aria-expanded="false">
<span class="visually-hidden">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</div>
تحجيم
تعمل القوائم المنسدلة للأزرار مع الأزرار من جميع الأحجام ، بما في ذلك الأزرار المنسدلة الافتراضية والمقسمة.
<!-- Large button groups (default and split) -->
<div class="btn-group">
<button class="btn btn-secondary btn-lg dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
Large button
</button>
<ul class="dropdown-menu">
...
</ul>
</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-bs-toggle="dropdown" aria-expanded="false">
<span class="visually-hidden">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
...
</ul>
</div>
<div class="btn-group">
<button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
Small button
</button>
<ul class="dropdown-menu">
...
</ul>
</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-bs-toggle="dropdown" aria-expanded="false">
<span class="visually-hidden">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
...
</ul>
</div>
القوائم المنسدلة المظلمة
يمكنك الاشتراك في القوائم المنسدلة الأكثر قتامة لمطابقة شريط التنقل المظلم أو النمط المخصص عن طريق الإضافة .dropdown-menu-dark
إلى القائمة الموجودة .dropdown-menu
. لا توجد تغييرات مطلوبة على عناصر القائمة المنسدلة.
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton2" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown button
</button>
<ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="dropdownMenuButton2">
<li><a class="dropdown-item active" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</div>
واستخدامه في navbar:
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDarkDropdown" aria-controls="navbarNavDarkDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDarkDropdown">
<ul class="navbar-nav">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDarkDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</a>
<ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="navbarDarkDropdownMenuLink">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
الاتجاهات
RTL
يتم عكس الاتجاهات عند استخدام Bootstrap في RTL ، مما يعني .dropstart
ظهور المعنى على الجانب الأيمن.
إسقاط ما يصل
تشغيل القوائم المنسدلة فوق العناصر عن طريق الإضافة .dropup
إلى العنصر الأصلي.
<!-- Default dropup button -->
<div class="btn-group dropup">
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
Dropup
</button>
<ul class="dropdown-menu">
<!-- Dropdown menu links -->
</ul>
</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-bs-toggle="dropdown" aria-expanded="false">
<span class="visually-hidden">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<!-- Dropdown menu links -->
</ul>
</div>
إسقاط
تشغيل القوائم المنسدلة على يمين العناصر من خلال إضافتها .dropend
إلى العنصر الرئيسي.
<!-- Default dropend button -->
<div class="btn-group dropend">
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
Dropright
</button>
<ul class="dropdown-menu">
<!-- Dropdown menu links -->
</ul>
</div>
<!-- Split dropend button -->
<div class="btn-group dropend">
<button type="button" class="btn btn-secondary">
Split dropend
</button>
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
<span class="visually-hidden">Toggle Dropright</span>
</button>
<ul class="dropdown-menu">
<!-- Dropdown menu links -->
</ul>
</div>
Dropleft
تشغيل القوائم المنسدلة على يسار العناصر من خلال إضافتها .dropstart
إلى العنصر الرئيسي.
<!-- Default dropstart button -->
<div class="btn-group dropstart">
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
Dropstart
</button>
<ul class="dropdown-menu">
<!-- Dropdown menu links -->
</ul>
</div>
<!-- Split dropstart button -->
<div class="btn-group">
<div class="btn-group dropstart" role="group">
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
<span class="visually-hidden">Toggle Dropstart</span>
</button>
<ul class="dropdown-menu">
<!-- Dropdown menu links -->
</ul>
</div>
<button type="button" class="btn btn-secondary">
Split dropstart
</button>
</div>
عناصر القائمة
يمكنك استخدام <a>
أو <button>
العناصر كعناصر قائمة منسدلة.
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
<li><button class="dropdown-item" type="button">Action</button></li>
<li><button class="dropdown-item" type="button">Another action</button></li>
<li><button class="dropdown-item" type="button">Something else here</button></li>
</ul>
</div>
يمكنك أيضًا إنشاء عناصر قائمة منسدلة غير تفاعلية باستخدام .dropdown-item-text
. لا تتردد في التصميم بشكل أكبر باستخدام CSS المخصص أو الأدوات المساعدة النصية.
<ul class="dropdown-menu">
<li><span class="dropdown-item-text">Dropdown item text</span></li>
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
نشيط
أضف .active
إلى العناصر في القائمة المنسدلة لجعلها نمطًا نشطًا . لنقل الحالة النشطة إلى التقنيات المساعدة ، استخدم aria-current
السمة - باستخدام page
القيمة للصفحة الحالية ، أو true
للعنصر الحالي في مجموعة.
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Regular link</a></li>
<li><a class="dropdown-item active" href="#" aria-current="true">Active link</a></li>
<li><a class="dropdown-item" href="#">Another link</a></li>
</ul>
عاجز
أضف .disabled
إلى العناصر في القائمة المنسدلة لتصميمها على أنها معطلة .
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Regular link</a></li>
<li><a class="dropdown-item disabled" href="#" tabindex="-1" aria-disabled="true">Disabled link</a></li>
<li><a class="dropdown-item" href="#">Another link</a></li>
</ul>
محاذاة القائمة
بشكل افتراضي ، يتم وضع القائمة المنسدلة تلقائيًا بنسبة 100٪ من أعلى وعلى طول الجانب الأيسر من القائمة الرئيسية. يمكنك تغيير ذلك باستخدام .drop*
فئات الاتجاه ، ولكن يمكنك أيضًا التحكم فيها بفئات معدِلات إضافية.
أضف .dropdown-menu-end
إلى .dropdown-menu
اليمين محاذاة القائمة المنسدلة. يتم عكس الاتجاهات عند استخدام Bootstrap في RTL ، مما يعني .dropdown-menu-end
ظهور المعنى على الجانب الأيسر.
<div class="btn-group">
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
Right-aligned menu example
</button>
<ul class="dropdown-menu dropdown-menu-end">
<li><button class="dropdown-item" type="button">Action</button></li>
<li><button class="dropdown-item" type="button">Another action</button></li>
<li><button class="dropdown-item" type="button">Something else here</button></li>
</ul>
</div>
محاذاة مستجيبة
إذا كنت تريد استخدام محاذاة سريعة الاستجابة ، فقم بتعطيل تحديد المواقع الديناميكي عن طريق إضافة data-bs-display="static"
السمة واستخدام فئات التباينات سريعة الاستجابة.
لمحاذاة القائمة المنسدلة بشكل صحيح.dropdown-menu{-sm|-md|-lg|-xl|-xxl}-end
مع نقطة التوقف المحددة أو الأكبر ، أضف .
<div class="btn-group">
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
Left-aligned but right aligned when large screen
</button>
<ul class="dropdown-menu dropdown-menu-lg-end">
<li><button class="dropdown-item" type="button">Action</button></li>
<li><button class="dropdown-item" type="button">Another action</button></li>
<li><button class="dropdown-item" type="button">Something else here</button></li>
</ul>
</div>
لمحاذاة القائمة المنسدلة اليسرى.dropdown-menu-end
مع نقطة التوقف المحددة أو أكبر ، قم بإضافة و .dropdown-menu{-sm|-md|-lg|-xl|-xxl}-start
.
<div class="btn-group">
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
Right-aligned but left aligned when large screen
</button>
<ul class="dropdown-menu dropdown-menu-end dropdown-menu-lg-start">
<li><button class="dropdown-item" type="button">Action</button></li>
<li><button class="dropdown-item" type="button">Another action</button></li>
<li><button class="dropdown-item" type="button">Something else here</button></li>
</ul>
</div>
لاحظ أنك لست بحاجة إلى إضافة data-bs-display="static"
سمة إلى أزرار القائمة المنسدلة في أشرطة التنقل ، حيث لا يتم استخدام Popper في أشرطة التنقل.
خيارات المحاذاة
مع أخذ معظم الخيارات الموضحة أعلاه ، إليك عرضًا توضيحيًا صغيرًا لمغسلة المطبخ لخيارات محاذاة قائمة منسدلة مختلفة في مكان واحد.
<div class="btn-group">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
</ul>
</div>
<div class="btn-group">
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
Right-aligned menu
</button>
<ul class="dropdown-menu dropdown-menu-end">
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
</ul>
</div>
<div class="btn-group">
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
Left-aligned, right-aligned lg
</button>
<ul class="dropdown-menu dropdown-menu-lg-end">
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
</ul>
</div>
<div class="btn-group">
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
Right-aligned, left-aligned lg
</button>
<ul class="dropdown-menu dropdown-menu-end dropdown-menu-lg-start">
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
</ul>
</div>
<div class="btn-group dropstart">
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
Dropstart
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
</ul>
</div>
<div class="btn-group dropend">
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
Dropend
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
</ul>
</div>
<div class="btn-group dropup">
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
Dropup
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
</ul>
</div>
محتوى القائمة
الرؤوس
أضف رأسًا لتسمية أقسام الإجراءات في أي قائمة منسدلة.
<ul class="dropdown-menu">
<li><h6 class="dropdown-header">Dropdown header</h6></li>
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
</ul>
المقسمات
مجموعات منفصلة من عناصر القائمة ذات الصلة بفاصل.
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
نص
ضع أي نص حر في القائمة المنسدلة مع النص واستخدم أدوات التباعد . لاحظ أنك ستحتاج على الأرجح إلى أنماط تغيير حجم إضافية لتقييد عرض القائمة.
<div class="dropdown-menu p-4 text-muted" style="max-width: 200px;">
<p>
Some example text that's free-flowing within the dropdown menu.
</p>
<p class="mb-0">
And this is more example text.
</p>
</div>
نماذج
ضع نموذجًا في قائمة منسدلة ، أو اجعله في قائمة منسدلة ، واستخدم أدوات الهامش أو الحشو لمنحه المساحة السلبية التي تحتاجها.
<div class="dropdown-menu">
<form class="px-4 py-3">
<div class="mb-3">
<label for="exampleDropdownFormEmail1" class="form-label">Email address</label>
<input type="email" class="form-control" id="exampleDropdownFormEmail1" placeholder="[email protected]">
</div>
<div class="mb-3">
<label for="exampleDropdownFormPassword1" class="form-label">Password</label>
<input type="password" class="form-control" id="exampleDropdownFormPassword1" placeholder="Password">
</div>
<div class="mb-3">
<div class="form-check">
<input type="checkbox" class="form-check-input" id="dropdownCheck">
<label class="form-check-label" for="dropdownCheck">
Remember me
</label>
</div>
</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="mb-3">
<label for="exampleDropdownFormEmail2" class="form-label">Email address</label>
<input type="email" class="form-control" id="exampleDropdownFormEmail2" placeholder="[email protected]">
</div>
<div class="mb-3">
<label for="exampleDropdownFormPassword2" class="form-label">Password</label>
<input type="password" class="form-control" id="exampleDropdownFormPassword2" placeholder="Password">
</div>
<div class="mb-3">
<div class="form-check">
<input type="checkbox" class="form-check-input" id="dropdownCheck2">
<label class="form-check-label" for="dropdownCheck2">
Remember me
</label>
</div>
</div>
<button type="submit" class="btn btn-primary">Sign in</button>
</form>
خيارات القائمة المنسدلة
استخدم data-bs-offset
أو data-bs-reference
لتغيير موقع القائمة المنسدلة.
<div class="d-flex">
<div class="dropdown me-1">
<button type="button" class="btn btn-secondary dropdown-toggle" id="dropdownMenuOffset" data-bs-toggle="dropdown" aria-expanded="false" data-bs-offset="10,20">
Offset
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuOffset">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</div>
<div class="btn-group">
<button type="button" class="btn btn-secondary">Reference</button>
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" id="dropdownMenuReference" data-bs-toggle="dropdown" aria-expanded="false" data-bs-reference="parent">
<span class="visually-hidden">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuReference">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</div>
</div>
سلوك الإغلاق التلقائي
بشكل افتراضي ، يتم إغلاق القائمة المنسدلة عند النقر داخل أو خارج القائمة المنسدلة. يمكنك استخدام autoClose
الخيار لتغيير سلوك القائمة المنسدلة.
<div class="btn-group">
<button class="btn btn-secondary dropdown-toggle" type="button" id="defaultDropdown" data-bs-toggle="dropdown" data-bs-auto-close="true" aria-expanded="false">
Default dropdown
</button>
<ul class="dropdown-menu" aria-labelledby="defaultDropdown">
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
</ul>
</div>
<div class="btn-group">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuClickableOutside" data-bs-toggle="dropdown" data-bs-auto-close="inside" aria-expanded="false">
Clickable outside
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuClickableOutside">
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
</ul>
</div>
<div class="btn-group">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuClickableInside" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
Clickable inside
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuClickableInside">
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
</ul>
</div>
<div class="btn-group">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuClickable" data-bs-toggle="dropdown" data-bs-auto-close="false" aria-expanded="false">
Manual close
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuClickable">
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
</ul>
</div>
ساس
المتغيرات
المتغيرات لجميع القوائم المنسدلة:
$dropdown-min-width: 10rem;
$dropdown-padding-x: 0;
$dropdown-padding-y: .5rem;
$dropdown-spacer: .125rem;
$dropdown-font-size: $font-size-base;
$dropdown-color: $body-color;
$dropdown-bg: $white;
$dropdown-border-color: rgba($black, .15);
$dropdown-border-radius: $border-radius;
$dropdown-border-width: $border-width;
$dropdown-inner-border-radius: subtract($dropdown-border-radius, $dropdown-border-width);
$dropdown-divider-bg: $dropdown-border-color;
$dropdown-divider-margin-y: $spacer * .5;
$dropdown-box-shadow: $box-shadow;
$dropdown-link-color: $gray-900;
$dropdown-link-hover-color: shade-color($gray-900, 10%);
$dropdown-link-hover-bg: $gray-200;
$dropdown-link-active-color: $component-active-color;
$dropdown-link-active-bg: $component-active-bg;
$dropdown-link-disabled-color: $gray-500;
$dropdown-item-padding-y: $spacer * .25;
$dropdown-item-padding-x: $spacer;
$dropdown-header-color: $gray-600;
$dropdown-header-padding: $dropdown-padding-y $dropdown-item-padding-x;
متغيرات القائمة المنسدلة الداكنة :
$dropdown-dark-color: $gray-300;
$dropdown-dark-bg: $gray-800;
$dropdown-dark-border-color: $dropdown-border-color;
$dropdown-dark-divider-bg: $dropdown-divider-bg;
$dropdown-dark-box-shadow: null;
$dropdown-dark-link-color: $dropdown-dark-color;
$dropdown-dark-link-hover-color: $white;
$dropdown-dark-link-hover-bg: rgba($white, .15);
$dropdown-dark-link-active-color: $dropdown-link-active-color;
$dropdown-dark-link-active-bg: $dropdown-link-active-bg;
$dropdown-dark-link-disabled-color: $gray-500;
$dropdown-dark-header-color: $gray-500;
متغيرات علامات الإقحام المستندة إلى CSS والتي تشير إلى تفاعل القائمة المنسدلة:
$caret-width: .3em;
$caret-vertical-align: $caret-width * .85;
$caret-spacing: $caret-width * .85;
الخلطات
تُستخدم Mixins لإنشاء علامات الإقحام المستندة إلى CSS ويمكن العثور عليها في ملفات scss/mixins/_caret.scss
.
@mixin caret-down {
border-top: $caret-width solid;
border-right: $caret-width solid transparent;
border-bottom: 0;
border-left: $caret-width solid transparent;
}
@mixin caret-up {
border-top: 0;
border-right: $caret-width solid transparent;
border-bottom: $caret-width solid;
border-left: $caret-width solid transparent;
}
@mixin caret-end {
border-top: $caret-width solid transparent;
border-right: 0;
border-bottom: $caret-width solid transparent;
border-left: $caret-width solid;
}
@mixin caret-start {
border-top: $caret-width solid transparent;
border-right: $caret-width solid;
border-bottom: $caret-width solid transparent;
}
@mixin caret($direction: down) {
@if $enable-caret {
&::after {
display: inline-block;
margin-left: $caret-spacing;
vertical-align: $caret-vertical-align;
content: "";
@if $direction == down {
@include caret-down();
} @else if $direction == up {
@include caret-up();
} @else if $direction == end {
@include caret-end();
}
}
@if $direction == start {
&::after {
display: none;
}
&::before {
display: inline-block;
margin-right: $caret-spacing;
vertical-align: $caret-vertical-align;
content: "";
@include caret-start();
}
}
&:empty::after {
margin-left: 0;
}
}
}
إستعمال
عبر سمات البيانات أو JavaScript ، يقوم المكون الإضافي المنسدل بتبديل المحتوى المخفي (القوائم المنسدلة) عن طريق تبديل .show
الفصل في الأصل .dropdown-menu
. يتم data-bs-toggle="dropdown"
الاعتماد على السمة لإغلاق القوائم المنسدلة على مستوى التطبيق ، لذلك من الجيد استخدامها دائمًا.
mouseover
معالجات فارغة إلى العناصر الفرعية المباشرة
<body>
للعنصر. يعد هذا الاختراق القبيح ضروريًا للتغلب على مشكلة
في تفويض حدث iOS ، والتي من شأنها أن تمنع النقر في أي مكان خارج القائمة المنسدلة من تشغيل الكود الذي يغلق القائمة المنسدلة. بمجرد إغلاق القائمة المنسدلة ،
mouseover
تتم إزالة هذه المعالجات الفارغة الإضافية.
عبر سمات البيانات
أضف data-bs-toggle="dropdown"
إلى ارتباط أو زر لتبديل القائمة المنسدلة.
<div class="dropdown">
<button id="dLabel" type="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown trigger
</button>
<ul class="dropdown-menu" aria-labelledby="dLabel">
...
</ul>
</div>
عبر JavaScript
استدعاء القوائم المنسدلة عبر JavaScript:
var dropdownElementList = [].slice.call(document.querySelectorAll('.dropdown-toggle'))
var dropdownList = dropdownElementList.map(function (dropdownToggleEl) {
return new bootstrap.Dropdown(dropdownToggleEl)
})
data-bs-toggle="dropdown"
لا يزال مطلوبًا
بغض النظر عما إذا كنت تتصل بالقائمة المنسدلة عبر JavaScript أو تستخدم واجهة برمجة تطبيقات البيانات بدلاً من ذلك ، data-bs-toggle="dropdown"
يلزم دائمًا أن تكون موجودًا في عنصر تشغيل القائمة المنسدلة.
خيارات
يمكن تمرير الخيارات عبر سمات البيانات أو JavaScript. لسمات البيانات ، قم بإلحاق اسم الخيار بـ data-bs-
، كما في data-bs-offset=""
. تأكد من تغيير نوع حالة اسم الخيار من camelCase إلى kebab-case عند تمرير الخيارات عبر سمات البيانات. على سبيل المثال ، بدلاً من استخدام data-bs-autoClose="false"
، استخدم data-bs-auto-close="false"
.
اسم | يكتب | تقصير | وصف |
---|---|---|---|
boundary |
سلسلة | عنصر | 'clippingParents' |
حدود قيد تجاوز السعة بالقائمة المنسدلة (تنطبق فقط على معدل منع تجاوز تدفق Popper). بشكل افتراضي 'clippingParents' ، يمكن قبول مرجع HTMLElement (عبر JavaScript فقط). لمزيد من المعلومات ، راجع مستندات DiscoverOverflow الخاصة بـ Popper . |
reference |
سلسلة | عنصر | هدف | 'toggle' |
عنصر مرجعي من القائمة المنسدلة. يقبل قيم 'toggle' ، 'parent' مرجع HTMLElement أو تقديم كائن getBoundingClientRect . لمزيد من المعلومات ، راجع مستندات مُنشئ Popper ومستندات العناصر الافتراضية . |
display |
سلسلة | 'dynamic' |
بشكل افتراضي ، نستخدم Popper لتحديد المواقع الديناميكي. تعطيل هذا باستخدام static . |
offset |
مجموعة | سلسلة | وظيفة | [0, 2] |
إزاحة القائمة المنسدلة بالنسبة إلى هدفها. يمكنك تمرير سلسلة في سمات البيانات بقيم مفصولة بفواصل مثل: عندما يتم استخدام دالة لتحديد الإزاحة ، يتم استدعاؤها بكائن يحتوي على موضع بوبر ، والمرجع ، ومستقيم بوبر كوسيطة أولى لها. يتم تمرير عقدة DOM المشغلة كوسيطة ثانية. يجب أن تُرجع الدالة مصفوفة تحتوي على رقمين :. لمزيد من المعلومات راجع مستندات تعويض Popper . |
autoClose |
منطقي | سلسلة | true |
قم بتكوين سلوك الإغلاق التلقائي للقائمة المنسدلة:
|
popperConfig |
فارغ | كائن | وظيفة | null |
لتغيير تكوين Popper الافتراضي الخاص بـ Bootstrap ، راجع تكوين Popper . عند استخدام وظيفة لإنشاء تكوين Popper ، يتم استدعاؤها بكائن يحتوي على تكوين Popper الافتراضي الخاص بـ Bootstrap. يساعدك على استخدام ودمج الافتراضي مع التكوين الخاص بك. يجب أن تقوم الوظيفة بإرجاع كائن تكوين لـ Popper. |
استخدام وظيفة معpopperConfig
var dropdown = new bootstrap.Dropdown(element, {
popperConfig: function (defaultBsPopperConfig) {
// var newPopperConfig = {...}
// use defaultBsPopperConfig if needed...
// return newPopperConfig
}
})
طُرق
طريقة | وصف |
---|---|
toggle |
لتبديل القائمة المنسدلة لشريط تنقل محدد أو التنقل المبوب. |
show |
يعرض القائمة المنسدلة لشريط التنقل المحدد أو التنقل المبوب. |
hide |
يخفي القائمة المنسدلة لشريط تنقل معين أو تنقل مبوب. |
update |
يحدّث موضع القائمة المنسدلة للعنصر. |
dispose |
يدمر القائمة المنسدلة لعنصر. (يزيل البيانات المخزنة على عنصر DOM) |
getInstance |
الطريقة الثابتة التي تسمح لك بالحصول على مثيل القائمة المنسدلة المرتبط بعنصر DOM ، يمكنك استخدامه على النحو التالي:bootstrap.Dropdown.getInstance(element) |
getOrCreateInstance |
الطريقة الثابتة التي تعرض مثيل القائمة المنسدلة المرتبط بعنصر DOM أو إنشاء مثيل جديد في حالة عدم تهيئته. يمكنك استخدامه على النحو التالي:bootstrap.Dropdown.getOrCreateInstance(element) |
الأحداث
يتم إطلاق جميع أحداث القائمة المنسدلة على عنصر التبديل ثم يتم تكوين فقاعات. لذلك يمكنك أيضًا إضافة مستمعين للأحداث على .dropdown-menu
العنصر الأصل. hide.bs.dropdown
والأحداث hidden.bs.dropdown
لها clickEvent
خاصية (فقط عندما يكون نوع الحدث الأصلي click
) تحتوي على كائن حدث لحدث النقر.
طريقة | وصف |
---|---|
show.bs.dropdown |
يتم إطلاقه فورًا عند استدعاء طريقة عرض المثيل. |
shown.bs.dropdown |
نشط عندما أصبحت القائمة المنسدلة مرئية للمستخدم واكتملت انتقالات CSS. |
hide.bs.dropdown |
ينطلق فورًا عند استدعاء أسلوب إخفاء المثيل. |
hidden.bs.dropdown |
يتم تنشيطه عند انتهاء إخفاء القائمة المنسدلة عن المستخدم واكتمال انتقالات CSS. |
var myDropdown = document.getElementById('myDropdown')
myDropdown.addEventListener('show.bs.dropdown', function () {
// do something...
})