Bi pêveka daketinê ya Bootstrap re ji bo nîşandana navnîşên lînkan û hêj bêtir pêveberên kontekstê biguherînin.
Têgihiştinî
Dropdown ji bo xuyangkirina navnîşên lînkan û hêj bêtir veguheztin, serpêhatiyên kontekstê ne. Ew bi pêveka dakêşana JavaScript-ê ya Bootstrap-ê ve girêdayî têne çêkirin. Ew bi tikandinê têne guheztin, ne bi hejandinê; ev biryarek sêwiranê ye .
Dropdowns li ser pirtûkxaneyek partiya sêyemîn, Popper.js , têne çêkirin, ku pozîsyona dînamîkî û vedîtina dîmenderê peyda dike. Pê bawer bin ku berî JavaScript-a Bootstrap-ê popper.min.js têxinbootstrap.bundle.min.js nav xwe an jî bikar bînin / bootstrap.bundle.jsya ku Popper.js heye. Popper.js ji bo danîna dakêşanan di navbaran de nayê bikar anîn lê ji ber ku pozîsyona dînamîk ne hewce ye.
Heke hûn JavaScript-a me ji çavkaniyê ava dikin, ew hewce dikeutil.js .
Gihîştina
Standarda WAI ARIArole="menu" widgetek rastîn diyar dike , lê ev taybetî ji bo pêşekên wekî serîlêdanê yên ku kiryar an fonksiyonan didin destpêkirin e. Pêşekên ARIA tenê dikarin hêmanên menu, hêmanên menuya qutiya kontrolê, hêmanên menuya bişkojka radyoyê, komên bişkojka radyoyê û jêr-pêşekan hebin.
Ji hêla din ve, dakêşanên Bootstrap têne sêwirandin ku ji bo cûrbecûr rewş û strukturên nîşankirinê gelemperî bin û werin sepandin. Mînakî, gengaz e ku meriv pelên dakêşan biafirîne ku têketinên zêde û kontrolên formê dihewîne, wek qadên lêgerînê an formên têketinê. Ji ber vê yekê, Bootstrap ne li bendê ye (ne jî bixweber lê zêde bike) yek ji wan roleû aria-taybetmendiyên ku ji bo pêşekên ARIA -ya rastîn hewce ne. Nivîskar neçar in ku van taybetmendiyên taybetî bi xwe vekin.
Lêbelê, Bootstrap ji bo piraniya danûstendinên menuya klavyeyê yên standard piştgirîya çêkirî lê zêde dike, wek mînak şiyana ku meriv di nav .dropdown-itemhêmanên kesane de bi karanîna bişkokên pîvazê bigere û menuyê bi ESCbişkojkê bigire.
Examples
Veguheztina dakêşanê (bişkojka xwe an girêdana xwe) û menuya dakêşanê di hundurê de .dropdown, an hêmanek din a ku diyar dike, bipêçin position: relative;. Dropdown dikarin ji <a>an <button>hêmanan werin avêtin da ku çêtir hewcedariyên weyên potansiyel bicîh bînin.
Bişkojka yekane
Her yek yek .btndikare bi hin guhertinên nîşankirinê ve were veguheztinek dakêşan. Li vir çawa hûn dikarin wan bi her <button>hêmanan re bixebitin:
Bi heman rengî, bişkojkên veqetandî bi hema hema bi heman nîşankirinê wekî dakêşanên yek bişkokê, lê bi lêzêdekirina ji .dropdown-toggle-splitbo cîhê rast li dora kêşeya dakêşanê biafirînin.
Em vê pola zêde bikar tînin da ku horizontî paddingli her du aliyên xêzikê% 25 kêm bikin û ya margin-leftku ji bo daxistina bişkojka birêkûpêk hatî zêdekirin jêbirin. Van guheztinên zêde hêlînê di bişkoka dabeşkirinê de navend dihêlin û li kêleka bişkoka sereke deverek lêdanek bi guncantir peyda dikin.
Ji hêla dîrokî ve naveroka menuya dakêşanê pêdivî bû ku zencîre bin, lê ew êdî bi v4 re ne wusa ye. Naha hûn dikarin vebijarkî <button>li şûna s-yê hêmanan di pelikên xwe de bikar bînin <a>.
Her weha hûn dikarin bi .dropdown-item-text. Dilxwazin ku bi CSS-ya xwerû an karûbarên nivîsê bêtir şêwaz bikin.
Ji hêla xwerû ve, pêşekek dakêşanê bixweber 100% ji jor û li milê çepê yê dêûbavê xwe tê danîn. Pêşeka daketinê .dropdown-menu-rightli a .dropdown-menuber bi rastê ve zêde bikin.
Serê xwe! Dropdowns bi saya Popper.js têne cîh kirin (ji bilî gava ku ew di navbarekê de ne).
Lihevhatina bersivdar
Heke hûn dixwazin hevrêziya bersivdar bikar bînin, bi lêzêdekirina taybetmendiyê pozîsyona dînamîkî neçalak bikin data-display="static"û çînên guheztina bersivdar bikar bînin.
Ji bo ku menuya dakêşanê ya rast.dropdown-menu{-sm|-md|-lg|-xl}-right bi xala veqetandinê ya diyarkirî an mezintir hevrêz bikin, lê zêde bikin.
Ji bo ku menuya daketinê ya çepê bi xala veqetînê ya diyarkirî an mezintir re hevrêz bikin, lê zêde bikin .dropdown-menu-rightû .dropdown-menu{-sm|-md|-lg|-xl}-left.
Bala xwe bidinê ku hûn ne hewce ne ku data-display="static"taybetmendiyek li bişkokên dakêşanê yên di navbaran de zêde bikin, ji ber ku Popper.js di navbaran de nayê bikar anîn.
Naveroka menu
Headers
Sernavek lê zêde bikin da ku beşên çalakiyan di her menuya dakêşanê de nîşan bikin.
Her metnek belaş di nav pêşekek dakêşanê de bi nivîsê ve bi cîh bikin û karûbarên valakirinê bikar bînin . Bala xwe bidinê ku hûn ê muhtemelen hewceyê şêwazên mezinbûnê yên din bin da ku firehiya menuyê asteng bikin.
Hin metnek mînakek ku di nav menuya dakêşanê de belaş diherike.
Û ev bêtir nivîsa nimûne ye.
Forms
Formek di nav pêşekek dakêşanê de bixin, an jî wê bikin menuyek dakêşanê, û karûbarên marjînal an peldankê bikar bînin da ku cîhê neyînî ya ku hûn hewce dikin bidin wê.
Bi riya taybetmendiyên daneyê an JavaScriptê, pêveka dakêşanê naveroka veşartî (menekên daketî) bi guheztina .showpola li ser xala navnîşa dêûbav diguhezîne. Taybetmendî data-toggle="dropdown"ji bo girtina pêşekên dakêşanê di astek serîlêdanê de pê ve girêdayî ye, ji ber vê yekê ramanek baş e ku hûn her gav wê bikar bînin.
Li ser cîhazên pêça-çalakkirî, vekirina peldankek hilgirên vala ( $.noop) mouseoverli zarokên tavilê yên <body>hêmanê zêde dike. Ev hacka bêkêmasî ya nebaş pêdivî ye ku meriv di delegasyona bûyera iOS-ê de li dor xeletiyek bixebite , ku wekî din rê li ber tepek li cîhek derveyî dakêşanê bigire ku koda ku dakêşanê digire dest pê bike. Dema ku dakêşandin girtî be, ev mouseoverrêkarên vala yên zêde têne rakirin.
Bi taybetmendiyên daneyê
Ji data-toggle="dropdown"bo guheztina peldankekê li lînkek an bişkokek zêde bikin.
Bi JavaScript
Bi navgîniya JavaScript-ê ve bang bikin:
data-toggle="dropdown"hîn jî pêwîst e
Her çiqas hûn bi JavaScript-ê ve gazî daketina xwe bikin an li şûna data-api-ê bikar bînin, data-toggle="dropdown"pêdivî ye ku her gav li ser hêmana dakêşanê hebe.
Vebijêrk
Vebijark dikarin bi taybetmendiyên daneyan an JavaScriptê ve werin derbas kirin. Ji bo taybetmendiyên daneyê, navê vebijarkê lê zêde bikin data-, wekî di data-offset="".
Sînorê astengiya zêde ya pêşeka daketî. Nirxên 'viewport', 'window', 'scrollParent', an referansek HTMLElement (tenê JavaScript) qebûl dike. Ji bo bêtir agahdarî serî li belgeyên preventOverflow ya Popper.js bidin .
balkêşî
string | pêve
'veguhertin'
Hêmana referansê ya menuya dakêşanê. Nirxên 'toggle', 'parent', an referansek HTMLElement qebûl dike. Ji bo bêtir agahdarî serî li Popper.js's referenceObject docs .
pêşkêşî
ben
'dînamîk'
Bi xwerû, em Popper.js ji bo pozîsyona dînamîkî bikar tînin. Vê bi neçalak bike static.
Nîşe dema boundaryku ji bilî nirxek din were danîn 'scrollParent', şêwaz li konteynerê position: statictê sepandin ..dropdown
Methods
Awa
Terîf
$().dropdown('toggle')
Menûya dakêşanê ya navbarek diyarkirî an navîgasyonek tabloyê vedike.
$().dropdown('show')
Menûya dakêşanê ya navbarek diyarkirî an navîgasyonek tabelê nîşan dide.
$().dropdown('hide')
Menûya dakêşana navbarek diyarkirî an navîgasyonek tablo vedişêre.
$().dropdown('update')
Positiona dakêşana hêmanek nûve dike.
$().dropdown('dispose')
Daxistina elementek hilweşîne.
Events
Hemî bûyerên dakêşanê li .dropdown-menuhêmana dêûbavê '' têne avêtin û xwedan relatedTargettaybetmendiyek e, ku nirxa wê hêmana lengerê ya guhezbar e. hide.bs.dropdownû hidden.bs.dropdownbûyeran clickEventtaybetmendiyek heye (tenê gava ku celebê bûyera orîjînal be click) ku ji bo bûyera klîk Tiştek Bûyerê dihewîne.
Bûyer
Terîf
show.bs.dropdown
Dema ku rêbaza mînaka nîşandanê tê gazî kirin, ev bûyer tavilê dişewite.
shown.bs.dropdown
Dema ku dakêşana ji bikarhênerê re xuya bibe (dê li benda veguheztinên CSS-ê bisekine, biqede), ev bûyer tê şewitandin.
hide.bs.dropdown
Dema ku rêbaza mînaka veşartinê hate gazî kirin, ev bûyer tavilê tê şewitandin.
hidden.bs.dropdown
Ev bûyer dema ku dakêşana ku ji bikarhênerê veşartî xilas bû (dê li benda veguheztinên CSS-ê bisekine, biqede) tê şewitandin.