Mga dropdown
I-toggle ang mga contextual overlay para sa pagpapakita ng mga listahan ng mga link at higit pa gamit ang Bootstrap dropdown plugin.
Pangkalahatang-ideya
Ang mga dropdown ay toggleable, contextual overlay para sa pagpapakita ng mga listahan ng mga link at higit pa. Ginawa silang interactive gamit ang kasamang Bootstrap dropdown JavaScript plugin. Ang mga ito ay toggle sa pamamagitan ng pag-click, hindi sa pamamagitan ng pag-hover; ito ay isang intensyonal na desisyon sa disenyo .
Ang mga dropdown ay binuo sa isang third party na library, Popper , na nagbibigay ng dynamic na pagpoposisyon at viewport detection. Tiyaking isama ang popper.min.js bago ang JavaScript ng Bootstrap o gamitin ang bootstrap.bundle.min.js
/ bootstrap.bundle.js
na naglalaman ng Popper. Ang Popper ay hindi ginagamit upang iposisyon ang mga dropdown sa mga navbar kahit na hindi kinakailangan ang dynamic na pagpoposisyon.
Kung binubuo mo ang aming JavaScript mula sa pinagmulan, nangangailanganutil.js
ito ng .
Accessibility
Ang WAI ARIA standard ay tumutukoy sa isang aktwal na role="menu"
widget , ngunit ito ay partikular sa mga application-like na menu na nagti-trigger ng mga aksyon o function. Ang mga ARIA menu ay maaari lamang maglaman ng mga menu item, checkbox menu item, radio button menu item, radio button group, at sub-menu.
Ang mga dropdown ng Bootstrap, sa kabilang banda, ay idinisenyo upang maging generic at naaangkop sa iba't ibang sitwasyon at istruktura ng markup. Halimbawa, posibleng gumawa ng mga dropdown na naglalaman ng mga karagdagang input at kontrol ng form, gaya ng mga field sa paghahanap o mga form sa pag-login. Para sa kadahilanang ito, hindi inaasahan ng Bootstrap (o awtomatikong magdagdag) ng alinman sa role
at mga aria-
katangiang kinakailangan para sa mga tunay na menu ng ARIA . Kailangang isama ng mga may-akda ang mga mas partikular na katangiang ito mismo.
Gayunpaman, ang Bootstrap ay nagdaragdag ng built-in na suporta para sa karamihan ng mga karaniwang pakikipag-ugnayan sa menu ng keyboard, tulad ng kakayahang lumipat sa mga indibidwal na .dropdown-item
elemento gamit ang mga cursor key at isara ang menu gamit ang ESCkey.
Mga halimbawa
I-wrap ang toggle ng dropdown (iyong button o link) at ang dropdown na menu sa loob ng .dropdown
, o isa pang elementong nagdedeklara ng position: relative;
. Maaaring ma-trigger ang mga dropdown mula sa <a>
o <button>
mga elemento upang mas umangkop sa iyong mga potensyal na pangangailangan.
Isang pindutan
Anumang single .btn
ay maaaring gawing dropdown toggle na may ilang pagbabago sa markup. Narito kung paano mo magagamit ang mga ito sa alinmang <button>
elemento:
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
Dropdown button
</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>
</div>
At may <a>
mga elemento:
<div class="dropdown">
<a class="btn btn-secondary dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-expanded="false">
Dropdown link
</a>
<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>
</div>
Ang pinakamagandang bahagi ay magagawa mo rin ito sa anumang variant ng button:
<!-- Example single danger button -->
<div class="btn-group">
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" 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>
Split button
Katulad nito, lumikha ng mga dropdown ng split button na may halos kaparehong markup ng mga dropdown ng solong button, ngunit kasama ang pagdaragdag ng .dropdown-toggle-split
para sa wastong espasyo sa paligid ng dropdown caret.
Ginagamit namin ang dagdag na klase na ito upang bawasan ang pahalang padding
sa magkabilang gilid ng caret ng 25% at alisin ang margin-left
idinagdag para sa mga regular na dropdown ng button. Ang mga karagdagang pagbabagong iyon ay nagpapanatili sa caret na nakasentro sa split button at nagbibigay ng mas naaangkop na laki ng hit area sa tabi ng pangunahing button.
<!-- 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-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>
Pagsusukat
Gumagana ang mga dropdown ng button sa mga button sa lahat ng laki, kabilang ang mga default at split dropdown na button.
<!-- 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-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-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-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-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
...
</div>
</div>
Mga direksyon
Dropup
I-trigger ang mga dropdown na menu sa itaas ng mga elemento sa pamamagitan ng pagdaragdag .dropup
sa parent na elemento.
<!-- Default dropup button -->
<div class="btn-group dropup">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" 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-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<!-- Dropdown menu links -->
</div>
</div>
Dropright
I-trigger ang mga dropdown na menu sa kanan ng mga elemento sa pamamagitan ng pagdaragdag .dropright
sa parent na elemento.
<!-- Default dropright button -->
<div class="btn-group dropright">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" 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-expanded="false">
<span class="sr-only">Toggle Dropright</span>
</button>
<div class="dropdown-menu">
<!-- Dropdown menu links -->
</div>
</div>
Patak sa kaliwa
I-trigger ang mga dropdown na menu sa kaliwa ng mga elemento sa pamamagitan ng pagdaragdag .dropleft
sa parent na elemento.
<!-- Default dropleft button -->
<div class="btn-group dropleft">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" 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">
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" 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>
Mga item sa menu
Ang mga nilalaman ng dropdown na menu sa kasaysayan ay dapat na mga link, ngunit hindi na iyon ang kaso sa v4. Ngayon ay maaari mong opsyonal na gumamit <button>
ng mga elemento sa iyong mga dropdown sa halip na <a>
s lang.
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
Dropdown
</button>
<div class="dropdown-menu">
<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>
Maaari ka ring gumawa ng mga hindi interactive na dropdown na item gamit ang .dropdown-item-text
. Huwag mag-atubiling mag-istilo pa gamit ang custom na CSS o mga text utilities.
<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>
Aktibo
Idagdag .active
sa mga item sa dropdown upang i- istilo ang mga ito bilang aktibo .
<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>
Hindi pinagana
Idagdag .disabled
sa mga item sa dropdown upang i- istilo ang mga ito bilang hindi pinagana .
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Regular link</a>
<a class="dropdown-item disabled">Disabled link</a>
<a class="dropdown-item" href="#">Another link</a>
</div>
Pag-align ng menu
Bilang default, ang isang dropdown na menu ay awtomatikong nakaposisyon nang 100% mula sa itaas at sa kaliwang bahagi ng magulang nito. Idagdag .dropdown-menu-right
sa isang .dropdown-menu
i-align sa kanan ang dropdown na menu.
<div class="btn-group">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" 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>
Tumutugon sa pagkakahanay
Kung gusto mong gumamit ng tumutugong alignment, huwag paganahin ang dynamic na pagpoposisyon sa pamamagitan ng pagdaragdag ng data-display="static"
attribute at gamitin ang mga tumutugong klase ng variation.
Upang ihanay sa kanan ang dropdown na menu sa ibinigay na breakpoint o mas malaki, idagdag ang .dropdown-menu{-sm|-md|-lg|-xl}-right
.
<div class="btn-group">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" data-display="static" aria-expanded="false">
Left-aligned but right aligned when large screen
</button>
<div class="dropdown-menu dropdown-menu-lg-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>
Upang ihanay sa kaliwa ang dropdown na menu sa ibinigay na breakpoint o mas malaki, magdagdag .dropdown-menu-right
at .dropdown-menu{-sm|-md|-lg|-xl}-left
.
<div class="btn-group">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" data-display="static" aria-expanded="false">
Right-aligned but left aligned when large screen
</button>
<div class="dropdown-menu dropdown-menu-right dropdown-menu-lg-left">
<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>
Tandaan na hindi mo kailangang magdagdag ng data-display="static"
attribute sa mga dropdown na button sa mga navbar, dahil hindi ginagamit ang Popper sa mga navbar.
Nilalaman ng menu
Mga header
Magdagdag ng header upang lagyan ng label ang mga seksyon ng mga aksyon sa anumang dropdown na menu.
<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>
Mga divider
Paghiwalayin ang mga pangkat ng mga kaugnay na item sa menu na may divider.
<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>
Text
Ilagay ang anumang freeform na text sa loob ng dropdown na menu na may text at gumamit ng mga spacing utilities . Tandaan na malamang na kailangan mo ng mga karagdagang istilo ng pagpapalaki upang hadlangan ang lapad ng menu.
<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>
Mga porma
Maglagay ng form sa loob ng dropdown na menu, o gawin itong dropdown na menu, at gumamit ng margin o padding utility para bigyan ito ng negatibong espasyo na kailangan mo.
<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-group">
<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="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-group">
<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>
Mga pagpipilian sa dropdown
Gamitin data-offset
o data-reference
para baguhin ang lokasyon ng dropdown.
<div class="d-flex">
<div class="dropdown mr-1">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false" data-offset="10,20">
Offset
</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>
</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" data-toggle="dropdown" aria-expanded="false" data-reference="parent">
<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>
</div>
Paggamit
Sa pamamagitan ng mga attribute ng data o JavaScript, i-toggle ng dropdown na plugin ang nakatagong content (mga dropdown na menu) sa pamamagitan ng pag-toggle sa .show
klase sa parent .dropdown-menu
. Ang data-toggle="dropdown"
katangian ay umaasa para sa pagsasara ng mga dropdown na menu sa antas ng application, kaya magandang ideya na palaging gamitin ito.
$.noop
)
mouseover
na humahawak sa mga agarang anak ng
<body>
elemento. Ang tinatanggap na pangit na hack na ito ay kinakailangan upang malutas ang isang
quirk sa pagtatalaga ng kaganapan ng iOS , na kung hindi man ay mapipigilan ang pag-tap saanman sa labas ng dropdown mula sa pagti-trigger ng code na nagsasara ng dropdown. Kapag naisara na ang dropdown,
mouseover
aalisin ang mga karagdagang walang laman na handler na ito.
Sa pamamagitan ng mga katangian ng data
Idagdag data-toggle="dropdown"
sa isang link o button upang i-toggle ang isang dropdown.
<div class="dropdown">
<button type="button" data-toggle="dropdown" aria-expanded="false">
Dropdown trigger
</button>
<div class="dropdown-menu">
...
</div>
</div>
Sa pamamagitan ng JavaScript
Tawagan ang mga dropdown sa pamamagitan ng JavaScript:
$('.dropdown-toggle').dropdown()
data-toggle="dropdown"
kailangan pa rin
Hindi alintana kung tawagan mo ang iyong dropdown sa pamamagitan ng JavaScript o sa halip ay gumamit ng data-api, data-toggle="dropdown"
palaging kinakailangang naroroon sa elemento ng trigger ng dropdown.
Mga pagpipilian
Maaaring ipasa ang mga opsyon sa pamamagitan ng mga katangian ng data o JavaScript. Para sa mga katangian ng data, idagdag ang pangalan ng opsyon sa data-
, tulad ng sa data-offset=""
.
Pangalan | Uri | Default | Paglalarawan |
---|---|---|---|
offset | numero | string | function | 0 | Offset ng dropdown na nauugnay sa target nito. Kapag ang isang function ay ginagamit upang matukoy ang offset, ito ay tinatawag na may isang bagay na naglalaman ng offset data bilang kanyang unang argumento. Dapat ibalik ng function ang isang bagay na may parehong istraktura. Ang triggering element na DOM node ay ipinasa bilang pangalawang argumento. Para sa higit pang impormasyon sumangguni sa mga offset na doc ng Popper . |
pitik | boolean | totoo | Payagan ang Dropdown na mag-flip kung sakaling magkaroon ng overlapping sa reference na elemento. Para sa higit pang impormasyon sumangguni sa mga flip doc ng Popper . |
hangganan | string | elemento | 'scrollParent' | Overflow constraint hangganan ng dropdown na menu. Tumatanggap ng mga value ng 'viewport' , 'window' , 'scrollParent' , o isang HTMLElement reference (JavaScript lang). Para sa higit pang impormasyon sumangguni sa preventOverflow docs ng Popper . |
sanggunian | string | elemento | 'toggle' | Sanggunian na elemento ng dropdown na menu. Tumatanggap ng mga halaga ng 'toggle' , 'parent' , o isang HTMLElement reference. Para sa karagdagang impormasyon sumangguni sa Popper's referenceObject docs . |
display | string | 'dynamic' | Bilang default, ginagamit namin ang Popper para sa dynamic na pagpoposisyon. Huwag paganahin ito gamit ang static . |
popperConfig | null | bagay | wala | Upang baguhin ang default na Popper config ng Bootstrap, tingnan ang configuration ng Popper |
Tandaan kung kailan boundary
nakatakda sa anumang halaga maliban sa , inilalapat 'scrollParent'
ang istilo sa lalagyan.position: static
.dropdown
Paraan
Pamamaraan | Paglalarawan |
---|---|
$().dropdown('toggle') |
I-toggle ang dropdown na menu ng isang naibigay na navbar o naka-tab na navigation. |
$().dropdown('show') |
Ipinapakita ang dropdown na menu ng isang naibigay na navbar o naka-tab na nabigasyon. |
$().dropdown('hide') |
Itinatago ang dropdown na menu ng isang naibigay na navbar o naka-tab na navigation. |
$().dropdown('update') |
Ina-update ang posisyon ng dropdown ng isang elemento. |
$().dropdown('dispose') |
Sinisira ang dropdown ng isang elemento. |
Mga kaganapan
Ang lahat ng dropdown na event ay pinapagana sa .dropdown-menu
parent element ng 's at may relatedTarget
property, na ang value ay ang toggling anchor element. hide.bs.dropdown
at hidden.bs.dropdown
ang mga event ay may clickEvent
property (lamang kapag ang orihinal na uri ng event ay click
) na naglalaman ng Event Object para sa click na event.
Kaganapan | Paglalarawan |
---|---|
show.bs.dropdown |
Agad na gagana ang kaganapang ito kapag tinawag ang paraan ng show instance. |
shown.bs.dropdown |
Ang kaganapang ito ay pinapagana kapag ang dropdown ay ginawang nakikita ng user (maghihintay para sa mga transition ng CSS, upang makumpleto). |
hide.bs.dropdown |
Ang kaganapang ito ay agad na pinapagana kapag ang paraan ng pagtatago ng halimbawa ay tinawag. |
hidden.bs.dropdown |
Ang kaganapang ito ay gagana kapag ang dropdown ay tapos nang itago mula sa user (maghihintay para sa mga transition ng CSS, upang makumpleto). |
$('#myDropdown').on('show.bs.dropdown', function () {
// do something...
})