Wissel kontekstuele oorlegsels vir die vertoon van lyste skakels en meer met die Bootstrap-aftrek-inprop.
Oorsig
Aftrekkies is wisselbare, kontekstuele oorlegsels vir die vertoon van lyste skakels en meer. Hulle word interaktief gemaak met die ingeslote Bootstrap-aftreklys JavaScript-inprop. Hulle word gewissel deur te klik, nie deur te beweeg nie; dit is ' n doelbewuste ontwerpbesluit .
Dropdowns is gebou op 'n derdeparty-biblioteek, Popper.js , wat dinamiese posisionering en kykpoort-opsporing bied. Maak seker dat jy popper.min.js voor Bootstrap se JavaScript insluit of gebruik bootstrap.bundle.min.js/ bootstrap.bundle.jswat Popper.js bevat. Popper.js word nie gebruik om aftrekkies in navigasiebalke te posisioneer nie, aangesien dinamiese posisionering nie vereis word nie.
As jy ons JavaScript vanaf die bron bou, vereisutil.js dit .
Toeganklikheid
Die WAI ARIA - standaard definieer 'n werklike role="menu"legstuk , maar dit is spesifiek vir toepassingagtige spyskaarte wat aksies of funksies aktiveer. ARIA -kieslyste kan slegs kieslys-items, bokskieslysitems, radioknoppie-kieslysitems, radioknoppiegroepe en subkieslyste bevat.
Bootstrap se aftreklys, aan die ander kant, is ontwerp om generies te wees en van toepassing op 'n verskeidenheid situasies en opmaakstrukture. Dit is byvoorbeeld moontlik om aftreklys te skep wat bykomende invoere en vormkontroles bevat, soos soekvelde of aanmeldvorms. Om hierdie rede verwag Bootstrap nie (en voeg ook nie outomaties by) enige van die roleen aria-kenmerke wat nodig is vir ware ARIA- spyskaarte nie. Skrywers sal hierdie meer spesifieke eienskappe self moet insluit.
Bootstrap voeg egter ingeboude ondersteuning by vir die meeste standaard sleutelbordkieslysinteraksies, soos die vermoë om deur individuele .dropdown-itemelemente te beweeg deur die wysersleutels te gebruik en die spyskaart met die ESCsleutel toe te maak.
Voorbeelde
Draai die aftreklys se skakelaar (jou knoppie of skakel) en die aftreklys binne .dropdown, of 'n ander element wat verklaar position: relative;. Dropdowns kan geaktiveer word vanaf <a>of <button>elemente om beter by jou potensiële behoeftes te pas.
Enkele knoppie
Enige enkele .btnkan verander word in 'n aftrek-skakelaar met 'n paar opmaakveranderinge. Hier is hoe jy hulle met enige van die <button>elemente kan laat werk:
Skep eweneens verdeelknoppie-aftrekkies met feitlik dieselfde opmaak as enkelknoppie-aftrekkies, maar met die byvoeging van .dropdown-toggle-splitvir behoorlike spasiëring rondom die aftreklys.
Ons gebruik hierdie ekstra klas om die horisontale paddingaan weerskante van die karet met 25% te verminder en verwyder die margin-leftwat bygevoeg is vir gereelde knoppie-aftrekkies. Daardie ekstra veranderinge hou die karet gesentreer in die verdeelknoppie en bied 'n meer toepaslike grootte trefarea langs die hoofknoppie.
Histories moes die inhoud van die aftreklys skakels wees, maar dit is nie meer die geval met v4 nie. Nou kan jy opsioneel <button>elemente in jou aftreklys gebruik in plaas van net <a>s.
Jy kan ook nie-interaktiewe dropdown items skep met .dropdown-item-text. Stileer gerus verder met pasgemaakte CSS of tekshulpmiddels.
By verstek word 'n aftreklys outomaties 100% van bo en langs die linkerkant van sy ouer geposisioneer. Voeg .dropdown-menu-rightby 'n .dropdown-menuna regs-belyn die aftreklys.
Let op! Aftrekkies word geposisioneer danksy Popper.js (behalwe wanneer dit in 'n navigasiebalk vervat is).
Responsiewe belyning
As jy responsiewe belyning wil gebruik, deaktiveer dinamiese posisionering deur die data-display="static"kenmerk by te voeg en die responsiewe variasieklasse te gebruik.
Om die aftreklys regs.dropdown-menu{-sm|-md|-lg|-xl}-right in lyn te bring met die gegewe breekpunt of groter, voeg by .
Om die aftreklys links met die gegewe breekpunt of groter te belyn , voeg .dropdown-menu-righten by .dropdown-menu{-sm|-md|-lg|-xl}-left.
Let daarop dat jy nie 'n data-display="static"kenmerk by aftrekknoppies in navigasiebalke hoef by te voeg nie, aangesien Popper.js nie in navigasiebalke gebruik word nie.
Spyskaart inhoud
Opskrifte
Voeg 'n kopskrif by om afdelings van handelinge in enige aftreklys te benoem.
Plaas enige vryvorm teks binne 'n aftreklys met teks en gebruik spasiëring nutsprogramme . Let daarop dat jy waarskynlik bykomende groottestyle sal benodig om die spyskaartwydte te beperk.
Enkele voorbeeldteks wat vryvloeiend binne die aftreklys is.
En dit is meer voorbeeld teks.
Vorms
Plaas 'n vorm in 'n aftrekkieslys, of maak dit in 'n aftreklys, en gebruik marge- of opvullingshulpmiddels om dit die negatiewe spasie te gee wat u benodig.
.showVia data-kenmerke of JavaScript skakel die aftrek-inprop verborge inhoud (aftrekkieslyste) deur die klas op die ouerlysitem te wissel . Daar data-toggle="dropdown"word op die kenmerk staatgemaak vir die sluiting van aftreklyste op 'n toepassingsvlak, so dit is 'n goeie idee om dit altyd te gebruik.
Op touch-geaktiveerde toestelle, die opening van 'n aftreklys voeg leë ( $.noop) mouseoverhanteerders by die onmiddellike kinders van die <body>element. Hierdie weliswaar lelike hack is nodig om 'n eienaardigheid in iOS se gebeurtenisafvaardiging te omseil , wat andersins sou verhoed dat 'n tik op enige plek buite die aftreklys die kode aktiveer wat die aftreklys toemaak. Sodra die aftreklys gesluit is, word hierdie bykomende leë mouseoverhanteerders verwyder.
Via data-eienskappe
Voeg data-toggle="dropdown"by 'n skakel of knoppie om 'n aftreklys te wissel.
Via JavaScript
Bel die aftreklys via JavaScript:
data-toggle="dropdown"steeds benodig
Ongeag of jy jou aftreklys via JavaScript oproep of eerder die data-api gebruik, data-toggle="dropdown"moet altyd teenwoordig wees op die aftreklys se sneller-element.
Opsies
Opsies kan deur data-kenmerke of JavaScript deurgegee word. Vir data-kenmerke, voeg die opsienaam by data-, soos in data-offset="".
Naam
Tik
Verstek
Beskrywing
verreken
nommer | tou | funksie
0
Verskuiwing van die aftreklys relatief tot sy teiken.
Wanneer 'n funksie gebruik word om die offset te bepaal, word dit opgeroep met 'n objek wat die offsetdata as sy eerste argument bevat. Die funksie moet 'n voorwerp met dieselfde struktuur terugstuur. Die snellerelement DOM-nodus word as die tweede argument deurgegee.
Vir meer inligting verwys na Popper.js se offset docs .
flip
boolean
waar
Laat Dropdown toe om te draai in die geval van 'n oorvleueling op die verwysingselement. Vir meer inligting verwys na Popper.js se flip docs .
grens
tou | element
'scrollParent'
Oorloop beperkingsgrens van die aftreklys. Aanvaar die waardes van 'viewport', 'window', 'scrollParent', of 'n HTMLElement-verwysing (slegs JavaScript). Vir meer inligting, verwys na Popper.js se preventOverflow-dokumente .
verwysing
tou | element
'wissel'
Verwysingselement van die aftreklys. Aanvaar die waardes van 'toggle', 'parent', of 'n HTMLElement-verwysing. Vir meer inligting verwys na Popper.js se referenceObject docs .
vertoon
string
'dinamies'
By verstek gebruik ons Popper.js vir dinamiese posisionering. Deaktiveer dit met static.
Let op wanneer boundaryop enige ander waarde as gestel 'scrollParent'is, word die styl position: staticop die .dropdownhouer toegepas.
Metodes
Metode
Beskrywing
$().dropdown('toggle')
Wissel die aftreklys van 'n gegewe navigasiebalk of navigasie met oortjies.
$().dropdown('show')
Wys die aftreklys van 'n gegewe navigasiebalk of navigasie met oortjies.
$().dropdown('hide')
Versteek die aftreklys van 'n gegewe navigasiebalk of navigasie met oortjies.
$().dropdown('update')
Dateer die posisie van 'n element se aftreklys op.
$().dropdown('dispose')
Vernietig 'n element se aftreklys.
Gebeurtenisse
Alle aftrek-gebeurtenisse word afgevuur op die .dropdown-menuse ouerelement en het 'n relatedTargeteienskap, waarvan die waarde die wissel-ankerelement is. hide.bs.dropdownen hidden.bs.dropdowngebeurtenisse het 'n clickEventeienskap (slegs wanneer die oorspronklike gebeurtenistipe click) is wat 'n gebeurtenisobjek vir die klikgebeurtenis bevat.
Gebeurtenis
Beskrywing
show.bs.dropdown
Hierdie gebeurtenis begin onmiddellik wanneer die wys-instansie-metode geroep word.
shown.bs.dropdown
Hierdie gebeurtenis word afgevuur wanneer die aftreklys vir die gebruiker sigbaar gemaak is (sal wag vir CSS-oorgange om te voltooi).
hide.bs.dropdown
Hierdie gebeurtenis word onmiddellik afgevuur wanneer die versteek instansie metode geroep is.
hidden.bs.dropdown
Hierdie gebeurtenis word afgevuur wanneer die aftreklys klaar vir die gebruiker versteek is (sal wag vir CSS-oorgange om te voltooi).