Droim anuas
Scoránaigh forleagain comhthéacsúla chun liostaí nasc agus tuilleadh a thaispeáint leis an mbreiseán anuas Bootstrap.
Forbhreathnú
Is forleagan comhthéacsúla in-scoránaithe iad anuas chun liostaí nasc agus go leor eile a thaispeáint. Déantar iad idirghníomhach leis an mbreiseán JavaScript anuas Bootstrap atá san áireamh. Déantar iad a scoránaigh trí chliceáil, ní trí hovering; is cinneadh deartha d'aon ghnó é seo .
Tógtar dropdowns ar leabharlann tríú páirtí, Popper , a sholáthraíonn suíomh dinimiciúil agus braite radhairc. Bí cinnte popper.min.js a chur san áireamh roimh JavaScript Bootstrap nó úsáid bootstrap.bundle.min.js
/ bootstrap.bundle.js
ina bhfuil Popper. Ní úsáidtear popper chun anuas a shuíomh sna barraí nascleanúna ach mar ní bhíonn gá le suíomh dinimiciúil.
Inrochtaineacht
Sainmhíníonn caighdeán WAI ARIArole="menu"
giuirléid iarbhír , ach baineann sé seo go sonrach le biachláir cosúil le feidhmchláir a spreagann gníomhartha nó feidhmeanna. Ní féidir ach míreanna roghchláir, míreanna roghchláir ticbhosca, míreanna roghchláir cnaipe raidió, grúpaí cnaipí raidió, agus fo-roghchláir a bheith i mbiachláir ARIA .
Ar an láimh eile, tá dropdowns Bootstrap deartha le bheith cineálach agus infheidhme ar éagsúlacht cásanna agus struchtúir marcála. Mar shampla, is féidir anuas a chruthú ina bhfuil ionchuir bhreise agus rialuithe foirme, mar réimsí cuardaigh nó foirmeacha logáil isteach. Ar an ábhar sin, ní bhíonn Bootstrap ag súil le (ná cuireann sé leis go huathoibríoch) le haon cheann de na role
agus na aria-
tréithe a theastaíonn le haghaidh fíor- roghchláir ARIA . Beidh ar na húdair na tréithe níos sainiúla seo a chur san áireamh iad féin.
Mar sin féin, cuireann Bootstrap tacaíocht ionsuite le haghaidh an chuid is mó de na hidirghníomhaíochtaí caighdeánach roghchlár méarchláir, mar shampla an cumas bogadh trí .dropdown-item
eilimintí aonair ag baint úsáide as na heochracha cúrsóra agus an roghchlár a dhúnadh leis an ESCeochair.
Samplaí
Wrap an scoránaigh anuas (do cnaipe nó nasc) agus an roghchlár anuas laistigh de .dropdown
, nó eilimint eile a dhearbhaíonn position: relative;
. Is féidir titim anuas a spreagadh ó <a>
nó <button>
eilimintí a d’oirfeadh níos fearr do do riachtanais ionchasacha. Úsáideann na samplaí a thaispeántar anseo <ul>
eilimintí shéimeantacha nuair is cuí, ach tacaítear le marcáil shaincheaptha.
Cnaipe singil
Is féidir aon singil .btn
a iompú ina scorán anuas le roinnt athruithe marcála. Seo mar is féidir leat iad a chur ag obair le ceachtar den dá <button>
eilimint:
<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>
Agus le <a>
heilimintí:
<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>
Is é an chuid is fearr gur féidir leat é seo a dhéanamh le haon malairt cnaipe, freisin:
<!-- 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>
Cnaipe Scoilte
Ar an gcaoi chéanna, cruthaigh anuas ar chnaipí scoilte a bhfuil an mharcáil chéanna acu beagnach agus anuas ar chnaipí anuas, ach .dropdown-toggle-split
cuir isteach spásáil cheart timpeall ar an gcúram anuas.
Bainimid úsáid as an rang breise seo chun an cothrománach padding
ar gach taobh den airíoch a laghdú 25% agus bainimid an ceann margin-left
a chuirtear leis le haghaidh anuas cnaipe rialta. Coinníonn na hathruithe breise sin an cúramóir dírithe ar an gcnaipe scoilte agus soláthraíonn siad limistéar buailte de mhéid níos oiriúnaí in aice leis an bpríomhchnaipe.
<!-- 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>
Sizing
Oibríonn dropdowns cnaipe le cnaipí de gach méid, lena n-áirítear réamhshocraithe agus cnaipí anuas scoilte.
<!-- 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>
Sleamhnáin dorcha
Diúltaigh do roghchlár anuas níos dorcha chun barra nascleanúna dorcha nó stíl shaincheaptha a mheaitseáil trí chur .dropdown-menu-dark
le ceann atá ann cheana féin .dropdown-menu
. Níl aon athruithe ag teastáil ar na míreanna anuas.
<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>
Agus é a úsáid i navbar:
<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>
Treoracha
RTL
Léirítear treoracha agus Bootstrap in úsáid in RTL, .dropstart
beidh an bhrí le feiceáil ar an taobh deas.
Buail isteach
Truicear roghchláir anuas os cionn eilimintí trí chur .dropup
leis an máthaireilimint.
<!-- 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>
Dropright
Truicear roghchláir anuas ar thaobh na láimhe deise de na heilimintí trí chur .dropend
leis an máthaireilimint.
<!-- 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>
Drochleathach
Truicear roghchláir anuas ar thaobh na láimhe clé de na heilimintí trí chur .dropstart
leis an máthaireilimint.
<!-- 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>
Míreanna roghchláir
Is féidir leat <a>
nó <button>
eilimintí a úsáid mar mhíreanna anuas.
<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>
Is féidir leat míreanna anuas neamh-idirghníomhacha a chruthú le .dropdown-item-text
. Ná bíodh drogall ort tuilleadh stíle a dhéanamh le CSS saincheaptha nó le fóntais téacs.
<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>
Gníomhach
Cuir .active
le míreanna sa roghchlár anuas chun iad a stíliú mar ghníomhach . Chun an staid ghníomhach a chur in iúl do theicneolaíochtaí cúnta, bain úsáid as an aria-current
tréith — ag baint úsáide as an page
luach don leathanach reatha, nó true
don mhír reatha i sraith.
<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>
Faoi mhíchumas
Cuir .disabled
le míreanna sa anuas chun iad a stíliú mar dhaoine díchumasaithe .
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Regular link</a></li>
<li><a class="dropdown-item disabled">Disabled link</a></li>
<li><a class="dropdown-item" href="#">Another link</a></li>
</ul>
Ailíniú roghchlár
De réir réamhshocraithe, tá roghchlár anuas suite go huathoibríoch 100% ón mbarr agus ar an taobh clé dá thuismitheoir. Is féidir leat é seo a athrú leis na ranganna treo .drop*
, ach is féidir leat iad a rialú freisin le ranganna mionathraithe breise.
Cuir .dropdown-menu-end
le a .dropdown-menu
ar dheis ailíniú an roghchlár anuas. Léirítear treoracha nuair a bhíonn Bootstrap in úsáid in RTL, .dropdown-menu-end
beidh an bhrí le feiceáil ar an taobh clé.
<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>
Ailíniú sofhreagrach
Más mian leat ailíniú sofhreagrach a úsáid, díchumasaigh suíomh dinimiciúil tríd an data-bs-display="static"
tréith a chur leis agus úsáid na ranganna éagsúlachta sofhreagracha.
Chun an roghchlár anuas a ailíniú ar dheis.dropdown-menu{-sm|-md|-lg|-xl|-xxl}-end
leis an brisphointe tugtha nó níos mó, cuir .
<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>
Chun an roghchlár anuas a ailíniú ar chlé.dropdown-menu-end
leis an brisphointe tugtha nó níos mó, cuir leis agus .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>
Tabhair faoi deara nach gá duit data-bs-display="static"
tréith a chur le cnaipí anuas sna barraí nascleanúna, ós rud é nach n-úsáidtear Popper i mbarraí nascleanúna.
Roghanna ailínithe
Ag glacadh leis an gcuid is mó de na roghanna a thaispeántar thuas, seo taispeántas doirteal cistine beag de roghanna éagsúla ailíniú anuas in aon áit amháin.
<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>
Ábhar an roghchláir
Ceanntásca
Cuir ceanntásc leis chun rannóga gníomhartha a lipéadú in aon roghchlár anuas.
<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>
Roinnteoirí
Grúpaí ar leith de mhíreanna roghchláir gaolmhara le roinnteoir.
<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>
Téacs
Cuir téacs saorfhoirme ar bith laistigh de roghchlár anuas le téacs agus bain úsáid as fóntais spásála . Tabhair faoi deara gur dócha go mbeidh stíleanna breise méide uait chun leithead an roghchláir a shrianadh.
<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>
Foirmeacha
Cuir foirm laistigh de roghchlár anuas, nó cuir isteach i roghchlár anuas í, agus úsáid fóntais corrlaigh nó stuála chun an spás diúltach atá uait a thabhairt dó.
<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>
Roghanna anuas
Úsáid data-bs-offset
nó data-bs-reference
chun suíomh an anuas a athrú.
<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>
Iompar dlúth uathoibríoch
De réir réamhshocraithe, tá an roghchlár anuas dúnta nuair a chliceáil laistigh nó lasmuigh den roghchlár anuas. Is féidir leat an autoClose
rogha a úsáid chun iompar seo an anuas a athrú.
<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
Athróga
Athróga do gach anuas:
$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($dropdown-link-color, 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;
Athróga don anuas dorcha :
$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;
Athróga do na cúramaí CSS-bhunaithe a léiríonn idirghníomhaíocht anuas:
$caret-width: .3em;
$caret-vertical-align: $caret-width * .85;
$caret-spacing: $caret-width * .85;
Meascáin
Úsáidtear meascáin chun na cúramaí atá bunaithe ar CSS a ghiniúint agus is féidir iad a fháil i 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;
}
}
}
Úsáid
Trí bhíthin tréithe sonraí nó JavaScript, déanann an breiseán anuas inneachar folaithe (roghchláir anuas) a scoránaigh tríd an .show
rang a scoránú ar an tuismitheoir .dropdown-menu
. Bítear ag brath ar an data-bs-toggle="dropdown"
tréith chun roghchláir anuas a dhúnadh ag leibhéal feidhmchláir, mar sin is smaoineamh maith é a úsáid i gcónaí.
mouseover
láimhseálaithe folamh le leanaí láithreacha an
<body>
eilimint. Tá an hack seo atá gránna admhaigh riachtanach chun oibriú timpeall ar
chorraíl i dtoscaireacht imeachta iOS , rud a chuirfeadh cosc ar sconna áit ar bith lasmuigh den anuas as an gcód a dhúnann an anuas a spreagadh. mouseover
Nuair a dhúntar an anuas, baintear na láimhseálaithe
breise folamh
seo.Trí tréithe sonraí
Cuir data-bs-toggle="dropdown"
le nasc nó cnaipe chun anuas a scoránaigh.
<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>
Trí JavaScript
Cuir glaoch ar na anuas trí JavaScript:
var dropdownElementList = [].slice.call(document.querySelectorAll('.dropdown-toggle'))
var dropdownList = dropdownElementList.map(function (dropdownToggleEl) {
return new bootstrap.Dropdown(dropdownToggleEl)
})
data-bs-toggle="dropdown"
fós ag teastáil
Is cuma cé acu a ghlaonn tú ar do anuas trí JavaScript nó ina ionad sin go n-úsáideann tú an data-api, ní mór duit data-bs-toggle="dropdown"
a bheith i láthair i gcónaí ar eilimint truicir an anuas.
Roghanna
Is féidir roghanna a chur ar aghaidh trí tréithe sonraí nó JavaScript. Maidir le tréithe sonraí, cuir ainm na rogha i gceangal le data-bs-
, mar atá i data-bs-offset=""
. Bí cinnte cineál an cháis den ainm rogha a athrú ó camelCase go cás ceibeab agus tú ag dul thar na roghanna trí tréithe sonraí. Mar shampla, in ionad úsáid a bhaint as data-bs-autoClose="false"
, bain úsáid as data-bs-auto-close="false"
.
Ainm | Cineál | Réamhshocrú | Cur síos |
---|---|---|---|
boundary |
teaghrán | eilimint | 'clippingParents' |
Teorainn shrianta thar maoil an roghchláir anuas (ní bhaineann sé seo ach le modhnóir preventOverflow Popper). De réir réamhshocraithe tá sé 'clippingParents' agus is féidir glacadh le tagairt HTMLElement (trí JavaScript amháin). Le haghaidh tuilleadh faisnéise déan tagairt do dhoiciméid detectOverflow Popper . |
reference |
teaghrán | eilimint | réad | 'toggle' |
Gné thagartha den roghchlár anuas. Glacann sé le luachanna 'toggle' , 'parent' tagairt HTMLElement nó réad a sholáthraíonn getBoundingClientRect . Le haghaidh tuilleadh eolais féach ar dhoiciméid cruthaitheoir Popper agus ar dhoiciméid eilimint fhíorúla . |
display |
teaghrán | 'dynamic' |
De réir réamhshocraithe, úsáidimid Popper le haghaidh suíomh dinimiciúil. Díchumasaigh é seo le static . |
offset |
eagar | teaghrán | feidhm | [0, 2] |
Fritháireamh an anuas i gcoibhneas lena sprioc. Is féidir leat teaghrán a chur isteach i tréithe sonraí le luachanna scartha le camóg mar: Nuair a úsáidtear feidhm chun an fhritháireamh a chinneadh, tugtar le réad ina bhfuil an socrúchán popper, an tagairt, agus rects popper mar a chéad argóint. Ritear an nód DOM na heiliminte spreagúla mar an dara argóint. Caithfidh an fheidhm eagar a thabhairt ar ais le dhá uimhir: . Le haghaidh tuilleadh eolais déan tagairt do dhoiciméid fhritháireamh Popper . |
autoClose |
Boole | teaghrán | true |
Cumraigh iompar dúnta uathoibríoch an anuas:
|
popperConfig |
null | réad | feidhm | null |
Chun cumraíocht réamhshocraithe Bootstrap Popper a athrú, féach cumraíocht Popper . Nuair a úsáidtear feidhm chun cumraíocht Popper a chruthú, glaoitear í le réad a bhfuil cumraíocht réamhshocraithe Popper Bootstrap ann. Cabhraíonn sé leat an réamhshocrú a úsáid agus a chumasc le do chumraíocht féin. Caithfidh an fheidhm réad cumraíochta a thabhairt ar ais do Popper. |
Ag baint úsáide as feidhm lepopperConfig
var dropdown = new bootstrap.Dropdown(element, {
popperConfig: function (defaultBsPopperConfig) {
// var newPopperConfig = {...}
// use defaultBsPopperConfig if needed...
// return newPopperConfig
}
})
Modhanna
Modh | Cur síos |
---|---|
toggle |
Scoránaigh an roghchlár anuas de bharra nascleanúna nó nascleanúint tabáilte. |
show |
Taispeáin an roghchlár anuas de bharra nav nó nascleanúint tabáilte. |
hide |
Folaigh an roghchlár anuas de bharra nav nó nascleanúint cluaisín tugtha. |
update |
Nuashonraítear suíomh anuas gné. |
dispose |
Scriosann sé anuas eilimint. (Baintear sonraí stóráilte ar an eilimint DOM) |
getInstance |
Modh statach a ligeann duit an t-aimsear anuas a bhaineann le heilimint DOM a fháil, is féidir leat é a úsáid mar seo:bootstrap.Dropdown.getInstance(element) |
getOrCreateInstance |
Modh statach a thugann sampla anuas a bhaineann le heilimint DOM ar ais nó a chruthaíonn ceann nua ar eagla nach dtosófaí é. Is féidir leat é a úsáid mar seo:bootstrap.Dropdown.getOrCreateInstance(element) |
Imeachtaí
Déantar na himeachtaí anuas go léir a mhúchadh ag an eilimint scoránaithe agus ansin boilgeoga suas. Mar sin is féidir leat éisteoirí imeachtaí a chur leis an .dropdown-menu
eilimint tuismitheora freisin. hide.bs.dropdown
agus hidden.bs.dropdown
tá clickEvent
airí ag imeachtaí (ach amháin nuair is é an cineál bunaidh Imeachta click
) ina bhfuil Cuspóir Imeachta don imeacht cliceáil.
Modh | Cur síos |
---|---|
show.bs.dropdown |
Tinte láithreach nuair a bhíonn an modh ásc taispeána ar a dtugtar. |
shown.bs.dropdown |
Breoslaithe nuair a bheidh an anuas infheicthe don úsáideoir agus aistrithe CSS curtha i gcrích. |
hide.bs.dropdown |
Tinte láithreach nuair a bhíonn an modh áscála seithí glaoite. |
hidden.bs.dropdown |
Breoslaithe nuair a bhíonn an t-íoslódáil críochnaithe á cheilt ón úsáideoir agus aistrithe CSS curtha i gcrích. |
var myDropdown = document.getElementById('myDropdown')
myDropdown.addEventListener('show.bs.dropdown', function () {
// do something...
})