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.
Má tá ár JavaScript á thógáil agat ón bhfoinse, teastaíonnutil.js
.
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é go huathoibríoch) le haon cheann de na tréithe 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.
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" 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>
Agus le <a>
heilimintí:
<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>
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-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>
Cnaipe Scoilte
Ar an gcaoi chéanna, cruthaigh anuasanna de chnaipí scoilte a bhfuil an mharcáil chéanna acu beagnach mar an gcéanna le anuas ar chnaipí singil, 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-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>
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-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>
Treoracha
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-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>
Dropright
Truicear roghchláir anuas ar thaobh na láimhe deise de na heilimintí trí chur .dropright
leis an máthaireilimint.
<!-- 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>
Drochleathach
Truicear roghchláir anuas ar thaobh na láimhe clé de na heilimintí trí chur .dropleft
leis an máthaireilimint.
<!-- 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>
Míreanna roghchláir
Go stairiúil níor mhór naisc a bheith in ábhar an roghchláir anuas , ach ní mar sin atá an cás a thuilleadh le v4. <button>
Anois is féidir leat eilimintí a úsáid go roghnach i do liostaí anuas seachas díreach <a>
s.
<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>
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.
<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>
Gníomhach
Cuir .active
le míreanna sa roghchlár anuas chun iad a stíliú mar ghníomhach .
<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>
Faoi mhíchumas
Cuir .disabled
le míreanna sa anuas chun iad a stíliú mar dhaoine díchumasaithe .
<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>
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. Cuir .dropdown-menu-right
le a .dropdown-menu
ar dheis ailíniú an roghchlár anuas.
<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>
Ailíniú sofhreagrach
Más mian leat ailíniú sofhreagrach a úsáid, díchumasaigh suíomh dinimiciúil tríd an data-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}-right
leis an brisphointe tugtha nó níos mó, cuir .
<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>
Chun an roghchlár anuas a ailíniú ar chlé.dropdown-menu-right
leis an brisphointe tugtha nó níos mó, cuir leis agus .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>
Tabhair faoi deara nach gá duit data-display="static"
tréith a chur le cnaipí anuas sna barraí nascleanúna, mar ní úsáidtear Popper i mbarraí nascleanúna.
Ábhar an roghchláir
Ceanntásca
Cuir ceanntásc leis chun codanna de ghníomhartha a lipéadú in aon roghchlár anuas.
<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>
Roinnteoirí
Grúpaí ar leith de mhíreanna roghchláir gaolmhara le roinnteoir.
<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>
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="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>
Roghanna anuas
Úsáid data-offset
nó data-reference
chun suíomh an anuas a athrú.
<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>
Ú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-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í.
$.noop
)
le leanaí díreacha na heiliminte. 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. Nuair a dhúntar an anuas, baintear na láimhseálaithe
breise folamh
seo.mouseover
<body>
mouseover
Trí tréithe sonraí
Cuir data-toggle="dropdown"
le nasc nó cnaipe chun anuas a scoránaigh.
<div class="dropdown">
<button type="button" data-toggle="dropdown" aria-expanded="false">
Dropdown trigger
</button>
<div class="dropdown-menu">
...
</div>
</div>
Trí JavaScript
Cuir glaoch ar na anuas trí JavaScript:
$('.dropdown-toggle').dropdown()
data-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-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-
, mar atá i data-offset=""
.
Ainm | Cineál | Réamhshocrú | Cur síos |
---|---|---|---|
fhritháireamh | uimhir | teaghrán | feidhm | 0 | Fritháireamh an anuas i gcoibhneas lena sprioc. Nuair a úsáidtear feidhm chun an fritháireamh a chinneadh, tugtar é le réad ina bhfuil na sonraí fritháirimh mar a chéad argóint. Caithfidh an fheidhm rud a thabhairt ar ais leis an struchtúr céanna. Ritear an nód DOM na heiliminte spreagúla mar an dara argóint. Le haghaidh tuilleadh eolais déan tagairt do dhoiciméid fhritháireamh Popper . |
smeach | Boole | fíor | Ceadaigh Dropdown a smeach i gcás forluí ar an eilimint tagartha. Le haghaidh tuilleadh eolais féach ar dhoiciméid smeach Popper . |
teorainn | teaghrán | eilimint | 'scrollParent' | Teorainn shrianta thar maoil an roghchláir anuas. Glacann sé le luachanna 'viewport' , 'window' , 'scrollParent' , nó tagairt HTMLElement (JavaScript amháin). Le haghaidh tuilleadh faisnéise déan tagairt do dhoiciméid preventOverflow Popper . |
tagairt | teaghrán | eilimint | 'scoránaigh' | Gné thagartha den roghchlár anuas. Glacann sé le luachanna 'toggle' , 'parent' , nó tagairt HTMLElement. Le haghaidh tuilleadh eolais déan tagairt do na doiciméid tagarthaObject Popper . |
taispeáint | teaghrán | 'dinimiciúil' | De réir réamhshocraithe, úsáidimid Popper le haghaidh suíomh dinimiciúil. Díchumasaigh é seo le static . |
popperConfig | null | réad | null | Chun cumraíocht réamhshocraithe Bootstrap Popper a athrú, féach cumraíocht Popper |
Tabhair faoi deara nuair boundary
a shocraítear ar aon luach seachas 'scrollParent'
, cuirtear an stíl position: static
i bhfeidhm ar an .dropdown
gcoimeádán.
Modhanna
Modh | Cur síos |
---|---|
$().dropdown('toggle') |
Scoránaigh an roghchlár anuas de bharra nascleanúna nó nascleanúna cluaisíní tugtha. |
$().dropdown('show') |
Taispeáin an roghchlár anuas de bharra nav nó nascleanúint cluaisíní tugtha. |
$().dropdown('hide') |
Folaigh an roghchlár anuas de bharra nav nó nascleanúint cluaisín tugtha. |
$().dropdown('update') |
Nuashonraítear suíomh anuas gné. |
$().dropdown('dispose') |
Scriosann sé anuas eilimint. |
Imeachtaí
Déantar na himeachtaí anuas go léir a bhriseadh ag an .dropdown-menu
máthaireilimint agus tá relatedTarget
maoin acu, arb é a luach an eilimint ancaire scoránaithe. hide.bs.dropdown
agus hidden.bs.dropdown
tá clickEvent
airí ag imeachtaí (nuair is é an cineál imeachta bunaidh amháin click
) a bhfuil Cuspóir Imeachta ann don imeacht cliceáil.
Imeacht | Cur síos |
---|---|
show.bs.dropdown |
Teann an teagmhas seo láithreach nuair a ghlaoitear an modh ásc taispeána. |
shown.bs.dropdown |
Cuirtear an teagmhas seo ar ceal nuair a bhíonn an t-íoslódáil infheicthe don úsáideoir (fanfaidh sé le haistriú CSS, le cur i gcrích). |
hide.bs.dropdown |
Cuirtear an teagmhas seo ar ceal láithreach nuair a ghlaoitear an modh um shampla seithí. |
hidden.bs.dropdown |
Tá an teagmhas seo bréan nuair a bheidh an anuas críochnaithe a bheith i bhfolach ar an úsáideoir (fanacht le haghaidh aistrithe CSS, a chur i gcrích). |
$('#myDropdown').on('show.bs.dropdown', function () {
// do something...
})