Nolaižamās izvēlnes
Pārslēdziet kontekstuālos pārklājumus, lai parādītu saišu sarakstus un citus, izmantojot Bootstrap nolaižamo spraudni.
Pārskats
Nolaižamās izvēlnes ir pārslēdzamas, kontekstuāli pārklājumi, lai parādītu saišu sarakstus un daudz ko citu. Tie ir padarīti interaktīvi, izmantojot iekļauto Bootstrap nolaižamo JavaScript spraudni. Tie tiek pārslēgti, noklikšķinot, nevis virzot kursoru; tas ir apzināts dizaina lēmums .
Nolaižamās izvēlnes ir izveidotas, pamatojoties uz trešās puses bibliotēku Popper , kas nodrošina dinamisku pozicionēšanu un skata loga noteikšanu. Noteikti iekļaujiet popper.min.js pirms Bootstrap JavaScript vai izmantojiet bootstrap.bundle.min.js
/ bootstrap.bundle.js
kas satur Popper. Popper netiek izmantots, lai pozicionētu nolaižamās izvēlnes navigācijas joslās, jo dinamiskā pozicionēšana nav nepieciešama.
Pieejamība
WAI ARIA standarts definē faktisko role="menu"
logrīku , taču tas attiecas tikai uz lietojumprogrammām līdzīgām izvēlnēm, kas aktivizē darbības vai funkcijas . ARIA izvēlnēs var būt tikai izvēlnes vienumi, izvēles rūtiņu izvēlnes vienumi, radio pogu izvēlnes vienumi, radio pogu grupas un apakšizvēlnes.
No otras puses, Bootstrap nolaižamās izvēlnes ir izstrādātas tā, lai tās būtu vispārīgas un piemērotas dažādām situācijām un iezīmēšanas struktūrām. Piemēram, ir iespējams izveidot nolaižamās izvēlnes, kas satur papildu ievades un veidlapas vadīklas, piemēram, meklēšanas laukus vai pieteikšanās veidlapas. Šī iemesla dēļ Bootstrap neparedz (nedz arī automātiski nepievieno) nevienu no role
un aria-
atribūtiem, kas nepieciešami patiesajām ARIA izvēlnēm. Autoriem pašiem būs jāiekļauj šie specifiskākie atribūti.
Tomēr Bootstrap pievieno iebūvētu atbalstu lielākajai daļai standarta tastatūras izvēlņu mijiedarbības, piemēram, iespēju pārvietoties pa atsevišķiem .dropdown-item
elementiem, izmantojot kursora taustiņus, un aizvērt izvēlni ar ESCtaustiņu.
Piemēri
Aptiniet nolaižamās izvēlnes slēdzi (jūsu pogu vai saiti) un nolaižamo izvēlni .dropdown
vai citu elementu, kas deklarē position: relative;
. Nolaižamās izvēlnes var tikt aktivizētas no <a>
vai <button>
elementiem, lai labāk atbilstu jūsu potenciālajām vajadzībām. Šeit parādītajos piemēros tiek izmantoti semantiski <ul>
elementi, ja tas ir nepieciešams, taču tiek atbalstīta pielāgotā iezīmēšana.
Viena poga
Jebkuru singlu .btn
var pārvērst par nolaižamo slēdzi, veicot dažas iezīmēšanas izmaiņas. Tālāk ir norādīts, kā varat tos izmantot, izmantojot kādu no <button>
elementiem.
<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>
Un ar <a>
elementiem:
<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>
Labākā daļa ir tāda, ka to varat izdarīt arī ar jebkuru pogas variantu:
<!-- 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>
Sadalīšanas poga
Līdzīgi izveidojiet sadalīto pogu nolaižamās izvēlnes ar gandrīz tādu pašu marķējumu kā vienas pogas nolaižamajiem izvēlnēm, taču pievienojot .dropdown-toggle-split
pareizu atstarpi ap nolaižamo sarakstu.
Mēs izmantojam šo papildu klasi, lai par 25% samazinātu horizontālo padding
līmeni abās pakāpju pusēs un noņemtu margin-left
parasto pogu nolaižamo izvēlni. Šīs papildu izmaiņas saglabā centrējumu sadalīšanas pogā un nodrošina atbilstošāka izmēra trāpījuma apgabalu blakus galvenajai pogai.
<!-- 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>
Izmēru noteikšana
Pogu nolaižamās izvēlnes darbojas ar visu izmēru pogām, tostarp noklusējuma un sadalītajām nolaižamajām pogām.
<!-- 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>
Tumši nolaižamie saraksti
Izvēlieties tumšākas nolaižamās izvēlnes, lai tās atbilstu tumšai navigācijas joslai vai pielāgotam stilam, pievienojot .dropdown-menu-dark
to esošajam .dropdown-menu
. Nolaižamajos vienumos izmaiņas nav nepieciešamas.
<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>
Un tā izmantošana navigācijas joslā:
<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>
Norādes
RTL
Norādes tiek atspoguļotas, izmantojot Bootstrap RTL, un tas .dropstart
tiks parādīts labajā pusē.
Dropup
Aktivizējiet nolaižamās izvēlnes virs elementiem, pievienojot .dropup
to vecākajam elementam.
<!-- 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
Aktivizējiet nolaižamās izvēlnes elementu labajā pusē, pievienojot .dropend
to vecākajam elementam.
<!-- 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>
Dropleft
Aktivizējiet nolaižamās izvēlnes elementu kreisajā pusē, pievienojot .dropstart
to vecākajam elementam.
<!-- 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>
Izvēlnes vienumi
Varat izmantot <a>
vai <button>
elementus kā nolaižamās izvēlnes vienumus.
<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>
Varat arī izveidot neinteraktīvus nolaižamās izvēlnes vienumus, izmantojot .dropdown-item-text
. Jūtieties brīvi turpināt stilu, izmantojot pielāgotas CSS vai teksta utilītas.
<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>
Aktīvs
Pievienojiet .active
vienumiem nolaižamajā izvēlnē, lai veidotu tos kā aktīvus . Lai nodotu aktīvo stāvokli palīgtehnoloģijām, izmantojiet aria-current
atribūtu — izmantojot page
pašreizējās lapas vai true
kopas pašreizējā vienuma vērtību.
<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>
Atspējots
Pievienojiet .disabled
vienumiem nolaižamajā izvēlnē, lai veidotu tos kā atspējotus .
<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>
Izvēlņu izlīdzināšana
Pēc noklusējuma nolaižamā izvēlne tiek automātiski novietota 100% no augšdaļas un tās vecākvārda kreisajā pusē. Varat to mainīt ar virziena .drop*
klasēm, bet varat arī kontrolēt tās ar papildu modifikatoru klasēm.
Pievienot nolaižamajā izvēlnē .dropdown-menu-end
līdzi pa labi. .dropdown-menu
Norādes tiek atspoguļotas, izmantojot Bootstrap RTL, un tas .dropdown-menu-end
tiks parādīts kreisajā pusē.
<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>
Atsaucīga izlīdzināšana
Ja vēlaties izmantot adaptīvo līdzināšanu, atspējojiet dinamisko pozicionēšanu, pievienojot data-bs-display="static"
atribūtu, un izmantojiet adaptīvās variācijas klases.
Lai līdzinātu nolaižamo izvēlni pa labi ar norādīto pārtraukuma punktu vai lielāku, pievienojiet .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>
Lai līdzinātu kreiso nolaižamo izvēlni ar norādīto vai lielāku pārtraukuma punktu, pievienojiet .dropdown-menu-end
un .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>
Ņemiet vērā, ka navigācijas joslu nolaižamajām pogām nav jāpievieno data-bs-display="static"
atribūts, jo Popper navigācijas joslās netiek izmantots.
Izlīdzināšanas iespējas
Ņemot vērā lielāko daļu iepriekš parādīto iespēju, šeit ir neliela virtuves izlietnes demonstrācija ar dažādām nolaižamajām līdzināšanas iespējām vienuviet.
<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>
Izvēlnes saturs
Virsraksti
Pievienojiet galveni, lai apzīmētu darbību sadaļas jebkurā nolaižamajā izvēlnē.
<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>
Dalītāji
Atdaliet saistīto izvēlnes vienumu grupas ar dalītāju.
<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>
Teksts
Ievietojiet jebkuru brīvas formas tekstu nolaižamajā izvēlnē ar tekstu un izmantojiet atstarpju utilītas . Ņemiet vērā, ka, iespējams, būs nepieciešami papildu izmēru stili, lai ierobežotu izvēlnes platumu.
<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>
Veidlapas
Ievietojiet veidlapu nolaižamajā izvēlnē vai izveidojiet to par nolaižamo izvēlni un izmantojiet piemales vai polsterējuma utilītas , lai piešķirtu tai nepieciešamo negatīvo vietu.
<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>
Nolaižamās izvēlnes opcijas
Izmantojiet data-bs-offset
vai data-bs-reference
, lai mainītu nolaižamās izvēlnes atrašanās vietu.
<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>
Automātiska aizvēršanās darbība
Pēc noklusējuma nolaižamā izvēlne tiek aizvērta, noklikšķinot nolaižamajā izvēlnē vai ārpus tās. Varat izmantot autoClose
opciju, lai mainītu šo nolaižamās izvēlnes darbību.
<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
Mainīgie lielumi
Visu nolaižamo izvēlņu mainīgie:
$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;
Tumšās nolaižamās izvēlnes mainīgie :
$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;
Mainīgie uz CSS balstītajām zīmēm, kas norāda uz nolaižamā saraksta interaktivitāti:
$caret-width: .3em;
$caret-vertical-align: $caret-width * .85;
$caret-spacing: $caret-width * .85;
Maisījumi
Mixins tiek izmantoti, lai ģenerētu uz CSS balstītus carets, un tos var atrast 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;
}
}
}
Lietošana
Izmantojot datu atribūtus vai JavaScript, nolaižamais spraudnis pārslēdz slēpto saturu (nolaižamās izvēlnes), pārslēdzot .show
klasi uz vecāku .dropdown-menu
. Atribūts data-bs-toggle="dropdown"
tiek izmantots, lai aizvērtu nolaižamās izvēlnes lietojumprogrammas līmenī, tāpēc ieteicams to izmantot vienmēr.
mouseover
, elementa tiešajiem pakārtotajiem elementiem tiek pievienoti tukši apdarinātāji
<body>
. Šī, protams, neglītā uzlaušana ir nepieciešama, lai
novērstu iOS notikumu deleģēšanas dīvainību , kas pretējā gadījumā neļautu, pieskaroties nekur ārpus nolaižamās izvēlnes, aktivizētu kodu, kas aizver nolaižamo izvēlni. Kad nolaižamā izvēlne ir aizvērta, šie papildu tukšie
mouseover
apstrādātāji tiek noņemti.
Izmantojot datu atribūtus
Pievienojiet data-bs-toggle="dropdown"
saitei vai pogai, lai pārslēgtu nolaižamo izvēlni.
<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>
Izmantojot JavaScript
Izsauciet nolaižamās izvēlnes, izmantojot JavaScript:
var dropdownElementList = [].slice.call(document.querySelectorAll('.dropdown-toggle'))
var dropdownList = dropdownElementList.map(function (dropdownToggleEl) {
return new bootstrap.Dropdown(dropdownToggleEl)
})
data-bs-toggle="dropdown"
joprojām ir nepieciešams
Neatkarīgi no tā, vai izsaucat nolaižamo izvēlni, izmantojot JavaScript vai tā vietā izmantojat datu api, data-bs-toggle="dropdown"
nolaižamās izvēlnes aktivizētāja elementā vienmēr ir jābūt klāt.
Iespējas
Opcijas var nodot, izmantojot datu atribūtus vai JavaScript. Datu atribūtiem pievienojiet opcijas nosaukumu data-bs-
, tāpat kā data-bs-offset=""
. Nododot opcijas, izmantojot datu atribūtus, noteikti nomainiet opcijas nosaukuma reģistra veidu no camelCase uz kebab-case. Piemēram, tā vietā, lai izmantotu data-bs-autoClose="false"
, izmantojiet data-bs-auto-close="false"
.
Vārds | Tips | Noklusējums | Apraksts |
---|---|---|---|
boundary |
stīga | elements | 'clippingParents' |
Nolaižamās izvēlnes pārpildes ierobežojuma robeža (attiecas tikai uz Popper's preventOverflow modifikatoru). Pēc noklusējuma tas ir 'clippingParents' un var pieņemt HTMLElement atsauci (tikai izmantojot JavaScript). Lai iegūtu papildinformāciju, skatiet Popper's detectOverflow dokumentus . |
reference |
stīga | elements | objektu | 'toggle' |
Nolaižamās izvēlnes atsauces elements. Pieņem 'toggle' , 'parent' , HTMLElement atsauces vai objekta, kas nodrošina, vērtības getBoundingClientRect . Lai iegūtu papildinformāciju, skatiet Popper konstruktora dokumentus un virtuālo elementu dokumentus . |
display |
stīga | 'dynamic' |
Pēc noklusējuma mēs izmantojam Popper dinamiskai pozicionēšanai. Atspējojiet to ar static . |
offset |
masīvs | stīga | funkciju | [0, 2] |
Nolaižamās izvēlnes nobīde attiecībā pret tās mērķi. Datu atribūtos varat nodot virkni ar komatu atdalītām vērtībām, piemēram: Ja funkcija tiek izmantota, lai noteiktu nobīdi, tā tiek izsaukta ar objektu, kurā kā pirmais arguments ir popper izvietojums, atsauce un popper rects. Aktivizējošais elements DOM mezgls tiek nodots kā otrais arguments. Funkcijai jāatgriež masīvs ar diviem cipariem: . Papildinformāciju skatiet Poppera nobīdes dokumentos . |
autoClose |
Būla | stīga | true |
Konfigurējiet nolaižamās izvēlnes automātiskās aizvēršanas darbību:
|
popperConfig |
null | objekts | funkciju | null |
Lai mainītu Bootstrap noklusējuma Popper konfigurāciju, skatiet Popper konfigurāciju . Ja funkcija tiek izmantota, lai izveidotu Popper konfigurāciju, tā tiek izsaukta ar objektu, kas satur Bootstrap noklusējuma Popper konfigurāciju. Tas palīdz izmantot un apvienot noklusējuma iestatījumus ar savu konfigurāciju. Funkcijai ir jāatgriež Popper konfigurācijas objekts. |
Izmantojot funkciju arpopperConfig
var dropdown = new bootstrap.Dropdown(element, {
popperConfig: function (defaultBsPopperConfig) {
// var newPopperConfig = {...}
// use defaultBsPopperConfig if needed...
// return newPopperConfig
}
})
Metodes
Metode | Apraksts |
---|---|
toggle |
Pārslēdz noteiktās navigācijas joslas vai cilnes navigācijas nolaižamo izvēlni. |
show |
Parāda noteiktas navigācijas joslas vai cilnes navigācijas nolaižamo izvēlni. |
hide |
Slēp attiecīgās navigācijas joslas vai cilnes navigācijas nolaižamo izvēlni. |
update |
Atjaunina elementa nolaižamās izvēlnes pozīciju. |
dispose |
Iznīcina elementa nolaižamo izvēlni. (Noņem DOM elementā saglabātos datus) |
getInstance |
Statiskā metode, kas ļauj iegūt nolaižamo gadījumu, kas saistīts ar DOM elementu, varat to izmantot šādi:bootstrap.Dropdown.getInstance(element) |
getOrCreateInstance |
Statiskā metode, kas atgriež nolaižamo gadījumu, kas saistīts ar DOM elementu, vai izveido jaunu gadījumu, ja tas nav inicializēts. Varat to izmantot šādi:bootstrap.Dropdown.getOrCreateInstance(element) |
Pasākumi
Visi nolaižamā saraksta notikumi tiek aktivizēti pārslēgšanas elementā un pēc tam tiek parādīti burbuļos. Tātad jūs varat arī pievienot notikumu uztvērējus .dropdown-menu
vecāka elementam. hide.bs.dropdown
un hidden.bs.dropdown
notikumiem ir clickEvent
rekvizīts (tikai tad, ja sākotnējais notikuma veids ir click
), kas satur klikšķa notikuma notikuma objektu.
Metode | Apraksts |
---|---|
show.bs.dropdown |
Aktivizējas nekavējoties, kad tiek izsaukta parādīšanas instances metode. |
shown.bs.dropdown |
Tiek aktivizēts, kad nolaižamā izvēlne ir padarīta redzama lietotājam un CSS pārejas ir pabeigtas. |
hide.bs.dropdown |
Aktivizējas nekavējoties, kad ir izsaukta slēpšanas instances metode. |
hidden.bs.dropdown |
Tiek aktivizēts, kad nolaižamā izvēlne ir paslēpta no lietotāja un ir pabeigtas CSS pārejas. |
var myDropdown = document.getElementById('myDropdown')
myDropdown.addEventListener('show.bs.dropdown', function () {
// do something...
})