ڊراپ ڊائونز
بوٽ اسٽريپ ڊراپ ڊائون پلگ ان سان لنڪن جي لسٽن ۽ وڌيڪ ڏيکارڻ لاءِ لاڳاپيل اوورليز کي ٽوگل ڪريو.
اوسر
ڊراپ ڊائونز ٽوگليبل، ڳنڍين جي فهرستن ۽ وڌيڪ ڏيکارڻ لاءِ لاڳاپيل اوورليز آهن. اهي شامل ڪيل بوٽ اسٽريپ ڊراپ ڊائون جاوا اسڪرپٽ پلگ ان سان متعامل ڪيا ويا آهن. اهي ڪلڪ ڪرڻ سان ٽوگل ڪيا ويا آهن، نه هوور ڪرڻ سان؛ هي هڪ ارادي ڊيزائن جو فيصلو آهي.
ڊراپ ڊائونز هڪ ٽئين پارٽي لائبريري تي ٺهيل آهن، پوپر ، جيڪا متحرڪ پوزيشن ۽ ڏيک پورٽ جي سڃاڻپ مهيا ڪري ٿي. Bootstrap جي JavaScript کان اڳ popper.min.js شامل ڪرڻ جي پڪ ڪريو يا استعمال ڪريو bootstrap.bundle.min.js
/ bootstrap.bundle.js
جنهن ۾ Popper شامل آهي. پوپر نيوبارز ۾ ڊراپ ڊائونز کي پوزيشن ڪرڻ لاءِ استعمال نه ڪيو ويو آهي جيتوڻيڪ متحرڪ پوزيشن جي ضرورت ناهي.
پهچ
WAI ARIA معيار هڪ حقيقي role="menu"
ويجيٽ جي وضاحت ڪري ٿو ، پر اهو مخصوص آهي ايپليڪيشن-جهڙي مينيو لاءِ جيڪو عملن يا ڪمن کي متحرڪ ڪري ٿو. ARIA مينيو صرف مينيو شيون، چيڪ باڪس مينيو شيون، ريڊيو بٽڻ مينيو شيون، ريڊيو بٽڻ گروپ، ۽ ذيلي مينيو شامل ڪري سگھن ٿا.
ٻئي طرف بوٽ اسٽريپ جا ڊراپ ڊائونز، عام ۽ مختلف حالتن ۽ مارڪ اپ ڍانچي تي لاڳو ٿيڻ لاءِ ٺهيل آهن. مثال طور، اهو ممڪن آهي ڊراپ ڊائونز ٺاهڻ جنهن ۾ اضافي ان پٽ ۽ فارم ڪنٽرول شامل هجن، جهڙوڪ سرچ فيلڊز يا لاگ ان فارم. انهي سبب لاء، بوٽ اسٽريپ جي توقع نه آهي (نه ئي خودڪار طور تي شامل ڪيو) ڪنهن به role
۽ خاصيتون حقيقي ARIA مينيو aria-
لاء گهربل . ليکڪن کي پاڻ ۾ اهي وڌيڪ مخصوص خاصيتون شامل ڪرڻ گهرجن.
بهرحال، بوٽ اسٽريپ اڪثر معياري ڪيبورڊ مينيو رابطي لاءِ بلٽ ان سپورٽ شامل ڪندو آهي، جيئن ته ڪيبورڊ ڪيبورڊ .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>
۽ ان کي نيوبار ۾ استعمال ڪرڻ لاءِ:
<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
RTL ۾ Bootstrap استعمال ڪرڻ وقت هدايتون نظر اينديون، مطلب .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>
ڦاٽل
ٽريگر ڊراپ ڊائون مينيو عنصرن جي کاٻي پاسي کي شامل ڪندي .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
a .dropdown-menu
۾ ساڄي طرف ڊروپ ڊائون مينيو کي ترتيب ڏيو. RTL ۾ Bootstrap استعمال ڪرڻ وقت هدايتون نظر اينديون، مطلب .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"
نوٽ ڪريو ته توھان کي نيوبارز ۾ ڊراپ ڊائون بٽڻن لاءِ خصوصيت شامل ڪرڻ جي ضرورت ناھي، ڇو ته پوپر نيوبارز ۾ استعمال نه ڪيو ويو آھي.
ترتيب ڏيڻ جا اختيار
مٿي ڏيکاريل اختيارن مان گھڻا کڻڻ، ھتي ھڪڙو ننڍڙو باورچی خانه سنڪ ڊيمو آھي مختلف ڊراپ ڊائون الائنمينٽ اختيارن جو ھڪڙو جڳھ ۾.
<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-based carets لاءِ متغيرات جيڪي ظاهر ڪن ٿا ڊراپ ڊائون جي انٽرايڪٽيٽي:
$caret-width: .3em;
$caret-vertical-align: $caret-width * .85;
$caret-spacing: $caret-width * .85;
ملائيندڙ
Mixins CSS-based carets پيدا ڪرڻ لاءِ استعمال ڪيا ويندا آهن ۽ ڳولهي سگهجن ٿا 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;
}
}
}
استعمال
ڊيٽا جي خاصيتن يا جاوا اسڪرپٽ جي ذريعي، ڊراپ ڊائون پلگ ان پوشيده مواد (ڊراپ ڊائون مينيو) کي ٽوگل ڪندي .show
ڪلاس کي والدين تي ٽوگل ڪري ٿو .dropdown-menu
. وصف هڪ ايپليڪيشن سطح تي ڊراپ ڊائون مينيو کي بند ڪرڻ لاءِ انحصار ڪيو data-bs-toggle="dropdown"
ويو آهي، تنهنڪري اهو هميشه استعمال ڪرڻ سٺو خيال آهي.
mouseover
جي فوري ٻارن لاءِ
. هي تسليم ٿيل بدصورت هيڪ iOS جي ايونٽ جي وفد ۾<body>
هڪ نراس جي چوڌاري ڪم ڪرڻ لاءِ ضروري آهي
، جيڪو ٻي صورت ۾ ڊراپ ڊائون کان ٻاهر ڪٿي به ٽيپ کي روڪيندو ڪوڊ کي ٽرگر ڪرڻ کان جيڪو ڊراپ ڊائون کي بند ڪري ٿو. هڪ دفعو ڊراپ ڊائون بند ڪيو ويو آهي، اهي اضافي خالي
هينڊلر ختم ڪيا ويا آهن.
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>
جاوا اسڪرپٽ ذريعي
جاوا اسڪرپٽ ذريعي ڊراپ ڊائونز کي ڪال ڪريو:
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-api استعمال ڪريو، data-bs-toggle="dropdown"
هميشه لاءِ ضروري آهي ته ڊراپ ڊائون جي ٽرگر عنصر تي موجود هجي.
اختيارن
اختيارن کي ڊيٽا جي خاصيتن يا جاوا اسڪرپٽ ذريعي منظور ڪري سگھجي ٿو. ڊيٽا جي خاصيتن لاء، اختيار جو نالو شامل ڪريو data-bs-
، جيئن data-bs-offset=""
. ڊيٽا جي خاصيتن ذريعي اختيارن کي پاس ڪرڻ وقت ڪيبل ڪيس کان ڪيبل ڪيس ۾ اختيار جي نالي جي ڪيس جي قسم کي تبديل ڪرڻ جي پڪ ڪريو. مثال طور، استعمال ڪرڻ بدران data-bs-autoClose="false"
، استعمال ڪريو data-bs-auto-close="false"
.
نالو | قسم | ڊفالٽ | وصف |
---|---|---|---|
boundary |
تار | عنصر | 'clippingParents' |
ڊراپ ڊائون مينيو جي اوور فلو رڪاوٽ جي حد (صرف پوپر جي روڪ اوور فلو موڊيفائر تي لاڳو ٿئي ٿو). ڊفالٽ طور اهو آهي 'clippingParents' ۽ هڪ HTMLElement ريفرنس قبول ڪري سگهي ٿو (صرف JavaScript ذريعي). وڌيڪ معلومات لاءِ ڏسو Popper's detectOverflow docs . |
reference |
تار | عنصر | اعتراض | 'toggle' |
ڊراپ ڊائون مينيو جو حوالو عنصر. 'toggle' , 'parent' , HTMLElement ريفرنس يا هڪ شئي مهيا ڪرڻ جا قدر قبول ڪري ٿو getBoundingClientRect . وڌيڪ معلومات لاءِ ڏسو Popper's Constructor Docs ۽ ورچوئل ايليمينٽ ڊيڪس . |
display |
تار | 'dynamic' |
ڊفالٽ طور، اسان پوپر کي متحرڪ پوزيشن لاء استعمال ڪندا آهيون. هن سان غير فعال ڪريو static . |
offset |
صف | تار | فنڪشن | [0, 2] |
ان جي ھدف جي نسبت سان ڊراپ ڊائون جو آفسيٽ. توهان ڪاما جدا ڪيل قدرن سان ڊيٽا جي خاصيتن ۾ هڪ اسٽرنگ پاس ڪري سگهو ٿا جهڙوڪ: جڏهن هڪ فنڪشن استعمال ڪيو ويندو آهي آفسيٽ کي طئي ڪرڻ لاء، ان کي سڏيو ويندو آهي هڪ اعتراض سان جنهن ۾ پاپپر جي جڳهه، حوالو، ۽ پاپپر ان جي پهرين دليل جي طور تي رد ڪري ٿو. ٽاريندڙ عنصر DOM نوڊ ٻئي دليل طور منظور ڪيو ويو آهي. فنڪشن کي ٻن نمبرن سان هڪ صف واپس ڪرڻ گهرجي: . وڌيڪ معلومات لاءِ ڏسو Popper's offset docs . |
autoClose |
بوليان | تار | true |
ڊراپ ڊائون جي خودڪار بند رويي کي ترتيب ڏيو:
|
popperConfig |
null | اعتراض | فنڪشن | null |
Bootstrap جي ڊفالٽ Popper config کي تبديل ڪرڻ لاء، 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 |
هڪ عنصر جي ڊراپ ڊائون کي تباهه ڪري ٿو. (ڊوم عنصر تي ذخيرو ٿيل ڊيٽا کي هٽائي ٿو) |
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 |
فائر ڪيو ويو جڏهن ڊراپ ڊائون ختم ٿي چڪو آهي صارف کان لڪائي رهيو آهي ۽ سي ايس ايس ٽرانسشن مڪمل ٿي چڪو آهي. |
var myDropdown = document.getElementById('myDropdown')
myDropdown.addEventListener('show.bs.dropdown', function () {
// do something...
})