باز بدە بۆ ناوەڕۆکی سەرەکی باز بدە بۆ گەشتکردن بە دۆکیومێنتەکان
in English

دابەزینەکان

گۆڕینی سەرپۆشی ناوەڕۆک بۆ پیشاندانی لیستەکانی بەستەرەکان و زۆر شتی تر بە پێوەکراوەکەی 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]

ئۆفسێتی دابەزینەکە بە بەراورد بە ئامانجەکەی. دەتوانیت ڕستەیەک لە تایبەتمەندییەکانی داتادا بە بەها جیاکراوەکانی کۆما وەک:data-bs-offset="10,20"

کاتێک فەنکشنێک بەکاردەهێنرێت بۆ دیاریکردنی ئۆفسێتەکە، بە ئۆبجێکتیک بانگ دەکرێت کە شوێنی پۆپەر و ئاماژە و پۆپەر rects وەک یەکەم ئارگومێنتی تێدایە. گرێی DOM ی توخمە دەستپێکەر وەک ئارگومێنتی دووەم دەگوازرێتەوە. فەنکشنەکە دەبێت ڕیزبەندییەک بگەڕێنێتەوە بە دوو ژمارەی: .[skidding, distance]

بۆ زانیاری زیاتر سەردانی دۆکیومێنتەکانی ئۆفسێتی پۆپەر بکە .

autoClose بولیان | ڕستە true

هەڵسوکەوتی داخستنی ئۆتۆماتیکی درۆپداونەکە ڕێکبخە:

  • true- بە کرتەکردن لە دەرەوە یان ناوەوەی مینیوی دابەزینەکە دادەخرێت.
  • false- درۆپداونەکە بە کرتەکردن لەسەر دوگمەی toggle و بە دەستی بانگکردن hideیان toggleشێوازەکە دادەخرێت. esc(هەروەها بە فشاردان لەسەر کلیل داناخرێت )
  • 'inside'- دابەزینەکە دادەخرێت (تەنها) بە کرتەکردن لەناو مینیوی دابەزینەکەدا.
  • 'outside'- دابەزینەکە دادەخرێت (تەنها) بە کرتەکردن لە دەرەوەی مینیوی دابەزینەکە.
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...
})