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.
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 anake e nga tahua ARIA 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. Ko nga tauira e whakaatuhia ana i konei ka whakamahi i nga <ul>
huānga oro i nga waahi e tika ana, engari kei te tautokohia te tohu ritenga.
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" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown button
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</div>
Me nga <a>
huānga:
<div class="dropdown">
<a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown link
</a>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</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-bs-toggle="dropdown" aria-expanded="false">
Action
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</div>
Patene wehe
Waihoki, hangahia nga takahanga patene ritua me te tohu rite tonu ki nga takahanga patene kotahi, engari me te .dropdown-toggle-split
taapiri mo te mokowhiti tika huri noa i te kaata takaiho.
Ka whakamahia e matou tenei karaehe taapiri hei whakaiti i te whakapae padding
i tetahi 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 te waahanga tika 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-bs-toggle="dropdown" aria-expanded="false">
<span class="visually-hidden">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</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-bs-toggle="dropdown" aria-expanded="false">
Large button
</button>
<ul class="dropdown-menu">
...
</ul>
</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-bs-toggle="dropdown" aria-expanded="false">
<span class="visually-hidden">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
...
</ul>
</div>
<div class="btn-group">
<button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
Small button
</button>
<ul class="dropdown-menu">
...
</ul>
</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-bs-toggle="dropdown" aria-expanded="false">
<span class="visually-hidden">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
...
</ul>
</div>
Nga takaiho pouri
Whakauruhia ki nga takaiho pouri ake kia taurite ki te pae whakaterenga pouri, ki te ahua ritenga ranei ma te taapiri atu .dropdown-menu-dark
ki tetahi o naianei .dropdown-menu
. Karekau he huringa ki nga mea takaiho.
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton2" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown button
</button>
<ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="dropdownMenuButton2">
<li><a class="dropdown-item active" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</div>
Me te whakamahi i roto i te pae whakatere:
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDarkDropdown" aria-controls="navbarNavDarkDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDarkDropdown">
<ul class="navbar-nav">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDarkDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</a>
<ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="navbarDarkDropdownMenuLink">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
Nga tohutohu
RTL
Ka whakaatahia nga ahunga ina whakamahi i a Bootstrap i RTL, .dropstart
ka puta te tikanga ki te taha matau.
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-bs-toggle="dropdown" aria-expanded="false">
Dropup
</button>
<ul class="dropdown-menu">
<!-- Dropdown menu links -->
</ul>
</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-bs-toggle="dropdown" aria-expanded="false">
<span class="visually-hidden">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<!-- Dropdown menu links -->
</ul>
</div>
Whakataka
Keu i nga tahua takaiho kei te taha matau o nga huānga ma te taapiri atu .dropend
ki te huānga matua.
<!-- Default dropend button -->
<div class="btn-group dropend">
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
Dropright
</button>
<ul class="dropdown-menu">
<!-- Dropdown menu links -->
</ul>
</div>
<!-- Split dropend button -->
<div class="btn-group dropend">
<button type="button" class="btn btn-secondary">
Split dropend
</button>
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
<span class="visually-hidden">Toggle Dropright</span>
</button>
<ul class="dropdown-menu">
<!-- Dropdown menu links -->
</ul>
</div>
Whakataka maui
Whakaotia nga tahua takaiho kei te taha maui o nga huānga ma te taapiri atu .dropstart
ki te huānga matua.
<!-- Default dropstart button -->
<div class="btn-group dropstart">
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
Dropstart
</button>
<ul class="dropdown-menu">
<!-- Dropdown menu links -->
</ul>
</div>
<!-- Split dropstart button -->
<div class="btn-group">
<div class="btn-group dropstart" role="group">
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
<span class="visually-hidden">Toggle Dropstart</span>
</button>
<ul class="dropdown-menu">
<!-- Dropdown menu links -->
</ul>
</div>
<button type="button" class="btn btn-secondary">
Split dropstart
</button>
</div>
Tuemi tahua
Ka taea e koe te whakamahi i nga huānga <a>
ranei <button>
hei taonga takaiho.
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
<li><button class="dropdown-item" type="button">Action</button></li>
<li><button class="dropdown-item" type="button">Another action</button></li>
<li><button class="dropdown-item" type="button">Something else here</button></li>
</ul>
</div>
Ka taea hoki e koe te hanga i nga taonga takaiho-kore me te .dropdown-item-text
. Kaua e pai ki te hanga taapiri me te CSS ritenga me nga taputapu tuhinga.
<ul class="dropdown-menu">
<li><span class="dropdown-item-text">Dropdown item text</span></li>
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
Hohe
Tāpirihia .active
ki ngā tūemi kei te takaiho hei kāhua hei hohe . Hei kawe i te ahua kaha ki nga hangarau awhina, whakamahia te aria-current
huanga — te whakamahi i te page
uara mo te wharangi o naianei, true
mo te taonga o naianei kei roto i te huinga.
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Regular link</a></li>
<li><a class="dropdown-item active" href="#" aria-current="true">Active link</a></li>
<li><a class="dropdown-item" href="#">Another link</a></li>
</ul>
Kua haua
Tāpirihia .disabled
ki ngā tūemi kei roto i te takaiho hei kāhua hei monokia .
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Regular link</a></li>
<li><a class="dropdown-item disabled" href="#" tabindex="-1" aria-disabled="true">Disabled link</a></li>
<li><a class="dropdown-item" href="#">Another link</a></li>
</ul>
Tirohanga tahua
Ma te taunoa, ka tuu aunoa he tahua takaiho 100% mai i runga me te taha maui o tona matua. Ka taea e koe te whakarereke me nga .drop*
karaehe ahunga, engari ka taea ano e koe te whakahaere me etahi atu karaehe whakarereke.
Tāpirihia .dropdown-menu-end
ki te .dropdown-menu
taha matau tiaarohia te tahua takaiho. Ka whakaatahia nga ahunga ina whakamahi i a Bootstrap i RTL, .dropdown-menu-end
ka puta te tikanga ki te taha maui.
<div class="btn-group">
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
Right-aligned menu example
</button>
<ul class="dropdown-menu dropdown-menu-end">
<li><button class="dropdown-item" type="button">Action</button></li>
<li><button class="dropdown-item" type="button">Another action</button></li>
<li><button class="dropdown-item" type="button">Something else here</button></li>
</ul>
</div>
Tirohanga aro
Mena kei te pirangi koe ki te whakamahi i te tirohanga urupare, monohia te tuunga hihiri ma te taapiri i te data-bs-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|-xxl}-end
.
<div class="btn-group">
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
Left-aligned but right aligned when large screen
</button>
<ul class="dropdown-menu dropdown-menu-lg-end">
<li><button class="dropdown-item" type="button">Action</button></li>
<li><button class="dropdown-item" type="button">Another action</button></li>
<li><button class="dropdown-item" type="button">Something else here</button></li>
</ul>
</div>
Hei whakahāngai i te tahua takaiho ki te taha maui ki te waahi wehe, nui ake ranei, taapiri .dropdown-menu-end
me te .dropdown-menu{-sm|-md|-lg|-xl|-xxl}-start
.
<div class="btn-group">
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
Right-aligned but left aligned when large screen
</button>
<ul class="dropdown-menu dropdown-menu-end dropdown-menu-lg-start">
<li><button class="dropdown-item" type="button">Action</button></li>
<li><button class="dropdown-item" type="button">Another action</button></li>
<li><button class="dropdown-item" type="button">Something else here</button></li>
</ul>
</div>
Kia mahara kaore koe e hiahia ki te taapiri i tetahi data-bs-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.
Kōwhiringa tīaroaro
Ma te tango i te nuinga o nga whiringa e whakaatuhia ana i runga ake nei, koinei te whakaaturanga totohu kihini iti o nga momo whiringa tirohanga whakararo i te waahi kotahi.
<div class="btn-group">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
</ul>
</div>
<div class="btn-group">
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
Right-aligned menu
</button>
<ul class="dropdown-menu dropdown-menu-end">
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
</ul>
</div>
<div class="btn-group">
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
Left-aligned, right-aligned lg
</button>
<ul class="dropdown-menu dropdown-menu-lg-end">
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
</ul>
</div>
<div class="btn-group">
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
Right-aligned, left-aligned lg
</button>
<ul class="dropdown-menu dropdown-menu-end dropdown-menu-lg-start">
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
</ul>
</div>
<div class="btn-group dropstart">
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
Dropstart
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
</ul>
</div>
<div class="btn-group dropend">
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
Dropend
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
</ul>
</div>
<div class="btn-group dropup">
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
Dropup
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
</ul>
</div>
Ihirangi tahua
Pane
Tāpirihia he pane hei tapanga i nga waahanga o nga hohenga ki tetahi tahua takaiho.
<ul class="dropdown-menu">
<li><h6 class="dropdown-header">Dropdown header</h6></li>
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
</ul>
Kaiwehewehe
Whakawehea nga roopu o nga mea tahua e pa ana ki te wehewehe.
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
Kuputuhi
Whakanohoia he kupu tuhi noa ki roto i te tahua takaiho me te tuhinga me te whakamahi taputapu mokowhiti . Kia mahara ka hiahia koe ki etahi atu momo rahinga 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
Tuhia 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="mb-3">
<label for="exampleDropdownFormEmail1" class="form-label">Email address</label>
<input type="email" class="form-control" id="exampleDropdownFormEmail1" placeholder="[email protected]">
</div>
<div class="mb-3">
<label for="exampleDropdownFormPassword1" class="form-label">Password</label>
<input type="password" class="form-control" id="exampleDropdownFormPassword1" placeholder="Password">
</div>
<div class="mb-3">
<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="mb-3">
<label for="exampleDropdownFormEmail2" class="form-label">Email address</label>
<input type="email" class="form-control" id="exampleDropdownFormEmail2" placeholder="[email protected]">
</div>
<div class="mb-3">
<label for="exampleDropdownFormPassword2" class="form-label">Password</label>
<input type="password" class="form-control" id="exampleDropdownFormPassword2" placeholder="Password">
</div>
<div class="mb-3">
<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-bs-offset
, data-bs-reference
hei huri ranei i te waahi o te takaiho.
<div class="d-flex">
<div class="dropdown me-1">
<button type="button" class="btn btn-secondary dropdown-toggle" id="dropdownMenuOffset" data-bs-toggle="dropdown" aria-expanded="false" data-bs-offset="10,20">
Offset
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuOffset">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</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" id="dropdownMenuReference" data-bs-toggle="dropdown" aria-expanded="false" data-bs-reference="parent">
<span class="visually-hidden">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuReference">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</div>
</div>
Te whanonga kati aunoa
Ma te taunoa, ka katia te tahua takaiho ina pao ana ki roto, ki waho ranei o te tahua takaiho. Ka taea e koe te whakamahi i te autoClose
kōwhiringa ki te huri i tēnei whanonga o te takaiho.
<div class="btn-group">
<button class="btn btn-secondary dropdown-toggle" type="button" id="defaultDropdown" data-bs-toggle="dropdown" data-bs-auto-close="true" aria-expanded="false">
Default dropdown
</button>
<ul class="dropdown-menu" aria-labelledby="defaultDropdown">
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
</ul>
</div>
<div class="btn-group">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuClickableOutside" data-bs-toggle="dropdown" data-bs-auto-close="inside" aria-expanded="false">
Clickable outside
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuClickableOutside">
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
</ul>
</div>
<div class="btn-group">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuClickableInside" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
Clickable inside
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuClickableInside">
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
</ul>
</div>
<div class="btn-group">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuClickable" data-bs-toggle="dropdown" data-bs-auto-close="false" aria-expanded="false">
Manual close
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuClickable">
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
</ul>
</div>
Sass
Taurangi
Taurangi mo nga takaiho katoa:
$dropdown-min-width: 10rem;
$dropdown-padding-x: 0;
$dropdown-padding-y: .5rem;
$dropdown-spacer: .125rem;
$dropdown-font-size: $font-size-base;
$dropdown-color: $body-color;
$dropdown-bg: $white;
$dropdown-border-color: rgba($black, .15);
$dropdown-border-radius: $border-radius;
$dropdown-border-width: $border-width;
$dropdown-inner-border-radius: subtract($dropdown-border-radius, $dropdown-border-width);
$dropdown-divider-bg: $dropdown-border-color;
$dropdown-divider-margin-y: $spacer * .5;
$dropdown-box-shadow: $box-shadow;
$dropdown-link-color: $gray-900;
$dropdown-link-hover-color: shade-color($gray-900, 10%);
$dropdown-link-hover-bg: $gray-200;
$dropdown-link-active-color: $component-active-color;
$dropdown-link-active-bg: $component-active-bg;
$dropdown-link-disabled-color: $gray-500;
$dropdown-item-padding-y: $spacer * .25;
$dropdown-item-padding-x: $spacer;
$dropdown-header-color: $gray-600;
$dropdown-header-padding: $dropdown-padding-y $dropdown-item-padding-x;
Taurangi mo te takataka pouri :
$dropdown-dark-color: $gray-300;
$dropdown-dark-bg: $gray-800;
$dropdown-dark-border-color: $dropdown-border-color;
$dropdown-dark-divider-bg: $dropdown-divider-bg;
$dropdown-dark-box-shadow: null;
$dropdown-dark-link-color: $dropdown-dark-color;
$dropdown-dark-link-hover-color: $white;
$dropdown-dark-link-hover-bg: rgba($white, .15);
$dropdown-dark-link-active-color: $dropdown-link-active-color;
$dropdown-dark-link-active-bg: $dropdown-link-active-bg;
$dropdown-dark-link-disabled-color: $gray-500;
$dropdown-dark-header-color: $gray-500;
Ko nga taurangi mo nga tohu-a-CSS e tohu ana i te tauwhitiwhitinga o te takaiho:
$caret-width: .3em;
$caret-vertical-align: $caret-width * .85;
$caret-spacing: $caret-width * .85;
Whakaranu
Ka whakamahia nga Mixins ki te whakaputa i nga tohu-a-CSS ka kitea i roto i te scss/mixins/_caret.scss
.
@mixin caret-down {
border-top: $caret-width solid;
border-right: $caret-width solid transparent;
border-bottom: 0;
border-left: $caret-width solid transparent;
}
@mixin caret-up {
border-top: 0;
border-right: $caret-width solid transparent;
border-bottom: $caret-width solid;
border-left: $caret-width solid transparent;
}
@mixin caret-end {
border-top: $caret-width solid transparent;
border-right: 0;
border-bottom: $caret-width solid transparent;
border-left: $caret-width solid;
}
@mixin caret-start {
border-top: $caret-width solid transparent;
border-right: $caret-width solid;
border-bottom: $caret-width solid transparent;
}
@mixin caret($direction: down) {
@if $enable-caret {
&::after {
display: inline-block;
margin-left: $caret-spacing;
vertical-align: $caret-vertical-align;
content: "";
@if $direction == down {
@include caret-down();
} @else if $direction == up {
@include caret-up();
} @else if $direction == end {
@include caret-end();
}
}
@if $direction == start {
&::after {
display: none;
}
&::before {
display: inline-block;
margin-right: $caret-spacing;
vertical-align: $caret-vertical-align;
content: "";
@include caret-start();
}
}
&:empty::after {
margin-left: 0;
}
}
}
Whakamahinga
Ma nga huanga raraunga, JavaScript ranei, ka takahurihia e te mono takahuri nga ihirangi huna (nga tahua takaiho) ma te huri i te .show
karaehe i runga i te matua .dropdown-menu
. Ka whakawhirinakihia te data-bs-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.
mouseover
taapirihia nga kaikawe putunga 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. Ina katia te takaiho, ka
mouseover
tangohia enei kaihautu putunga.
Ma nga huanga raraunga
Tāpirihia data-bs-toggle="dropdown"
ki tētahi hono, pātene rānei hei takahuri i te takaiho.
<div class="dropdown">
<button id="dLabel" type="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown trigger
</button>
<ul class="dropdown-menu" aria-labelledby="dLabel">
...
</ul>
</div>
Ma te JavaScript
Karangatia nga takaiho ma te JavaScript:
var dropdownElementList = [].slice.call(document.querySelectorAll('.dropdown-toggle'))
var dropdownList = dropdownElementList.map(function (dropdownToggleEl) {
return new bootstrap.Dropdown(dropdownToggleEl)
})
data-bs-toggle="dropdown"
hiahiatia tonu
Ahakoa ka karanga koe i to takaiho ma te JavaScript, me whakamahi ranei i te raraunga-api, data-bs-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-bs-
, penei i te data-bs-offset=""
. Kia mohio koe ki te huri i te momo keehi o te ingoa whiringa mai i camelCase ki te kebab-case ka tukuna nga whiringa ma nga huanga raraunga. Hei tauira, hei utu mo te whakamahi data-bs-autoClose="false"
, whakamahia data-bs-auto-close="false"
.
Ingoa | Momo | Taunoa | Whakaahuatanga |
---|---|---|---|
boundary |
aho | huānga | 'clippingParents' |
Te rohe herenga puhake o te tahua takaiho (e pa ana ki te whakakē aukatiOverflow a Popper anake). Ma te taunoa 'clippingParents' ka taea te whakaae ki tetahi tohutoro HTMLElement (ma JavaScript anake). Mo etahi atu korero tirohia nga tuhinga detectOverflow a Popper . |
reference |
aho | huānga | ahanoa | 'toggle' |
Huānga tohutoro o te tahua takaiho. Ka whakaae ki nga uara o te 'toggle' , 'parent' , he tohutoro HTMLElement, he ahanoa ranei e whakarato ana getBoundingClientRect . Mo etahi atu korero tirohia nga tuhinga kaihanga a Popper me nga tuhinga huānga mariko . |
display |
aho | 'dynamic' |
Ma te taunoa, ka whakamahia e matou te Popper mo te tuunga hihiri. Monokia tenei ki te static . |
offset |
huinga | aho | mahi | [0, 2] |
Wehenga o te takaiho e pa ana ki tana whaainga. Ka taea e koe te tuku aho ki nga huanga raraunga me nga uara wehea piko penei: Ina whakamahia he taumahi ki te whakatau i te wehenga, ka karangahia me tetahi mea kei roto te tuunga popper, te tohutoro, me te popper rects hei tohenga tuatahi. Ka tukuna te node DOM huānga whakaoho hei tohenga tuarua. Me whakahoki te taumahi i te huānga me nga tau e rua: . Mo etahi atu korero tirohia nga tuhinga a Popper . |
autoClose |
boolean | aho | true |
Whirihorahia te whanonga kati aunoa o te takaiho:
|
popperConfig |
null | ahanoa | mahi | null |
Hei huri i te whirihora Popper taunoa a Bootstrap, tirohia te whirihoranga a Popper . Ina whakamahia he mahi hei hanga i te whirihoranga Popper, ka karangahia me tetahi mea kei roto te whirihoranga Popper taunoa a Bootstrap. Ka awhina koe ki te whakamahi me te hanumi i te taunoa me to ake whirihoranga. Me whakahoki te mahi i tetahi ahanoa whirihoranga mo Popper. |
Te whakamahi mahi mepopperConfig
var dropdown = new bootstrap.Dropdown(element, {
popperConfig: function (defaultBsPopperConfig) {
// var newPopperConfig = {...}
// use defaultBsPopperConfig if needed...
// return newPopperConfig
}
})
Nga tikanga
Tikanga | Whakaahuatanga |
---|---|
toggle |
Ka takahuri i te tahua takaiho o te pae whakaterenga kua tohua, te whakatere ripa ranei. |
show |
He whakaatu i te tahua takaiho o te pae whakaterenga kua tohua, te whakatere ripa ranei. |
hide |
Hunaia te tahua takaiho o te pae whakaterenga kua tohua, te whakatere ripa ranei. |
update |
He whakahōu i te tūnga o te takaiho o te huānga. |
dispose |
Ka whakakore i te takaiho o tetahi huānga. (Tangohia ai nga raraunga rongoa i te huānga DOM) |
getInstance |
Tikanga pateko e taea ai e koe te tiki i te tauira takaiho e hono ana ki tetahi huānga DOM, ka taea e koe te whakamahi penei:bootstrap.Dropdown.getInstance(element) |
getOrCreateInstance |
Aratuka pateko e whakahoki mai ana i te takahanga takaiho e hono ana ki tetahi huānga DOM, ka hanga ranei i tetahi mea hou mena kaore i arawhitia. Ka taea e koe te whakamahi penei:bootstrap.Dropdown.getOrCreateInstance(element) |
Nga huihuinga
Ka pupuhihia nga takahanga taka-iho katoa ki te huānga takahuri, ka mirumiru ake. Na ka taea ano e koe te taapiri i nga kaiwhakarongo takahanga i runga i te .dropdown-menu
huānga matua '. 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.
Tikanga | Whakaahuatanga |
---|---|
show.bs.dropdown |
Ka ahi tonu ina karangahia te aratuka tauira whakaatu. |
shown.bs.dropdown |
I puhia ina kitea te takaiho ki te kaiwhakamahi me nga whakawhitinga CSS kua oti. |
hide.bs.dropdown |
Ka ahi tonu ina karangahia te aratuka huna. |
hidden.bs.dropdown |
I puhia ina mutu te hunanga o te takaiho mai i te kaiwhakamahi me nga whakawhitinga CSS kua oti. |
var myDropdown = document.getElementById('myDropdown')
myDropdown.addEventListener('show.bs.dropdown', function () {
// do something...
})