دابەزینەکان
گۆڕینی سەرپۆشی ناوەڕۆک بۆ پیشاندانی لیستەکانی بەستەرەکان و زۆر شتی تر بە پێوەکراوەکەی Bootstrap.
تێڕوانینێکی گشتی
دابەزینەکان دەتوانرێت بگۆڕدرێن، سەرپۆشی ناوەڕۆکن بۆ پیشاندانی لیستەکانی بەستەرەکان و زۆر شتی تر. ئەوان بە پێوەکراوەکەی جاڤاسکڕێپتی Bootstrap کە لەگەڵیدا هاتووە کارلێککارانە دەکرێن. ئەوان بە کلیککردن دەگۆڕدرێن نەک بە هۆڤەرکردن؛ ئەمە بڕیارێکی دیزاینی بە مەبەستە .
درۆپداونەکان لەسەر کتێبخانەی لایەنی سێیەم دروستکراون، Popper , کە شوێنی داینامیکی و دیاریکردنی دەرچەی بینین دابین دەکات. دڵنیابە پێش جاڤاسکڕێپتی Bootstrap popper.min.js دابنێ یان bootstrap.bundle.min.js
/ بەکاربهێنە bootstrap.bundle.js
کە Popper لەخۆدەگرێت. Popper بەکارناهێنرێت بۆ جێگیرکردنی دابەزینەکان لە navbars هەرچەندە وەک جێگیرکردنی داینامیکی پێویست نییە.
دەستڕاگەیشتن
ستانداردی WAI ARIArole="menu"
ویجتێکی ڕاستەقینە پێناسە دەکات ، بەڵام ئەمە تایبەتە بە مینیوەکانی هاوشێوەی بەرنامە کە کردارەکان یان ئەرکەکان دەستپێدەکات. مینیوەکانی ARIA تەنها دەتوانن بابەتی مینیو، بابەتی مینیوی سندوقی هەڵبژاردن، بابەتی مینیوی دوگمەی ڕادیۆیی، گروپەکانی دوگمەی ڕادیۆیی و مینیوی لاوەکی لەخۆ بگرن.
لە بەرامبەردا، درۆپداونەکانی بووتستراپ بە شێوەیەک داڕێژراون کە گشتی بن و بۆ چەندین بارودۆخ و پێکهاتەی مارکاپ بەکاربهێنرێن. بۆ نموونە دەتوانرێت درۆپداونەکان دروست بکرێت کە زانیارییەکانی ناوەوە و کۆنترۆڵی فۆڕمی زیادە لەخۆ بگرن، وەک بواری گەڕان یان فۆڕمی چوونەژوورەوە. هەر لەبەر ئەم هۆکارە، Bootstrap چاوەڕوانی هیچ کام لە تایبەتمەندییە role
و aria-
پێویستەکان بۆ مینیوەکانی ARIA ڕاستەقینە ناکات (نە بە شێوەیەکی ئۆتۆماتیکی زیاد دەکات). نووسەران دەبێت خۆیان ئەم سیفەتە تایبەتترانە لەخۆ بگرن.
بەڵام 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>
وە دانانی بۆ بەکارهێنان لە ناوبارێکدا:
<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>
درۆپلێفت
مینیوەکانی دابەزین لە لای چەپی توخمەکان بە زیادکردن .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
بۆ ڕاست ڕێکخستنی مینیوی دابەزین. ڕێنماییەکان ئاوێنە دەکرێن لەکاتی بەکارهێنانی 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"
تایبەتمەندییەک زیاد بکەیت بۆ دوگمەکانی دابەزین لە navbarsدا، بەو پێیەی Popper لە navbars بەکارناهێنرێت.
هەڵبژاردەکانی ڕێکخستن
بە وەرگرتنی زۆربەی ئەو بژاردانەی کە لە سەرەوە نیشان دراون، لێرەدا دیمۆیەکی بچووکی سینکی چێشتخانە لە بژاردەی جۆراوجۆری ڕێکخستنی دابەزین لە یەک شوێن.
<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;
میکسینەکان
میکسینەکان بەکاردەهێنرێن بۆ دروستکردنی کارێتەکانی بنەمای 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;
}
}
}
بەکارهێنان
لە ڕێگەی تایبەتمەندییەکانی داتا یان جاڤاسکڕێپتەوە، پێوەکراوەکە ناوەڕۆکی شاراوە (مینیوەکانی دابەزین) دەگۆڕێت بە گۆڕینی .show
پۆلەکە لەسەر باوک .dropdown-menu
. تایبەتمەندییەکە data-bs-toggle="dropdown"
پشتی پێدەبەسترێت بۆ داخستنی مینیوەکانی دابەزین لە ئاستی بەرنامەیەکدا، بۆیە بیرۆکەیەکی باشە هەمیشە بەکاری بهێنیت.
mouseover
مامەڵەکاری بەتاڵ زیاد دەکات بۆ منداڵە دەستبەجێیەکانی
<body>
توخمەکە. ئەم هاکە ناشرینە پێویستە بۆ کارکردن لە دەوری
quirk لە iOS' event delegation , کە ئەگەرنا ڕێگری دەکات لە لێدانێک لە هەر شوێنێک لە دەرەوەی دابەزینەکە لە دەستپێکردنی کۆدەکە کە دابەزینەکە دادەخات. کاتێک کە درۆپداونەکە دادەخرێت، ئەم
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"
هێشتا پێویستە
بەبێ گوێدانە ئەوەی کە ئایا لە ڕێگەی جاڤاسکڕێپتەوە بانگی دابەزینەکەت دەکەیت یان لەبری ئەوە data-api بەکاردەهێنیت، data-bs-toggle="dropdown"
هەمیشە پێویستە لەسەر توخمە دەستپێکەری دابەزینەکە ئامادە بیت.
بژاردەکان
دەتوانرێت هەڵبژاردنەکان لە ڕێگەی تایبەتمەندییەکانی داتا یان جاڤاسکڕێپتەوە تێپەڕێنرێت. بۆ تایبەتمەندیەکانی داتا، ناوی هەڵبژاردنەکە زیاد بکە بۆ data-bs-
, وەک لە data-bs-offset=""
. دڵنیابە لە گۆڕینی جۆری کەیسی ناوی هەڵبژاردنەکە لە camelCase بۆ kebab-case لە کاتی تێپەڕاندنی هەڵبژاردنەکان لە ڕێگەی تایبەتمەندییەکانی داتا. بۆ نموونە لەبری بەکارهێنانی data-bs-autoClose="false"
, بەکاربهێنە data-bs-auto-close="false"
.
ناو | جۆر | بنەڕەتی | وەسف |
---|---|---|---|
boundary |
ڕستە | پێکهاتە | 'clippingParents' |
سنووری سنووردارکردنی Overflow ی مینیوی دابەزین (تەنها بۆ دەستکاریکەری preventOverflow ی Popper دەگونجێت). بە شێوازی پێشوەختە 'clippingParents' ئاماژەی HTMLElement یە و دەتوانێت قبوڵ بکات (تەنها لە ڕێگەی جاڤاسکڕێپتەوە). بۆ زانیاری زیاتر سەردانی دۆکیومێنتەکانی detectOverflow ی Popper بکە . |
reference |
ڕستە | توخم | شت | 'toggle' |
توخمە ئاماژەییەکەی مینیوی دابەزین. بەهاکانی 'toggle' , 'parent' , ئاماژەیەکی HTMLElement یان شتێک کە دابین دەکات قبوڵ دەکات getBoundingClientRect . بۆ زانیاری زیاتر سەردانی دۆکیومێنتەکانی بنیاتنانی پۆپەر و دۆکیومێنتەکانی توخمە مەجازییەکان بکەن. |
display |
ڕستە | 'dynamic' |
بە شێوازی پێشوەختە، ئێمە Popper بەکاردەهێنین بۆ جێگیرکردنی داینامیکی. ئەمە لەکاربخە بە static . |
offset |
ڕیزبەندی | ڕستە | کردار | [0, 2] |
ئۆفسێتی دابەزینەکە بە بەراورد بە ئامانجەکەی. دەتوانیت ڕستەیەک لە تایبەتمەندییەکانی داتادا بە بەها جیاکراوەکانی کۆما وەک: کاتێک فەنکشنێک بەکاردەهێنرێت بۆ دیاریکردنی ئۆفسێتەکە، بە ئۆبجێکتیک بانگ دەکرێت کە شوێنی پۆپەر و ئاماژە و پۆپەر rects وەک یەکەم ئارگومێنتی تێدایە. گرێی DOM ی توخمە دەستپێکەر وەک ئارگومێنتی دووەم دەگوازرێتەوە. فەنکشنەکە دەبێت ڕیزبەندییەک بگەڕێنێتەوە بە دوو ژمارەی: . بۆ زانیاری زیاتر سەردانی دۆکیومێنتەکانی ئۆفسێتی پۆپەر بکە . |
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 |
کاتێک شێوازی show instance بانگ دەکرێت یەکسەر ئاگر دەکاتەوە. |
shown.bs.dropdown |
کاتێک کە درۆپداونەکە بۆ بەکارهێنەر دیار بووە و گواستنەوەکانی CSS تەواو بوون، تەقێنراوە. |
hide.bs.dropdown |
یەکسەر ئاگر دەکاتەوە کاتێک شێوازی hide instance بانگ کراوە. |
hidden.bs.dropdown |
کاتێک کە درۆپداونەکە تەواو بوو لە شاردنەوە لە بەکارهێنەر و گواستنەوەکانی CSS تەواو بوون، ئاگر دەکرێتەوە. |
var myDropdown = document.getElementById('myDropdown')
myDropdown.addEventListener('show.bs.dropdown', function () {
// do something...
})