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.js , 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.jskas satur Popper.js. Popper.js netiek izmantots, lai pozicionētu nolaižamās izvēlnes navigācijas joslās, jo dinamiskā pozicionēšana nav nepieciešama.

Ja veidojat mūsu JavaScript no avota, tam ir nepieciešamsutil.js .

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 roleun 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-itemelementiem, 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 .dropdownvai 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.

Viena poga

Jebkuru singlu .btnvar 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="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown button
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <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>

Un ar <a>elementiem:

<div class="dropdown">
  <a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown link
  </a>

  <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
    <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>

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-toggle="dropdown" aria-haspopup="true" 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>

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-splitpareizu atstarpi ap nolaižamo sarakstu.

Mēs izmantojam šo papildu klasi, lai par 25% samazinātu horizontālo paddinglīmeni abās pakāpju pusēs un noņemtu margin-leftparasto 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-toggle="dropdown" aria-haspopup="true" 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>

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-toggle="dropdown" aria-haspopup="true" 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-haspopup="true" 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-haspopup="true" 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-haspopup="true" aria-expanded="false">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu">
    ...
  </div>
</div>

Norādes

Dropup

Aktivizējiet nolaižamās izvēlnes virs elementiem, pievienojot .dropupto vecākajam elementam.

<!-- Default dropup button -->
<div class="btn-group dropup">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" 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-haspopup="true" aria-expanded="false">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu">
    <!-- Dropdown menu links -->
  </div>
</div>

Dropright

Aktivizējiet nolaižamās izvēlnes elementu labajā pusē, pievienojot .droprightto vecākajam elementam.

<!-- Default dropright button -->
<div class="btn-group dropright">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" 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-haspopup="true" aria-expanded="false">
    <span class="sr-only">Toggle Dropright</span>
  </button>
  <div class="dropdown-menu">
    <!-- Dropdown menu links -->
  </div>
</div>

Dropleft

Aktivizējiet nolaižamās izvēlnes elementu kreisajā pusē, pievienojot .dropleftto vecākajam elementam.

<!-- Default dropleft button -->
<div class="btn-group dropleft">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" 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" role="group">
    <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" 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>

Vēsturiski nolaižamās izvēlnes saturam bija jābūt saitēm, taču tas vairs neattiecas uz versiju 4. Tagad nolaižamajos izvēlnēs varat izmantot <button>elementus, nevis tikai <a>s.

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenu2">
    <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>

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.

<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>

Aktīvs

Pievienojiet .activevienumiem nolaižamajā izvēlnē, lai veidotu tos kā aktīvus .

<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>

Atspējots

Pievienojiet .disabledvienumiem nolaižamajā izvēlnē, lai veidotu tos kā atspējotus .

<div class="dropdown-menu">
  <a class="dropdown-item" href="#">Regular link</a>
  <a class="dropdown-item disabled" href="#">Disabled link</a>
  <a class="dropdown-item" href="#">Another link</a>
</div>

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ē. Pievienojiet nolaižamo izvēlni .dropdown-menu-rightlīdzi pa labi..dropdown-menu

Uzmanību! Nolaižamās izvēlnes ir izvietotas, pateicoties Popper.js (izņemot gadījumus, kad tās atrodas navigācijas joslā).

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" 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>

Virsraksti

Pievienojiet galveni, lai apzīmētu darbību sadaļas jebkurā nolaižamajā izvēlnē.

<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>

Dalītāji

Atdaliet saistīto izvēlnes vienumu grupas ar dalītāju.

<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>

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="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-check">
      <input type="checkbox" class="form-check-input" id="dropdownCheck">
      <label class="form-check-label" for="dropdownCheck">
        Remember me
      </label>
    </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-check">
    <input type="checkbox" class="form-check-input" id="dropdownCheck2">
    <label class="form-check-label" for="dropdownCheck2">
      Remember me
    </label>
  </div>
  <button type="submit" class="btn btn-primary">Sign in</button>
</form>

Izmantojiet data-offsetvai data-reference, lai mainītu nolaižamās izvēlnes atrašanās vietu.

<div class="d-flex">
  <div class="dropdown mr-1">
    <button type="button" class="btn btn-secondary dropdown-toggle" id="dropdownMenuOffset" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-offset="10,20">
      Offset
    </button>
    <div class="dropdown-menu" aria-labelledby="dropdownMenuOffset">
      <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" id="dropdownMenuReference" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-reference="parent">
      <span class="sr-only">Toggle Dropdown</span>
    </button>
    <div class="dropdown-menu" aria-labelledby="dropdownMenuReference">
      <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>

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 .showklasi vecāksaraksta vienumā. Atribūts data-toggle="dropdown"tiek izmantots, lai aizvērtu nolaižamās izvēlnes lietojumprogrammas līmenī, tāpēc ieteicams to izmantot vienmēr.

Skārienierīcēs, atverot nolaižamo izvēlni , elementa tiešajiem pakārtotajiem elementiem tiek pievienoti tukši ( $.noop) apdarinātāji . Šī, protams, neglītā uzlaušana ir nepieciešama, lai novērstu iOS notikumu deleģēšanas dīvainību , kas citādi 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 apstrādātāji tiek noņemti.mouseover<body>mouseover

Izmantojot datu atribūtus

Pievienojiet data-toggle="dropdown"saitei vai pogai, lai pārslēgtu nolaižamo izvēlni.

<div class="dropdown">
  <button id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown trigger
  </button>
  <div class="dropdown-menu" aria-labelledby="dLabel">
    ...
  </div>
</div>

Izmantojot JavaScript

Izsauciet nolaižamās izvēlnes, izmantojot JavaScript:

$('.dropdown-toggle').dropdown()

`data-toggle="dropdown"`joprojām ir nepieciešams

Neatkarīgi no tā, vai izsaucat savu nolaižamo izvēlni, izmantojot JavaScript vai tā vietā izmantojat datu api, data-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-, tāpat kā data-offset="".

Vārds	Tips	Noklusējums	Apraksts
kompensēt	numurs \| stīga \| funkciju	0	Nolaižamās izvēlnes nobīde attiecībā pret tās mērķi. Papildinformāciju skatiet Popper.js ofseta dokumentos .
uzsist	Būla	taisnība	Ļaujiet nolaižamajai izvēlnei apgriezties, ja atsauces elements pārklājas. Lai iegūtu papildinformāciju, skatiet Popper.js flip docs .
robeža	stīga \| elements	'scrollParent'	Nolaižamās izvēlnes pārpildes ierobežojuma robeža. Pieņem vērtības `'viewport'`, `'window'`, `'scrollParent'`vai HTMLElement atsauci (tikai JavaScript). Papildinformāciju skatiet dokumentā Popper.js preventOverflow .
atsauce	stīga \| elements	'pārslēgt'	Nolaižamās izvēlnes atsauces elements. Pieņem `'toggle'`, `'parent'`, vai HTMLElement atsauces vērtības. Lai iegūtu papildinformāciju, skatiet Popper.js atsauciObject docs .
displejs	virkne	'dinamisks'	Pēc noklusējuma mēs izmantojam Popper.js dinamiskai pozicionēšanai. Atspējojiet to ar `static`.

Ņemiet vērā, ja boundaryir iestatīta vērtība, kas nav 'scrollParent', stils position: statictiek lietots .dropdownkonteineram.

Metodes

Metode	Apraksts
`$().dropdown('toggle')`	Pārslēdz noteiktās navigācijas joslas vai cilnes navigācijas nolaižamo izvēlni.
`$().dropdown('update')`	Atjaunina elementa nolaižamās izvēlnes pozīciju.
`$().dropdown('dispose')`	Iznīcina elementa nolaižamo izvēlni.

Pasākumi

Visi nolaižamā saraksta notikumi tiek aktivizēti .dropdown-menuvecākelementā, un tiem ir relatedTargetrekvizīts, kura vērtība ir pārslēgšanas enkura elements. hide.bs.dropdownun hidden.bs.dropdownnotikumiem ir clickEventrekvizīts (tikai tad, ja sākotnējais notikuma veids ir click), kas satur klikšķa notikuma notikuma objektu.

Pasākums	Apraksts
`show.bs.dropdown`	Šis notikums tiek aktivizēts nekavējoties, kad tiek izsaukta parādīšanas instances metode.
`shown.bs.dropdown`	Šis notikums tiek aktivizēts, kad nolaižamā izvēlne ir padarīta redzama lietotājam (tiks gaidīts, līdz CSS pārejas tiks pabeigtas).
`hide.bs.dropdown`	Šis notikums tiek aktivizēts nekavējoties, kad tiek izsaukta slēpšanas instances metode.
`hidden.bs.dropdown`	Šis notikums tiek aktivizēts, kad nolaižamā izvēlne ir paslēpta no lietotāja (tiks gaidīts, kamēr CSS pārejas tiks pabeigtas).

$('#myDropdown').on('show.bs.dropdown', function () {
  // do something…
})

Nolaižamās izvēlnes

Pārskats

Pieejamība

Piemēri

Viena poga

Sadalīšanas poga

Izmēru noteikšana

Norādes

Dropup

Dropright

Dropleft

Izvēlnes vienumi

Aktīvs

Atspējots

Izvēlņu izlīdzināšana

Izvēlnes saturs

Virsraksti

Dalītāji

Teksts

Veidlapas

Lietošana

Izmantojot datu atribūtus

Izmantojot JavaScript

`data-toggle="dropdown"`joprojām ir nepieciešams

Iespējas

Metodes

Pasākumi

Nolaižamās izvēlnes

Pārskats

Pieejamība

Piemēri

Viena poga

Sadalīšanas poga

Izmēru noteikšana

Norādes

Dropup

Dropright

Dropleft

Izvēlnes vienumi

Aktīvs

Atspējots

Izvēlņu izlīdzināšana

Izvēlnes saturs

Virsraksti

Nolaižamās izvēlnes galvene

Dalītāji

Teksts

Veidlapas