Toggle overlays kontekstual pikeun mintonkeun daptar tumbu jeung leuwih ku Bootstrap dropdown plugin.
Ihtisar
Dropdowns tiasa toggle, overlays kontekstual pikeun mintonkeun daptar tumbu sareng seueur deui. Éta didamel interaktif sareng plugin JavaScript dropdown Bootstrap anu kalebet. Aranjeunna toggled ku ngaklik, teu ku hovering; ieu kaputusan desain ngahaja .
Dropdowns diwangun dina perpustakaan pihak katilu, Popper.js , nu nyadiakeun positioning dinamis sarta deteksi viewport. Pastikeun kalebet popper.min.js sateuacan Bootstrap JavaScript atanapi nganggo bootstrap.bundle.min.js/ bootstrap.bundle.jsanu ngandung Popper.js. Popper.js teu dipaké pikeun posisi dropdowns dina navbars sanajan posisi dinamis teu diperlukeun.
Upami anjeun nuju ngawangun JavaScript kami tina sumber, peryogiutil.js .
Aksesibilitas
Standar WAI ARIA ngahartikeun role="menu"widget sabenerna , tapi ieu husus pikeun ménu kawas aplikasi nu memicu tindakan atawa fungsi. Menu ARIA ngan ukur tiasa ngandung item ménu, item ménu kotak centang, item ménu tombol radio, grup tombol radio, sareng sub-menu.
Dropdown Bootstrap, di sisi anu sanés, dirancang pikeun umum sareng tiasa dianggo pikeun sababaraha kaayaan sareng struktur markup. Contona, kasebut nyaéta dimungkinkeun pikeun nyieun dropdowns nu ngandung inputs tambahan sarta kontrol formulir, kayaning widang teangan atawa formulir login. Ku sabab kitu, Bootstrap henteu nyangka (atanapi sacara otomatis nambihan) salah sahiji rolesareng aria-atribut anu diperyogikeun pikeun ménu ARIA anu leres. Pangarang kedah ngalebetkeun atribut anu langkung spésifik ieu nyalira.
Nanging, Bootstrap nambihan dukungan anu diwangun pikeun sabagéan ageung interaksi ménu keyboard standar, sapertos kamampuan pikeun mindahkeun .dropdown-itemelemen individu nganggo konci kursor sareng nutup ménu nganggo ESCkonci éta.
Contona
Bungkus toggle dropdown urang (tombol atawa link anjeun) jeung menu dropdown dina .dropdown, atawa elemen séjén nu nyatakeun position: relative;. Dropdowns tiasa dipicu tina <a>atanapi <button>elemen pikeun nyocogkeun ka kabutuhan poténsial anjeun.
Tombol tunggal
Sakur tunggal .btntiasa dirobih janten togél lungsur sareng sababaraha parobihan markup. Kieu kumaha anjeun tiasa nempatkeun aranjeunna damel sareng unsur- <button>unsur:
Nya kitu, jieun dropdowns tombol pamisah jeung markup ampir sarua salaku dropdowns tombol tunggal, tapi ditambahan .dropdown-toggle-splitpikeun spasi ditangtoskeun sabudeureun caret dropdown.
Kami nganggo kelas tambahan ieu pikeun ngirangan horisontal paddingdina dua sisi karet ku 25% sareng ngahapus margin-leftanu ditambah pikeun turunna tombol biasa. Parobihan tambahan éta ngajaga karét dipuseurkeun dina tombol pamisah sareng nyayogikeun daérah pencét ukuran anu langkung pas gigireun tombol utama.
Sacara sajarah, eusi ménu lungsur kedah janten tautan, tapi éta henteu deui kasus v4. Ayeuna anjeun optionally bisa ngagunakeun <button>elemen dina dropdowns anjeun tinimbang ngan <a>s.
Anjeun oge bisa nyieun item dropdown non-interaktif jeung .dropdown-item-text. Ngarasa Luncat ka gaya salajengna kalawan CSS custom atawa utilitas téks.
Sacara standar, menu dropdown otomatis diposisikan 100% ti luhur jeung sapanjang sisi kénca indungna. Tambahkeun .dropdown-menu-rightka .dropdown-menukatuhu align menu dropdown.
Mastaka tegak! Dropdowns diposisikan berkat Popper.js (iwal lamun aranjeunna dikandung dina navbar a).
alignment responsif
Upami anjeun hoyong nganggo alignment responsif, pareuman posisi dinamis ku cara nambihan data-display="static"atribut sareng nganggo kelas variasi responsif.
Pikeun align katuhu menu dropdown jeung breakpoint dibikeun atawa leuwih badag, tambahkeun .dropdown-menu{-sm|-md|-lg|-xl}-right.
Pikeun align kénca menu dropdown jeung breakpoint dibikeun atawa leuwih badag, tambahkeun .dropdown-menu-rightna .dropdown-menu{-sm|-md|-lg|-xl}-left.
Catet yén anjeun teu kedah nambahkeun data-display="static"atribut kana tombol dropdown di navbars, saprak Popper.js teu dipaké dina navbars.
eusi menu
lulugu
Tambahkeun lulugu pikeun labél bagian tina lampah dina menu dropdown mana wae.
Teundeun sagala téks wangun bébas dina menu dropdown kalawan téks na make spasi utilitas . Catet yén anjeun sigana peryogi gaya ukuran tambahan pikeun ngawatesan lebar ménu.
Sababaraha conto téks anu ngalir bébas dina menu dropdown.
Sareng ieu langkung seueur conto téks.
Bentuk
Nempatkeun formulir dina menu dropdown, atawa nyieun kana menu dropdown, sarta ngagunakeun margin atawa padding Utiliti pikeun masihan eta spasi négatip nu peryogi.
Ngaliwatan atribut data atanapi JavaScript, plugin dropdown toggles eusi disumputkeun (dropdown menu) ku toggling .showkelas dina item daptar indungna. Atribut data-toggle="dropdown"ieu diandelkeun pikeun nutup ménu lungsur dina tingkat aplikasi, janten ide anu sae pikeun nganggo éta.
Dina alat touch-diaktipkeun, muka dropdown nambahkeun kosong ( $.noop) mouseoverpawang ka barudak langsung <body>unsur. Hack anu diakui awon ieu diperyogikeun pikeun ngerjakeun quirk dina delegasi acara ios , anu bakal nyegah ketok dimana waé di luar dropdown tina pemicu kode anu nutup turunna. Sakali dropdown ditutup, pawang kosong tambahan mouseoverieu dihapus.
Via atribut data
Tambihkeun data-toggle="dropdown"kana tautan atanapi tombol pikeun ngagentoskeun turunna.
Ngaliwatan JavaScript
Nelepon dropdowns via JavaScript:
data-toggle="dropdown"masih diperlukeun
Paduli naha anjeun nelepon dropdown Anjeun liwat JavaScript atawa gantina ngagunakeun data-api, data-toggle="dropdown"salawasna diperlukeun pikeun hadir dina elemen pemicu dropdown urang.
Pilihan
Pilihan bisa diliwatan via atribut data atawa JavaScript. Pikeun atribut data, tambahkeun nami pilihan ka data-, sapertos dina data-offset="".
Ngaran
Tipe
Default
Katerangan
ngimbangan
angka | string | fungsi
0
Offset tina dropdown relatif ka target na.
Lamun fungsi dipaké pikeun nangtukeun offset, mangka disebut obyék nu ngandung data offset salaku argumen munggaran. Fungsina kedah ngabalikeun obyék kalayan struktur anu sami. The triggering unsur DOM titik diliwatan salaku argumen kadua.
Kanggo inpo nu leuwih lengkep tingal docs offset Popper.js urang .
malik
boolean
leres
Ngidinan Dropdown malik upami aya tumpang tindih dina unsur rujukan. Kanggo inpo nu leuwih lengkep tingal docs flip Popper.js urang .
wates
string | unsur
'scrollParent'
Wates konstrain overflow tina menu dropdown. Narima nilai 'viewport', 'window', 'scrollParent', atawa rujukan HTMLElement (JavaScript wungkul). Kanggo inpo nu leuwih lengkep tingal Popper.js urang preventOverflow docs .
rujukan
string | unsur
'ngalihkeun'
Unsur rujukan tina menu dropdown. Narima nilai 'toggle', 'parent', atawa rujukan HTMLElement. Kanggo inpo nu leuwih lengkep tingal Popper.js urang referenceObject docs .
tampilan
senar
'dinamis'
Sacara standar, kami nganggo Popper.js pikeun posisi dinamis. Pareuman ieu nganggo static.
Catet lamun boundarydisetel ka nilai nu mana wae nu lian ti 'scrollParent', gaya position: staticditerapkeun kana .dropdownwadahna.
Métode
Métode
Katerangan
$().dropdown('toggle')
Toggles menu dropdown tina navbar tinangtu atawa navigasi tab.
$().dropdown('show')
Nembongkeun menu dropdown tina navbar dibikeun atawa navigasi tab.
$().dropdown('hide')
Nyumputkeun menu dropdown tina navbar atanapi navigasi tab.
$().dropdown('update')
Ngamutahirkeun posisi turunna unsur.
$().dropdown('dispose')
Ngancurkeun dropdown hiji unsur.
Kajadian
Kabéh acara dropdown dipecat dina .dropdown-menu's unsur indungna sarta mibanda relatedTargetsipat, anu nilaina unsur jangkar toggling. hide.bs.dropdownsarta hidden.bs.dropdownacara boga clickEventsipat (ngan lamun jenis acara aslina nyaeta click) nu ngandung hiji Objék Acara pikeun acara klik.
Acara
Katerangan
show.bs.dropdown
Kajadian ieu langsung hurung nalika metode conto acara disebut.
shown.bs.dropdown
Kajadian ieu dipecat nalika turunna parantos katingali ku pangguna (bari ngadagoan transisi CSS, réngsé).
hide.bs.dropdown
Kajadian ieu langsung dipecat nalika metode conto sumputkeun parantos disebut.
hidden.bs.dropdown
Acara ieu dipecat nalika dropdown tos rengse disumputkeun ti pamaké (bakal ngadagoan transisi CSS, pikeun ngalengkepan).