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.

Nolaižamās izvēlnes ar vienu pogu

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 ar 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 show">
  <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 pogas nolaižamās izvēlnes

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>

Nolaižamā variācija

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 variācija

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 variācija

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>

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ē. Pievienot nolaižamajā izvēlnē .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>

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>

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>

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>

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>

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>

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

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

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

Nolaižamās izvēlnes ar vienu pogu

Sadalīšanas pogas nolaižamās izvēlnes

Izmēru noteikšana

Nolaižamā variācija

Dropright variācija

Dropleft variācija

Izvēlnes vienumi

Izvēlņu izlīdzināšana

Izvēlņu galvenes

Izvēlnes sadalītāji

Izvēlņu formas

Aktīvie izvēlnes vienumi

Atspējotie izvēlnes vienumi

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

Nolaižamās izvēlnes ar vienu pogu

Sadalīšanas pogas nolaižamās izvēlnes

Izmēru noteikšana

Nolaižamā variācija

Dropright variācija

Dropleft variācija

Izvēlnes vienumi

Izvēlņu izlīdzināšana

Izvēlņu galvenes

Nolaižamās izvēlnes galvene

Izvēlnes sadalītāji

Izvēlņu formas

Aktīvie izvēlnes vienumi

Atspējotie izvēlnes vienumi

Lietošana

Izmantojot datu atribūtus

Izmantojot JavaScript

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

Iespējas

Metodes

Pasākumi

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