Rippmenüüd

Lülitage kontekstipõhiseid ülekatteid linkide loendite ja muu kuvamiseks Bootstrapi rippmenüü pistikprogrammiga.

Ülevaade

Rippmenüüd on vahetatavad, kontekstipõhised ülekatted linkide loendite kuvamiseks ja palju muud. Need on interaktiivsed kaasasoleva Bootstrapi rippmenüü JavaScripti pistikprogrammiga. Neid vahetatakse klõpsates, mitte hõljutades; see on tahtlik disainiotsus.

Rippmenüüd on üles ehitatud kolmanda osapoole teegile Popper.js , mis pakub dünaamilist positsioneerimist ja vaateava tuvastamist. Lisage kindlasti enne Bootstrapi JavaScripti popper.min.js või kasutage /bootstrap.bundle.min.js mis bootstrap.bundle.jssisaldab Popper.js-i. Popper.js-i ei kasutata navigeerimisribade rippmenüüde positsioneerimiseks, kuna dünaamiline positsioneerimine pole vajalik.

Kui loote meie JavaScripti allikast, nõuabutil.js see .

Juurdepääsetavus

WAI ARIA standard määratleb tegeliku vidina role="menu" , kuid see on spetsiifiline rakenduslike menüüde jaoks, mis käivitavad toiminguid või funktsioone. ARIA menüüd võivad sisaldada ainult menüüüksusi, märkeruutude menüüüksusi, raadionuppude menüüüksusi, raadionupurühmi ja alammenüüsid.

Bootstrapi rippmenüüd on seevastu loodud üldiseks ja rakendatavaks mitmesugustes olukordades ja märgistusstruktuurides. Näiteks on võimalik luua rippmenüüd, mis sisaldavad täiendavaid sisendeid ja vormi juhtelemente, nagu otsinguvälju või sisselogimisvorme. Sel põhjusel ei oota Bootstrap (ega lisa automaatselt) ühtegi tõelise ARIA menüü jaoks vajalikke atribuute roleja . Autorid peavad need täpsemad atribuudid ise lisama.aria-

Siiski lisab Bootstrap sisseehitatud toe enamiku standardsete klaviatuurimenüü interaktsioonide jaoks, nagu näiteks võimalus .dropdown-itemkursoriklahvide abil üksikute elementide vahel liikuda ja klahviga menüü sulgeda ESC.

Näited

Pakkige rippmenüü lüliti (oma nupp või link) ja rippmenüü sisse .dropdownvõi muusse elemendisse, mis deklareerib position: relative;. Rippmenüüd saab käivitada <a>või <button>elementidest, et need vastaksid paremini teie potentsiaalsetele vajadustele.

Üksik nupp

Mis tahes singlit .btnsaab mõne märgistuse muudatusega muuta rippmenüü lülitiks. Siin on, kuidas saate neid mõlema <button>elemendiga tööle panna.

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

Ja <a>elementidega:

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

Parim osa on see, et saate seda teha ka mis tahes nupu variandiga:

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

Jagamisnupp

Sarnaselt looge jagatud nuppude rippmenüüd, millel on peaaegu sama märgistus kui ühe nupu rippmenüüd, kuid lisades .dropdown-toggle-splitrippmenüü tähise ümber õige vahekauguse.

Kasutame seda lisaklassi, et vähendada horisontaali paddingmõlemal küljel 25% ja eemaldada margin-lefttavaliste nuppude rippmenüüde jaoks lisatud. Need lisamuudatused hoiavad tähise jaotusnupu keskel ja pakuvad põhinupu kõrval sobivama suurusega löögiala.

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

Suuruse määramine

Nuppude rippmenüüd töötavad igas suuruses nuppudega, sealhulgas vaike- ja jagatud rippmenüü nuppudega.

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

Juhised

Kukkumine

Käivitage rippmenüüd elementide kohal, lisades .dropupneed emaelemendile.

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

Käivitage rippmenüüd elementide paremal, lisades .droprightneed emaelemendile.

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

Käivitage elementide vasakul rippmenüüd, lisades .dropleftneed emaelemendile.

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

Ajalooliselt pidi rippmenüü sisu olema lingid, kuid versiooni 4 puhul see enam nii ei kehti. Nüüd saate valikuliselt kasutada <button>rippmenüüdes elemente, mitte ainult <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>

Saate luua ka mitteinteraktiivseid rippmenüü üksusi, kasutades .dropdown-item-text. Stiilige julgelt kohandatud CSS-i või tekstiutiliitidega.

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

Aktiivne

Lisage .activerippmenüü üksustele, et kujundada need aktiivseteks .

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

Keelatud

Lisage .disabledrippmenüüs olevatele üksustele, et kujundada need keelatuks .

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

Vaikimisi positsioneeritakse rippmenüü automaatselt 100% ülaosast ja vanema vasakust servast. Rippmenüü lisamine paremale joondamiseks .dropdown-menu-right..dropdown-menu

Pea püsti! Rippmenüüd on paigutatud tänu Popper.js-ile (välja arvatud juhul, kui need sisalduvad navigeerimisribal).

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

Päised

Lisage päis mis tahes rippmenüü tegevuste jaotistele.

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

Jagajad

Eraldage seotud menüüelementide rühmad jaguriga.

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

Tekst

Asetage mis tahes vabas vormis tekst tekstiga rippmenüüsse ja kasutage tühikute utiliite . Pange tähele, et tõenäoliselt vajate menüü laiuse piiramiseks täiendavaid suuruse stiile.

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

Vormid

Pange vorm rippmenüüsse või muutke see rippmenüüks ja kasutage veerise või polsterduse utiliite , et anda sellele vajalik negatiivne ruum.

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

Kasutage rippmenüü asukoha muutmiseks data-offsetvõi .data-reference

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

Kasutamine

Andmeatribuutide või JavaScripti kaudu lülitab rippmenüü pistikprogramm peidetud sisu (rippmenüüd) sisse, lülitades .showklassi ülemloendi üksusel. Atribuuti data-toggle="dropdown"kasutatakse rakenduse tasemel rippmenüüde sulgemisel, seega on hea mõte seda alati kasutada.

Puutetundlike seadmete puhul lisab rippmenüü avamine elemendi vahetutele alamatele tühjad ( $.noop) töötlejad. See ilmselt inetu häkkimine on vajalik iOS-i sündmuste delegeerimise veidruse ületamiseks, mis muidu takistaks rippmenüüst väljaspool asuvat puudutust käivitamast rippmenüü sulgevat koodi. Kui rippmenüü suletakse, eemaldatakse need täiendavad tühjad käitlejad.mouseover<body>mouseover

Andmeatribuutide kaudu

Lisage data-toggle="dropdown"lingile või nupule rippmenüü sisselülitamiseks.

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

JavaScripti kaudu

Kutsuge rippmenüüd JavaScripti kaudu:

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

`data-toggle="dropdown"`ikka nõutud

Olenemata sellest, kas helistate rippmenüüsse JavaScripti kaudu või kasutate selle asemel andmeapi-d, data-toggle="dropdown"peab rippmenüü päästikuelemendil alati olema.

Valikud

Valikud saab edastada andmeatribuutide või JavaScripti kaudu. Andmeatribuutide jaoks lisage valiku nimi data-, nagu data-offset="".

Nimi	Tüüp	Vaikimisi	Kirjeldus
nihe	number \| string \| funktsiooni	0	Rippmenüü nihe sihtmärgi suhtes. Lisateabe saamiseks vaadake Popper.js'i nihkedokumente .
klapp	tõeväärtus	tõsi	Luba rippmenüül ümber pöörata, kui võrdluselement kattub. Lisateabe saamiseks vaadake Popper.js'i flip-dokumente .
piiri	string \| element	'scrollParent'	Rippmenüü ülevoolupiirangu piir. Aktsepteerib `'viewport'`, `'window'`, `'scrollParent'`, või HTMLElementi viite väärtusi (ainult JavaScript). Lisateabe saamiseks vaadake Popper.js'i preventOverflow dokumente .
viide	string \| element	'lülita'	Rippmenüü viiteelement. Aktsepteerib `'toggle'`, `'parent'`, või HTMLElementi viite väärtused. Lisateabe saamiseks vaadake Popper.js'i viideObject docs .
kuva	string	'dünaamiline'	Vaikimisi kasutame dünaamilise positsioneerimise jaoks Popper.js-i. Keela see rakendusega `static`.

Pange tähele, kui boundaryväärtuseks on määratud mis tahes muu väärtus peale , rakendatakse 'scrollParent'stiil konteinerile.position: static.dropdown

meetodid

meetod	Kirjeldus
`$().dropdown('toggle')`	Lülitab antud navigeerimisriba või vahelehtedega navigeerimise rippmenüü sisse- ja väljalülitamiseks.
`$().dropdown('update')`	Värskendab elemendi rippmenüü asukohta.
`$().dropdown('dispose')`	Hävitab elemendi rippmenüü.

Sündmused

Kõik rippmenüü sündmused käivitatakse .dropdown-menuülemelemendis ja neil on relatedTargetatribuut, mille väärtus on lülitusankurelement. hide.bs.dropdownja hidden.bs.dropdownsündmustel on clickEventatribuut (ainult siis, kui algne sündmuse tüüp on click), mis sisaldab klõpsusündmuse sündmuseobjekti.

Sündmus	Kirjeldus
`show.bs.dropdown`	See sündmus käivitub kohe, kui kutsutakse näitamise eksemplari meetod.
`shown.bs.dropdown`	See sündmus käivitatakse, kui rippmenüü on kasutajale nähtavaks tehtud (ootab CSS-i üleminekuid, et lõpetada).
`hide.bs.dropdown`	See sündmus käivitatakse kohe, kui peida eksemplari meetod on välja kutsutud.
`hidden.bs.dropdown`	See sündmus käivitatakse, kui rippmenüü on kasutaja eest peitmise lõpetanud (ootab CSS-i üleminekuid, et lõpetada).

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

Rippmenüüd

Ülevaade

Juurdepääsetavus

Näited

Üksik nupp

Jagamisnupp

Suuruse määramine

Juhised

Kukkumine

Dropright

Dropleft

Menüüelemendid

Aktiivne

Keelatud

Menüü joondamine

Menüü sisu

Päised

Jagajad

Tekst

Vormid

Kasutamine

Andmeatribuutide kaudu

JavaScripti kaudu

`data-toggle="dropdown"`ikka nõutud

Valikud

meetodid

Sündmused

Rippmenüüd

Ülevaade

Juurdepääsetavus

Näited

Üksik nupp

Jagamisnupp

Suuruse määramine

Juhised

Kukkumine

Dropright

Dropleft

Menüüelemendid

Aktiivne

Keelatud

Menüü joondamine

Menüü sisu

Päised

Rippmenüü päis

Jagajad

Tekst

Vormid

Rippmenüü valikud

Kasutamine

Andmeatribuutide kaudu

JavaScripti kaudu

data-toggle="dropdown"ikka nõutud

Valikud

meetodid

Sündmused

`data-toggle="dropdown"`ikka nõutud