Cwympiadau
Toglo troshaenau cyd-destunol ar gyfer arddangos rhestrau o ddolenni a mwy gyda'r gwymplen Bootstrap.
Trosolwg
Mae cwymplenni yn droshaenau cyd-destunol y gellir eu toglo ar gyfer arddangos rhestrau o ddolenni a mwy. Fe'u gwneir yn rhyngweithiol gyda'r ategyn JavaScript cwymplen Bootstrap sydd wedi'i gynnwys. Cânt eu toglo trwy glicio, nid trwy hofran; penderfyniad dylunio bwriadol yw hwn .
Mae cwymplenni wedi'u hadeiladu ar lyfrgell trydydd parti, Popper , sy'n darparu lleoliad deinamig a chanfod golygfannau. Gwnewch yn siŵr eich bod yn cynnwys popper.min.js cyn JavaScript Bootstrap neu defnyddiwch bootstrap.bundle.min.js
/ bootstrap.bundle.js
sy'n cynnwys Popper. Nid yw popper yn cael ei ddefnyddio i osod cwymplenni mewn barrau llywio gan nad oes angen lleoli dynamig.
Os ydych chi'n adeiladu ein JavaScript o'r ffynhonnell, mae angenutil.js
.
Hygyrchedd
Mae safon WAI ARIA yn diffinio role="menu"
teclyn gwirioneddol , ond mae hyn yn benodol i fwydlenni tebyg i gymhwysiad sy'n sbarduno gweithredoedd neu swyddogaethau. Gall bwydlenni ARIA gynnwys eitemau dewislen yn unig, eitemau dewislen blwch ticio, eitemau dewislen botwm radio, grwpiau botwm radio, ac is-ddewislenni.
Ar y llaw arall, mae cwymplenni Bootstrap wedi'u cynllunio i fod yn generig ac yn berthnasol i amrywiaeth o sefyllfaoedd a strwythurau marcio. Er enghraifft, mae'n bosibl creu cwymplenni sy'n cynnwys mewnbynnau ychwanegol a rheolyddion ffurflen, megis meysydd chwilio neu ffurflenni mewngofnodi. Am y rheswm hwn, nid yw Bootstrap yn disgwyl (nac yn ychwanegu'n awtomatig) unrhyw un o'r nodweddion role
a'r aria-
priodoleddau sydd eu hangen ar gyfer gwir fwydlenni ARIA . Bydd yn rhaid i awduron gynnwys y nodweddion mwy penodol hyn eu hunain.
Fodd bynnag, mae Bootstrap yn ychwanegu cefnogaeth adeiledig ar gyfer y rhan fwyaf o ryngweithiadau dewislen bysellfwrdd safonol, megis y gallu i symud trwy .dropdown-item
elfennau unigol gan ddefnyddio'r bysellau cyrchwr a chau'r ddewislen gyda'r ESCallwedd.
Enghreifftiau
Lapiwch dogl y gwymplen (eich botwm neu ddolen) a'r gwymplen o fewn .dropdown
, neu elfen arall sy'n datgan position: relative;
. Gall cwympiadau gael eu sbarduno o <a>
neu <button>
elfennau i gyd-fynd yn well â'ch anghenion posibl.
Botwm sengl
Gellir troi unrhyw sengl .btn
yn dogl cwymplen gyda rhai newidiadau marcio. Dyma sut y gallwch chi eu rhoi ar waith gyda'r naill <button>
elfen neu'r llall:
<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>
A chydag <a>
elfennau:
<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>
Y rhan orau yw y gallwch chi wneud hyn gydag unrhyw amrywiad botwm hefyd:
<!-- 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>
Botwm hollti
Yn yr un modd, crëwch gwymplenni botwm hollt gyda bron yr un marcio i fyny â'r cwymplenni botwm sengl, ond gan ychwanegu .dropdown-toggle-split
bylchau priodol o amgylch y cwymplen.
Rydym yn defnyddio'r dosbarth ychwanegol hwn i leihau'r llorweddol padding
ar y naill ochr a'r llall i'r caret 25% a chael gwared ar yr margin-left
un sy'n cael ei ychwanegu ar gyfer cwympiadau botwm rheolaidd. Mae'r newidiadau ychwanegol hynny yn cadw'r caret wedi'i ganoli yn y botwm hollti ac yn darparu ardal daro o faint mwy priodol wrth ymyl y prif botwm.
<!-- 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>
Maintioli
Mae cwymplenni botwm yn gweithio gyda botymau o bob maint, gan gynnwys botymau cwymplen rhagosodedig a hollt.
<!-- 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>
Cyfarwyddiadau
Dropup
Sbardun cwymplenni uwchben elfennau trwy ychwanegu .dropup
at y rhiant elfen.
<!-- 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
Sbardun dewislenni ar ochr dde'r elfennau drwy ychwanegu .dropright
at y rhiant elfen.
<!-- 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>
Defnyn
Sbardun dewislenni ar ochr chwith yr elfennau drwy ychwanegu .dropleft
at y rhiant elfen.
<!-- 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>
Eitemau ar y ddewislen
Yn hanesyddol roedd yn rhaid i gynnwys y gwymplen fod yn ddolenni, ond nid yw hynny'n wir bellach gyda v4. Nawr gallwch chi ddefnyddio <button>
elfennau yn eich cwymplenni yn ddewisol yn lle dim ond <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>
Gallwch hefyd greu eitemau cwymplen nad ydynt yn rhyngweithiol gyda .dropdown-item-text
. Mae croeso i chi steilio ymhellach gyda CSS personol neu gyfleustodau testun.
<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>
Actif
Ychwanegu .active
at eitemau yn y gwymplen i'w steilio fel rhai gweithredol .
<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>
Anabl
Ychwanegu .disabled
at eitemau yn y gwymplen i'w steilio fel rhai anabl .
<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>
Aliniad dewislen
Yn ddiofyn, mae cwymplen yn cael ei gosod yn awtomatig 100% o'r brig ac ar hyd ochr chwith ei riant. Ychwanegu .dropdown-menu-right
at a .dropdown-menu
i'r dde alinio'r ddewislen.
<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>
Aliniad ymatebol
Os ydych chi am ddefnyddio aliniad ymatebol, analluoga lleoli deinamig trwy ychwanegu'r data-display="static"
priodoledd a defnyddio'r dosbarthiadau amrywiad ymatebol.
I alinio'r gwymplen i'r dde gyda'r torbwynt a roddir neu fwy, ychwanegwch .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>
I alinio i'r chwith y gwymplen gyda'r torbwynt a roddir neu fwy, ychwanegwch .dropdown-menu-right
a .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>
Sylwch nad oes angen i chi ychwanegu data-display="static"
priodoledd at fotymau cwymplen mewn bariau llywio, gan nad yw Popper yn cael ei ddefnyddio mewn bariau llywio.
Cynnwys y ddewislen
Penawdau
Ychwanegwch bennyn i labelu adrannau o gamau gweithredu mewn unrhyw gwymplen.
<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>
Rhanwyr
Gwahanwch grwpiau o eitemau bwydlen cysylltiedig gyda rhannwr.
<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>
Testun
Rhowch unrhyw destun rhydd mewn cwymplen gyda thestun a defnyddiwch gyfleustodau bylchu . Sylwch ei bod yn debygol y bydd angen arddulliau maint ychwanegol arnoch i gyfyngu ar lled y ddewislen.
<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>
Ffurflenni
Rhowch ffurflen o fewn cwymplen, neu gwnewch hi mewn cwymplen, a defnyddiwch gyfleustodau ymyl neu badin i roi'r gofod negyddol sydd ei angen arnoch.
<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>
Opsiynau cwymplen
Defnyddiwch data-offset
neu data-reference
i newid lleoliad y gwymplen.
<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>
Defnydd
Trwy briodoleddau data neu JavaScript, mae'r ategyn cwymplen yn toglo cynnwys cudd (cwymplenni) trwy doglo'r .show
dosbarth ar y rhiant .dropdown-menu
. Dibynnir ar y data-toggle="dropdown"
priodoledd ar gyfer cau dewislenni ar lefel cais, felly mae'n syniad da ei ddefnyddio bob amser.
$.noop
)
mouseover
at blant uniongyrchol yr
<body>
elfen. Mae'r darnia hyll hwn yn angenrheidiol i weithio o amgylch
quirk yn dirprwyo digwyddiad iOS , a fyddai fel arall yn atal tap yn unrhyw le y tu allan i'r gwymplen rhag sbarduno'r cod sy'n cau'r gwymplen. Unwaith y bydd y gwymplen wedi'i chau,
caiff y mouseover
trinwyr gwag ychwanegol hyn eu dileu.
Trwy briodoleddau data
Ychwanegu data-toggle="dropdown"
at ddolen neu fotwm i doglo cwymplen.
<div class="dropdown">
<button type="button" data-toggle="dropdown" aria-expanded="false">
Dropdown trigger
</button>
<div class="dropdown-menu">
...
</div>
</div>
Trwy JavaScript
Ffoniwch y cwymplenni trwy JavaScript:
$('.dropdown-toggle').dropdown()
data-toggle="dropdown"
dal yn ofynnol
Ni waeth a ydych chi'n ffonio'ch cwymplen trwy JavaScript neu yn lle hynny'n defnyddio'r data-api, data-toggle="dropdown"
mae'n ofynnol bob amser i fod yn bresennol ar elfen sbardun y gwymplen.
Opsiynau
Gellir trosglwyddo opsiynau trwy briodoleddau data neu JavaScript. Ar gyfer priodoleddau data, atodwch enw'r opsiwn i data-
, fel yn data-offset=""
.
Enw | Math | Diofyn | Disgrifiad |
---|---|---|---|
gwrthbwyso | rhif | llinyn | swyddogaeth | 0 | Gwrthbwyso'r gwymplen o'i gymharu â'i darged. Pan ddefnyddir swyddogaeth i bennu'r gwrthbwyso, fe'i gelwir gyda gwrthrych sy'n cynnwys y data gwrthbwyso fel ei ddadl gyntaf. Rhaid i'r swyddogaeth ddychwelyd gwrthrych gyda'r un strwythur. Mae nod DOM yr elfen sbarduno yn cael ei basio fel yr ail ddadl. Am ragor o wybodaeth cyfeiriwch at ddogfennau gwrthbwyso Popper . |
fflip | boolaidd | gwir | Caniatáu i Dropdown fflipio rhag ofn y bydd yr elfen gyfeirio yn gorgyffwrdd. I gael rhagor o wybodaeth, cyfeiriwch at ddogfennau fflip Popper . |
ffin | llinyn | elfen | 'sgrolio Rhiant' | Ffin cyfyngiad gorlif y gwymplen. Yn derbyn gwerthoedd 'viewport' , 'window' , 'scrollParent' , neu gyfeirnod HTMLElement (JavaScript yn unig). I gael rhagor o wybodaeth, cyfeiriwch at ddogfennau preventOverflow Popper . |
cyfeiriad | llinyn | elfen | 'toglo' | Elfen gyfeirio o'r gwymplen. Yn derbyn gwerthoedd 'toggle' , 'parent' , neu gyfeirnod Elfen HTML. I gael rhagor o wybodaeth cyfeiriwch at ddogfen cyfeirio PopperObject . |
arddangos | llinyn | 'deinamig' | Yn ddiofyn, rydym yn defnyddio Popper ar gyfer lleoli deinamig. Analluoga hwn gyda static . |
popperConfig | null | gwrthrych | null | I newid ffurfweddiad Popper rhagosodedig Bootstrap, gweler cyfluniad Popper |
Sylwch pryd boundary
y caiff ei osod i unrhyw werth heblaw 'scrollParent'
, mae'r arddull position: static
yn cael ei gymhwyso i'r .dropdown
cynhwysydd.
Dulliau
Dull | Disgrifiad |
---|---|
$().dropdown('toggle') |
Toglo'r gwymplen o far llywio penodol neu dabl llywio. |
$().dropdown('show') |
Yn dangos y gwymplen o far llywio penodol neu dabl llywio. |
$().dropdown('hide') |
Yn cuddio'r gwymplen o far llywio penodol neu dabl. |
$().dropdown('update') |
Yn diweddaru lleoliad cwymplen elfen. |
$().dropdown('dispose') |
Yn dinistrio cwymplen elfen. |
Digwyddiadau
Mae pob digwyddiad cwymplen yn cael ei danio at y .dropdown-menu
rhiant elfen ac mae ganddynt relatedTarget
eiddo, y mae ei werth yn elfen angor toggling. hide.bs.dropdown
ac hidden.bs.dropdown
mae gan ddigwyddiadau clickEvent
briodwedd (dim ond pan fydd y math digwyddiad gwreiddiol yn click
) sy'n cynnwys Gwrthrych Digwyddiad ar gyfer y digwyddiad clicio.
Digwyddiad | Disgrifiad |
---|---|
show.bs.dropdown |
Mae'r digwyddiad hwn yn tanio ar unwaith pan elwir y dull enghraifft sioe. |
shown.bs.dropdown |
Mae'r digwyddiad hwn yn cael ei danio pan fydd y gwymplen wedi'i gwneud yn weladwy i'r defnyddiwr (bydd yn aros am drawsnewidiadau CSS, i'w cwblhau). |
hide.bs.dropdown |
Mae'r digwyddiad hwn yn cael ei danio ar unwaith pan fydd y dull cuddfan wedi'i alw. |
hidden.bs.dropdown |
Mae'r digwyddiad hwn yn cael ei danio pan fydd y gwymplen wedi gorffen cael ei chuddio rhag y defnyddiwr (bydd yn aros am drawsnewidiadau CSS, i'w cwblhau). |
$('#myDropdown').on('show.bs.dropdown', function () {
// do something...
})