Source

Выпадальныя спісы

Пераключайце кантэкстныя накладкі для адлюстравання спісаў спасылак і многае іншае з дапамогай выпадальнага плагіна Bootstrap.

Агляд

Выпадаючыя спісы - гэта кантэкстныя накладкі, якія можна пераключаць, для адлюстравання спісаў спасылак і іншага. Яны зроблены інтэрактыўнымі з уключаным плагінам Bootstrap для выпадальнага меню JavaScript. Яны пераключаюцца націскам, а не навядзеннем; гэта наўмыснае дызайнерскае рашэнне.

Выпадаючыя спісы створаны на аснове старонняй бібліятэкі Popper.js , якая забяспечвае дынамічнае пазіцыянаванне і выяўленне вокны прагляду. Абавязкова ўключыце popper.min.js перад JavaScript Bootstrap або выкарыстоўвайце bootstrap.bundle.min.js/ bootstrap.bundle.js, які змяшчае Popper.js. Popper.js не выкарыстоўваецца для размяшчэння выпадаючых спісаў у панэлі навігацыі, хоць дынамічнае пазіцыянаванне не патрабуецца.

Калі вы ствараеце наш JavaScript з зыходнага кода, патрабуеццаutil.js .

Даступнасць

Стандарт WAI ARIA вызначае фактычны role="menu"віджэт , але гэта адносіцца да прыкладных меню, якія запускаюць дзеянні або функцыі. Меню ARIA могуць утрымліваць толькі пункты меню, пункты меню сцяжкоў, пункты меню перамыкачоў, групы перамыкачоў і падменю.

Выпадаючыя спісы Bootstrap, з іншага боку, распрацаваны як агульныя і дастасавальныя да розных сітуацый і структур разметкі. Напрыклад, можна ствараць выпадальныя спісы, якія змяшчаюць дадатковыя ўводы і элементы кіравання формамі, такія як палі пошуку або формы ўваходу. Па гэтай прычыне Bootstrap не чакае (і не дадае аўтаматычна) ніякіх атрыбутаў roleі , неабходных для сапраўдных меню ARIA . Аўтары самі павінны ўключыць гэтыя больш канкрэтныя атрыбуты.aria-

Тым не менш, Bootstrap сапраўды дадае ўбудаваную падтрымку большасці стандартных узаемадзеянняў з меню клавіятуры, такіх як магчымасць перамяшчацца па асобных .dropdown-itemэлементах з дапамогай клавіш курсора і закрываць меню з дапамогай ESCклавішы.

Прыклады

Абгарніце перамыкач выпадальнага меню (вашу кнопку або спасылку) і выпадальнае меню ў .dropdownабо іншы элемент, які абвяшчае position: relative;. Выпадаючыя спісы можна выклікаць з <a>або <button>элементаў, каб лепш адпавядаць вашым патэнцыяльным патрэбам.

Адзіная кнопка

Любы сінгл .btnможна ператварыць у выпадальны пераключальнік з некаторымі зменамі разметкі. Вось як вы можаце прымусіць іх працаваць з адным з <button>элементаў:

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

І з <a>элементамі:

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

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

Самае лепшае, што вы таксама можаце зрабіць гэта з дапамогай любой кнопкі:

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

Кнопка раздзялення

Аналагічным чынам стварыце выпадальныя спісы з раздзеленымі кнопкамі практычна з той жа разметкай, што і выпадальныя спісы з адной кнопкай, але з даданнем .dropdown-toggle-splitдля належнага інтэрвалу вакол выпадальнага меню.

Мы выкарыстоўваем гэты дадатковы клас для памяншэння гарызанталі paddingпа абодва бакі карэткі на 25% і выдалення таго margin-left, што дадаецца для звычайных выпадаючых кнопак. Гэтыя дадатковыя змены трымаюць курсор у цэнтры раздзеленай кнопкі і забяспечваюць вобласць траплення больш адпаведнага памеру побач з галоўнай кнопкай.

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

Праклейванне

Выпадаючыя спісы кнопак працуюць з кнопкамі ўсіх памераў, уключаючы кнопкі па змаўчанні і падзеленыя выпадальныя кнопкі.

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

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

Напрамкі

Выпадзенне

Запускайце выпадальныя меню над элементамі шляхам дадання .dropupда бацькоўскага элемента.

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

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

Дропрайт

Запусціце выпадальныя меню справа ад элементаў, дадаўшы .droprightіх да бацькоўскага элемента.

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

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

Кропля ўлева

Запускайце выпадальныя меню злева ад элементаў шляхам дадання .dropleftда бацькоўскага элемента.

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

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

Гістарычна змесціва выпадальнага меню павінна было быць спасылкамі, але гэта ўжо не так у версіі 4. Цяпер вы можаце па жаданні выкарыстоўваць <button>элементы ў выпадаючых спісах замест проста <a>s.

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

Вы таксама можаце ствараць неінтэрактыўныя выпадальныя элементы з дапамогай .dropdown-item-text. Не саромейцеся ствараць дадатковыя стылі з дапамогай карыстацкіх CSS або тэкставых утыліт.

<div class="dropdown-menu">
  <span class="dropdown-item-text">Dropdown item text</span>
  <a class="dropdown-item" href="#">Action</a>
  <a class="dropdown-item" href="#">Another action</a>
  <a class="dropdown-item" href="#">Something else here</a>
</div>

Актыўны

Дадайце .activeда элементаў у выпадальным меню, каб аформіць іх як актыўныя .

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

Інваліды

Дадайце .disabledэлементы ў выпадальным спісе, каб аформіць іх як адключаныя .

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

Па змаўчанні выпадаючае меню аўтаматычна размяшчаецца на 100% зверху і ўздоўж левага боку бацькоўскага меню. Дадайце .dropdown-menu-rightда .dropdown-menuвыраўноўвання выпадальнага меню па правым краі.

Галаву ўверх! Выпадаючыя спісы размяшчаюцца дзякуючы Popper.js (за выключэннем выпадкаў, калі яны змяшчаюцца ў панэлі навігацыі).

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

Загалоўкі

Дадайце загаловак, каб пазначыць раздзелы дзеянняў у любым выпадальным меню.

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

Раздзяляльнікі

Падзяліце групы звязаных пунктаў меню падзельнікам.

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

Тэкст

Змесціце любы тэкст свабоднай формы ў выпадальнае меню з тэкстам і выкарыстоўвайце ўтыліты для размяшчэння інтэрвалаў . Звярніце ўвагу, што вам, верагодна, спатрэбяцца дадатковыя стылі памераў, каб абмежаваць шырыню меню.

<div class="dropdown-menu 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="form-group">
      <label for="exampleDropdownFormEmail1">Email address</label>
      <input type="email" class="form-control" id="exampleDropdownFormEmail1" placeholder="[email protected]">
    </div>
    <div class="form-group">
      <label for="exampleDropdownFormPassword1">Password</label>
      <input type="password" class="form-control" id="exampleDropdownFormPassword1" placeholder="Password">
    </div>
    <div class="form-check">
      <input type="checkbox" class="form-check-input" id="dropdownCheck">
      <label class="form-check-label" for="dropdownCheck">
        Remember me
      </label>
    </div>
    <button type="submit" class="btn btn-primary">Sign in</button>
  </form>
  <div class="dropdown-divider"></div>
  <a class="dropdown-item" href="#">New around here? Sign up</a>
  <a class="dropdown-item" href="#">Forgot password?</a>
</div>

<form class="dropdown-menu p-4">
  <div class="form-group">
    <label for="exampleDropdownFormEmail2">Email address</label>
    <input type="email" class="form-control" id="exampleDropdownFormEmail2" placeholder="[email protected]">
  </div>
  <div class="form-group">
    <label for="exampleDropdownFormPassword2">Password</label>
    <input type="password" class="form-control" id="exampleDropdownFormPassword2" placeholder="Password">
  </div>
  <div class="form-check">
    <input type="checkbox" class="form-check-input" id="dropdownCheck2">
    <label class="form-check-label" for="dropdownCheck2">
      Remember me
    </label>
  </div>
  <button type="submit" class="btn btn-primary">Sign in</button>
</form>

Каб змяніць размяшчэнне выпадальнага меню, выкарыстоўвайце data-offsetабо .data-reference

<div class="d-flex">
  <div class="dropdown mr-1">
    <button type="button" class="btn btn-secondary dropdown-toggle" id="dropdownMenuOffset" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-offset="10,20">
      Offset
    </button>
    <div class="dropdown-menu" aria-labelledby="dropdownMenuOffset">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
    </div>
  </div>
  <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-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-reference="parent">
      <span class="sr-only">Toggle Dropdown</span>
    </button>
    <div class="dropdown-menu" aria-labelledby="dropdownMenuReference">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
      <div class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">Separated link</a>
    </div>
  </div>
</div>

Выкарыстанне

З дапамогай атрыбутаў дадзеных або JavaScript плагін выпадальнага меню пераключае схаваны кантэнт (выпадаючыя меню), пераключаючы .showклас у бацькоўскім пункце спісу. Атрыбут data-toggle="dropdown"выкарыстоўваецца для закрыцця выпадаючых меню на ўзроўні прыкладанняў, таму добра выкарыстоўваць яго заўсёды.

На сэнсарных прыладах адкрыццё выпадальнага меню дадае пустыя ( $.noop) mouseoverапрацоўшчыкі да непасрэдных даччыных <body>элементаў элемента. Гэты пачварны хак неабходны, каб абыйсці дзівацтвы ў дэлегаванні падзей у iOS , якія ў адваротным выпадку перашкодзяць націсканню дзе-небудзь па-за выпадальным спісам выклікаць код, які закрывае выпадальны спіс. Пасля закрыцця выпадальнага меню гэтыя дадатковыя пустыя mouseoverапрацоўшчыкі выдаляюцца.

Праз атрыбуты дадзеных

Дадайце data-toggle="dropdown"да спасылкі або кнопкі, каб пераключыць выпадальны спіс.

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

Праз JavaScript

Выклік выпадаючых меню праз JavaScript:

$('.dropdown-toggle').dropdown()

`data-toggle="dropdown"`яшчэ патрабуецца

Незалежна ад таго, выклікаеце вы выпадальны спіс праз JavaScript або замест гэтага выкарыстоўваеце data-api, data-toggle="dropdown"ён заўсёды павінен прысутнічаць у спускавым элеменце выпадальнага меню.

Параметры

Параметры могуць быць перададзены праз атрыбуты дадзеных або JavaScript. Для атрыбутаў дадзеных дадайце назву опцыі да data-, як у data-offset="".

Імя	Тып	Па змаўчанні	Апісанне
зрушэнне	нумар \| радок \| функцыя	0	Зрушэнне выпадальнага меню адносна мэты. Для атрымання дадатковай інфармацыі звярніцеся да афсетнай дакументацыі Popper.js .
перавярнуць	лагічны	праўда	Дазволіць перагортванне выпадальнага меню ў выпадку перакрыцця апорнага элемента. Для атрымання дадатковай інфармацыі звярніцеся да перагортваемай дакументацыі Popper.js .
мяжа	радок \| элемент	'scrollParent'	Мяжа абмежавання перапаўнення выпадальнага меню. Прымае значэнні `'viewport'`, `'window'`, `'scrollParent'`або спасылку HTMLElement (толькі JavaScript). Для атрымання дадатковай інфармацыі звярніцеся да Popper.js's preventOverflow docs .
спасылка	радок \| элемент	"пераключэнне"	Спасылкавы элемент выпадальнага меню. Прымае значэнні `'toggle'`, `'parent'`, або спасылку HTMLElement. Для атрымання дадатковай інфармацыі звярніцеся да дакументацыі referenceObject Popper.js .
дысплей	радок	"дынамічны"	Па змаўчанні мы выкарыстоўваем Popper.js для дынамічнага пазіцыянавання. Адключыце гэта з дапамогай `static`.

Звярніце ўвагу, калі boundaryдля гэтага значэнне ўстаноўлена любое значэнне, акрамя 'scrollParent', стыль position: staticпрымяняецца да .dropdownкантэйнера.

Метады

Метад	Апісанне
`$().dropdown('toggle')`	Пераключае выпадальнае меню дадзенай панэлі навігацыі або навігацыі з укладкамі.
`$().dropdown('update')`	Абнаўляе пазіцыю выпадальнага меню элемента.
`$().dropdown('dispose')`	Знішчае выпадальны спіс элемента.

Падзеі

Усе выпадаючыя падзеі запускаюцца ў .dropdown-menuбацькоўскім элеменце і маюць relatedTargetуласцівасць, значэннем якой з'яўляецца перамыкаючы прывязны элемент. hide.bs.dropdownі hidden.bs.dropdownпадзеі маюць clickEventуласцівасць (толькі калі зыходны тып падзеі click), якая змяшчае аб'ект падзеі для падзеі пстрычкі.

Падзея	Апісанне
`show.bs.dropdown`	Гэта падзея спрацоўвае неадкладна пры выкліку метаду паказу экземпляра.
`shown.bs.dropdown`	Гэта падзея запускаецца, калі выпадальнае меню становіцца бачным для карыстальніка (будзе чакаць завяршэння пераходаў CSS).
`hide.bs.dropdown`	Гэта падзея запускаецца неадкладна, калі быў выкліканы метад экзэмпляра hide.
`hidden.bs.dropdown`	Гэта падзея запускаецца, калі выпадальнае меню скончана хавацца ад карыстальніка (будзе чакаць завяршэння пераходаў CSS).

$('#myDropdown').on('show.bs.dropdown', function () {
  // do something…
})

Выпадальныя спісы

Агляд

Даступнасць

Прыклады

Адзіная кнопка

Кнопка раздзялення

Праклейванне

Напрамкі

Выпадзенне

Дропрайт

Кропля ўлева

Пункты меню

Актыўны

Інваліды

Выраўноўванне меню

Змест меню

Загалоўкі

Раздзяляльнікі

Тэкст

Формы

Выкарыстанне

Праз атрыбуты дадзеных

Праз JavaScript

`data-toggle="dropdown"`яшчэ патрабуецца

Параметры

Метады

Падзеі

Выпадальныя спісы

Агляд

Даступнасць

Прыклады

Адзіная кнопка

Кнопка раздзялення

Праклейванне

Напрамкі

Выпадзенне

Дропрайт

Кропля ўлева

Пункты меню

Актыўны

Інваліды

Выраўноўванне меню

Змест меню

Загалоўкі

Выпадальны загаловак

Раздзяляльнікі

Тэкст

Формы

Выпадаючыя параметры

Выкарыстанне

Праз атрыбуты дадзеных

Праз JavaScript

data-toggle="dropdown"яшчэ патрабуецца

Параметры

Метады

Падзеі

`data-toggle="dropdown"`яшчэ патрабуецца