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.js , 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.jsna naglalaman ng Popper.js. Ang Popper.js ay hindi ginagamit upang iposisyon ang mga dropdown sa mga navbar ngunit dahil 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 roleat 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-itemelemento 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 .btnay maaaring gawing dropdown toggle na may ilang pagbabago sa markup. Narito kung paano mo magagamit ang mga ito sa alinmang <button>elemento:
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-splitpara sa wastong espasyo sa paligid ng dropdown caret.
Ginagamit namin ang dagdag na klase na ito upang bawasan ang pahalang paddingsa magkabilang gilid ng caret ng 25% at alisin ang margin-leftidinagdag 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.
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.
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.
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-rightsa isang .dropdown-menui-align sa kanan ang dropdown na menu.
Heads up! Ang mga dropdown ay nakaposisyon salamat sa Popper.js (maliban kapag ang mga ito ay nakapaloob sa isang navbar).
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.
Upang ihanay sa kaliwa ang dropdown na menu sa ibinigay na breakpoint o mas malaki, magdagdag .dropdown-menu-rightat .dropdown-menu{-sm|-md|-lg|-xl}-left.
Tandaan na hindi mo kailangang magdagdag ng data-display="static"attribute sa mga dropdown na button sa mga navbar, dahil hindi ginagamit ang Popper.js 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.
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.
Ilang halimbawa ng text na malayang dumadaloy sa loob ng dropdown na menu.
At ito ay higit pang halimbawa ng teksto.
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.
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 .showklase sa item sa listahan ng magulang. 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.
Sa mga touch-enabled na device, ang pagbubukas ng dropdown ay nagdaragdag ng mga walang laman na ( $.noop) mouseoverna 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, mouseoveraalisin 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.
Sa pamamagitan ng JavaScript
Tawagan ang mga dropdown sa pamamagitan ng JavaScript:
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.js .
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.js .
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.js .
sanggunian
string | elemento
'toggle'
Sanggunian na elemento ng dropdown na menu. Tumatanggap ng mga halaga ng 'toggle', 'parent', o isang HTMLElement reference. Para sa higit pang impormasyon sumangguni sa Popper.js's referenceObject docs .
display
string
'dynamic'
Bilang default, ginagamit namin ang Popper.js para sa dynamic na pagpoposisyon. Huwag paganahin ito gamit ang static.
Tandaan kung kailan boundarynakatakda 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-menuparent element ng 's at may relatedTargetproperty, na ang value ay ang toggling anchor element. hide.bs.dropdownat hidden.bs.dropdownang mga event ay may clickEventproperty (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).