Whakataka
Takahurihia nga whakakikorua horopaki mo te whakaatu i nga rarangi hononga me te maha atu me te Bootstrap takaiho monomai.
Tirohanga
Ka takahurihia nga whakahekenga, he whakakikorua horopaki mo te whakaatu i nga rarangi hononga me etahi atu. He mea tauwhitiwhiti me te whakauru Bootstrap takaiho mono JavaScript. Ka takahurihia ma te panui, kaua ma te whakaparo; he whakatau hoahoa tenei .
Ka hangaia nga whakahekenga ki runga i te whare pukapuka tuatoru, Popper , e whakarato ana i te tuunga hihiri me te tirohanga tirohanga. Kia mahara ki te whakauru i te popper.min.js i mua i te JavaScript a Bootstrap me te whakamahi bootstrap.bundle.min.js
/ bootstrap.bundle.js
kei roto Popper. Kare a Popper e whakamahia ki te tuu i nga takaiho i roto i nga pae whakatere ahakoa kaore e hiahiatia te tuunga hihiri.
Mena kei te hanga koe i to maatau JavaScript mai i te puna, meutil.js
.
Te urunga
Ko te paerewa WAI ARIArole="menu"
e tautuhi ana i tetahi widget tuuturu , engari he mea motuhake tenei ki nga tahua-a-tono e whakaohooho ana i nga mahi, i nga mahi ranei. Ka taea e nga tahua ARIA anake te whakauru i nga taonga tahua, nga taonga tahua pouakataki, nga taonga tahua patene reo irirangi, nga roopu paatene reo irirangi, me nga tahua-iti.
Ko nga whakahekenga a Bootstrap, i tetahi atu taha, he mea hoahoa kia whanui me te whai waahi ki nga momo ahuatanga me nga hanganga tohu. Hei tauira, ka taea te hanga i nga takaiho kei roto etahi atu whakaurunga me nga mana puka, penei i nga mara rapu me nga puka takiuru. Mo konei, kaore a Bootstrap e tatari (kaore ano e taapiri aunoa) tetahi o nga role
me nga aria-
huanga e hiahiatia ana mo nga tahua ARIA pono. Me whakauru e nga kaituhi enei huanga ake ake.
Heoi, ka taapirihia e Bootstrap te tautoko i hangaia mo te nuinga o nga taunekeneke tahua papapātuhi paerewa, penei i te kaha ki te neke i roto i nga .dropdown-item
huānga takitahi ma te whakamahi i nga kii pehu me te kati i te tahua me te ESCki.
Tauira
Takaia te takahuri o te takaiho (to patene, hono ranei) me te tahua takaiho ki roto .dropdown
, tetahi atu huānga ranei e whakaatu ana position: relative;
. Ka taea te whakaheke mai i nga huānga <a>
ranei <button>
kia pai ake ai to hiahia.
Patene kotahi
Ka .btn
taea te huri ki te takahuri takahuri me etahi huringa tohu. Anei me pehea e taea ai e koe te mahi me nga <button>
huānga e rua:
<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>
Me nga <a>
huānga:
<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>
Ko te waahanga pai rawa atu ka taea e koe te mahi i tenei me nga momo paatene, ano:
<!-- 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>
Patene wehe
Waihoki, hangahia nga takahanga patene ritua me te tohu rite tonu ki nga takahanga paatene kotahi, engari me te .dropdown-toggle-split
taapiri mo te mokowā tika huri noa i te kaata takaiho.
Ka whakamahia e matou tenei karaehe taapiri hei whakaiti i te whakapae padding
i ia taha o te kareti ma te 25% me te tango margin-left
i te taapiri mo te whakaheke i nga paatene. Ko enei huringa taapiri ka noho tonu te tiaki ki roto i te paatene wehe me te whakarato i tetahi waahanga pai ake i te taha o te paatene matua.
<!-- 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>
Te rahinga
Ka mahi nga patene takaiho me nga paatene o nga rahi katoa, tae atu ki nga paatene takaiho taunoa me te wehea.
<!-- 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>
Nga tohutohu
Whakataka
Keu i nga tahua takaiho ki runga ake ma te taapiri atu .dropup
ki te huānga matua.
<!-- 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>
Whakataka
Keu i nga tahua takaiho kei te taha matau o nga huānga ma te taapiri atu .dropright
ki te huānga matua.
<!-- 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>
Whakataka maui
Keu i nga tahua takaiho kei te taha maui o nga huānga ma te taapiri atu .dropleft
ki te huānga matua.
<!-- 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>
Tuemi tahua
I nga wa o mua ko nga ihirangi tahua takaiho me hono, engari kua kore e pera me te v4. Inaianei ka taea e koe te whakamahi i <button>
nga huānga i roto i o takaiho hei utu <a>
s noa.
<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>
Ka taea hoki e koe te hanga i nga mea taka-iho-kore me te .dropdown-item-text
. Kaua e pai ki te hanga taapiri me te CSS ritenga me nga taputapu tuhinga.
<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>
Hohe
Tāpirihia .active
ki ngā tūemi kei te takaiho hei kāhua hei hohe .
<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>
Kua haua
Tāpirihia .disabled
ki ngā tūemi kei roto i te takaiho hei kāhua hei monokia .
<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>
Tirohanga tahua
Ma te taunoa, ka tuu aunoatia te tahua takaiho 100% mai i runga me te taha maui o tona matua. Tāpirihia .dropdown-menu-right
ki te .dropdown-menu
taha matau tiaarohia te tahua takaiho.
<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>
Tirohanga aro
Mena kei te pirangi koe ki te whakamahi i te tiaroaro urupare, monohia te tuunga hihiri ma te taapiri i te data-display="static"
huanga me te whakamahi i nga karaehe rerekee urupare.
Hei whakahāngai matau i te tahua takaiho ki te waahi wehe, nui ake ranei, taapirihia .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>
Hei whakahāngai i te tahua takaiho ki te taha maui ki te waahi wehe, nui ake ranei, taapiri .dropdown-menu-right
me te .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>
Kia mahara kaore koe e hiahia ki te taapiri i tetahi data-display="static"
huanga ki nga paatene takaiho i roto i nga pae whakatere, i te mea karekau a Popper e whakamahia ki nga pae whakatere.
Ihirangi tahua
Pane
Tāpirihia he pane hei tapanga i nga waahanga o nga hohenga ki tetahi tahua takaiho.
<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>
Kaiwehewehe
Whakawehea nga roopu o nga mea tahua e pa ana ki te wehewehe.
<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>
Kuputuhi
Whakanohoia nga kupu tuhi noa ki roto i te tahua takaiho me nga tuhinga me te whakamahi i nga taputapu mokowhiti . Kia mahara ka hiahia koe ki etahi atu momo rahi hei aukati i te whanui tahua.
<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>
Puka
Hoatu he puka ki roto i te tahua takaiho, waiho ranei ki roto i te tahua takaiho, ka whakamahi i te tawhē, i nga taputapu padding ranei hei hoatu i te waahi kino e hiahia ana koe.
<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>
Kōwhiringa takaiho
Whakamahia data-offset
, data-reference
hei huri ranei i te waahi o te takaiho.
<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>
Whakamahinga
Ma nga huanga raraunga, JavaScript ranei, ka takahurihia e te mono takahuri nga ihirangi huna (nga tahua takaiho) ma te takahuri i te .show
karaehe i runga i te matua .dropdown-menu
. Ka whakawhirinakihia te data-toggle="dropdown"
huanga mo te kati i nga tahua takaiho i te taumata tono, no reira he pai ki te whakamahi i nga wa katoa.
$.noop
)
putua mouseover
ki nga tamariki tonu o te
<body>
huānga. Ko tenei hack tino kino he mea tika ki te mahi i tetahi
quirk i roto i te roopu huihuinga a iOS , ka kore e taea te paopao ki tetahi wahi i waho o te maturuturunga iho mai i te whakaoho i te waehere ka kati i te takaiho. Kia katia te takaiho, ka
mouseover
tangohia enei kaikawe putunga.
Ma nga huanga raraunga
Tāpirihia data-toggle="dropdown"
ki tētahi hono, pātene rānei hei takahuri i te takaiho.
<div class="dropdown">
<button type="button" data-toggle="dropdown" aria-expanded="false">
Dropdown trigger
</button>
<div class="dropdown-menu">
...
</div>
</div>
Ma te JavaScript
Karangatia nga takaiho ma te JavaScript:
$('.dropdown-toggle').dropdown()
data-toggle="dropdown"
hiahiatia tonu
Ahakoa ka karanga koe i to takaiho ma te JavaScript, me whakamahi ranei i te raraunga-api, data-toggle="dropdown"
me noho tonu koe ki te huānga whakaoho o te takaiho.
Kōwhiringa
Ko nga whiringa ka taea te tuku ma nga huanga raraunga, JavaScript ranei. Mo nga huanga raraunga, apitihia te ingoa whiringa ki data-
, penei i te data-offset=""
.
Ingoa | Momo | Taunoa | Whakaahuatanga |
---|---|---|---|
whakatiki | tau | aho | mahi | 0 | Wehenga o te takaiho e pa ana ki tana whaainga. Ina whakamahia he taumahi ki te whakatau i te wehenga, ka karangahia me tetahi ahanoa e mau ana nga raraunga whakaheke hei tohenga tuatahi. Me whakahoki te mahi i tetahi mea he rite tonu te hanganga. Ka tukuna te node DOM huānga whakaoho hei tohenga tuarua. Mo etahi atu korero tirohia nga tuhinga a Popper . |
takahuri | boolean | pono | Whakaaetia te Whakataka ki te huri i te mea kei te inaki te huānga tohutoro. Mo etahi atu korero tirohia te Popper's flip docs . |
rohe | aho | huānga | 'scrollParent' | Te rohe herenga waipuke o te tahua takaiho. Ka whakaae ki nga uara o 'viewport' , 'window' , 'scrollParent' , he tohutoro HTMLElement ranei (JavaScript anake). Mo etahi atu korero tirohia nga tuhinga a Popper preventOverflow . |
tohutoro | aho | huānga | 'takahuri' | Huānga tohutoro o te tahua takaiho. Ka whakaae ki nga uara o 'toggle' , 'parent' , he tohutoro HTMLElement ranei. Mo etahi atu korero tirohia te Popper's referenceObject docs . |
whakaatu | aho | 'he hihiri' | Ma te taunoa, ka whakamahia e matou te Popper mo te tuunga hihiri. Monokia tenei ki te static . |
popperConfig | null | ahanoa | null | Hei huri i te whirihora Popper taunoa a Bootstrap, tirohia te whirihoranga a Popper |
Kia mahara ki te wa boundary
ka tautuhia ki tetahi uara atu i 'scrollParent'
te , ka tukuna te ahua position: static
ki te .dropdown
ipu.
Nga tikanga
Tikanga | Whakaahuatanga |
---|---|
$().dropdown('toggle') |
Ka takahuri i te tahua takaiho o te pae whakaterenga kua tohua, te whakatere ripa ranei. |
$().dropdown('show') |
He whakaatu i te tahua takaiho o te pae whakaterenga kua tohua, te whakatere ripa ranei. |
$().dropdown('hide') |
Hunaia te tahua takaiho o te pae whakaterenga kua tohua, te whakatere ripa ranei. |
$().dropdown('update') |
He whakahōu i te tūnga o te takaiho o te huānga. |
$().dropdown('dispose') |
Ka whakakore i te takaiho o tetahi huānga. |
Nga huihuinga
Ko nga takahanga taka-iho katoa ka panaia ki te .dropdown-menu
huānga matua o te me te whai relatedTarget
rawa, ko tona uara ko te huānga punga takahuri. hide.bs.dropdown
me hidden.bs.dropdown
nga huihuinga he clickEvent
taonga (anake ko te momo takahanga taketake click
) kei roto he Ahanoa Takahanga mo te takahanga paato.
Takahanga | Whakaahuatanga |
---|---|
show.bs.dropdown |
Ka pupuhi tonu tenei takahanga ina ka karangahia te aratuka tauira whakaatu. |
shown.bs.dropdown |
Ka pupuhihia tenei takahanga i te wa i kitea ai te takaiho ki te kaiwhakamahi (ka tatari mo nga whakawhitinga CSS, kia oti). |
hide.bs.dropdown |
Ka puhia tonutia tenei takahanga ina kua karangahia te aratuka huna. |
hidden.bs.dropdown |
Ka pupuhihia tenei kaupapa ka mutu te hunanga o te takaiho mai i te kaiwhakamahi (ka tatari mo nga whakawhitinga CSS, kia oti). |
$('#myDropdown').on('show.bs.dropdown', function () {
// do something...
})