Dropdowns

Shandura kuvharika kwemamiriro ekutaridza rondedzero yezvinongedzo uye nezvimwe neBootstrap yekudonhedza plugin.

Overview

Madonhwe anogona kuchinjika, akafukidzirana pamusoro pekuratidza rondedzero yezvinongedzo nezvimwe. Ivo vanoitwa kupindirana neiyo inosanganisirwa Bootstrap inodonha JavaScript plugin. Vanosandurwa nekudzvanya, kwete nekutenderera; ichi chisarudzo chekugadzira nemaune.

Kudonhedza kwakavakirwa pane yechitatu bato raibhurari, Popper.js , iyo inopa ine simba chinzvimbo uye kuona kwekutarisa. Iva nechokwadi chekuisa popper.min.js pamberi peBootstrap's JavaScript kana kushandisa bootstrap.bundle.min.js/ bootstrap.bundle.jsiyo ine Popper.js. Popper.js haishandiswe kuisa zvinodonhedza mumabhara emvura asi sechinzvimbo chine simba chisingadiwi.

Kana iwe uri kuvaka yedu JavaScript kubva kunobva, inodautil.js .

Accessibility

Iyo WAI ARIA chiyero inotsanangura iyo chaiyo role="menu"widget , asi iyi yakanangana nemamenu ekushandisa anokonzeresa zviito kana mabasa. ARIA mamenu anogona chete kuve nemenu zvinhu, checkbox menyu zvinhu, redhiyo bhatani menyu zvinhu, redhiyo mabhatani mapoka, uye sub-mamenu.

Kudonhedza kweBootstrap, kune rumwe rutivi, kwakagadzirirwa kuve kwakajairwa uye kunoshanda kune akasiyana mamiriro uye makiko zvimiro. Semuyenzaniso, zvinokwanisika kugadzira madonhwe ane zvimwe zvekupinza uye zvidzoreso zvemafomu, senge minda yekutsvaga kana mafomu ekupinda. Nechikonzero ichi, Bootstrap haatarisiri (kana kuwedzera otomatiki) chero roleuye aria-hunhu hunodiwa kune echokwadi ARIA menyu. Vanyori vanozofanira kusanganisira izvi zvakanyanya hunhu ivo pachavo.

Nekudaro, Bootstrap inowedzera yakavakirwa-mukati tsigiro yeakawanda akajairwa kiyibhodhi menyu kupindirana, sekugona kufamba nepakati .dropdown-itempezvinhu zvega uchishandisa makiyi ecursor uye kuvhara menyu ESCnekiyi.

Mienzaniso

Peta yekudonhedza yekudonhedza (bhatani rako kana chinongedzo) uye yekudonha menyu mukati .dropdown, kana chimwe chinhu chinozivisa position: relative;. Dropdowns inogona kukonzereswa kubva <a>kana <button>zvinhu kuti zvikwane zvaungade zvaunoda.

Bhatani rimwechete

Chero imwe chete .btninogona kushandurwa kuita yekudonhedza toggle ine dzimwe markup shanduko. Heano maitiro aungaita kuti ashande nechero <button>zvinhu:

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

Uye <a>nezvinhu:

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

Chikamu chakanakisa ndechekuti iwe unogona kuita izvi nechero bhatani musiyano, zvakare:

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

Split bhatani

Saizvozvo, gadzira kupatsanurwa bhatani kudonhedza pamwe neakafanana markup seyomwe bhatani kudonhedza, asi nekuwedzera kwenzvimbo .dropdown-toggle-splityakakodzera yakatenderedza yekudonha caret.

Isu tinoshandisa iyi yekuwedzera kirasi kudzikisa yakachinjika paddingkune chero mativi ecaret ne25% uye kubvisa margin-leftiyo inowedzerwa kune yakajairwa mabhatani kudonhedza. Idzo shanduko dzekuwedzera dzinoita kuti caret igare pakati pebhatani rekutsemura uye inopa yakawedzera saizi yakarova nzvimbo padyo nebhatani guru.

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

Kukura

Mabhatani anodonhedza anoshanda nemabhatani eese saizi, kusanganisira default uye kupatsanura kudonhedza mabhatani.

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

Nhungamiro

Dropup

Tamba mamenu ekudonha pamusoro pezvinhu nekuwedzera .dropupkune chinhu chemubereki.

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

Tamba mamenu ekudonha kurudyi rwezvinhu nekuwedzera .droprightkune chinhu chemubereki.

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

Tamba mamenu ekudonha kuruboshwe rwezvinhu nekuwedzera .dropleftkune chinhu chemubereki.

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

Nhoroondo yekudonhedza menyu zvirimo zvaifanira kunge zviri zvinongedzo, asi hazvisisirizvo nev4. Iye zvino unogona kusarudza kushandisa <button>zvinhu mukudonhedza kwako pane kungo <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>

Iwe unogona zvakare kugadzira zvisingaite zvekudonhedza zvinhu ne .dropdown-item-text. Inzwa wakasununguka kuwedzera chimiro netsika CSS kana zvinyorwa zvekushandisa.

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

Active

Wedzera .activekuzvinhu zviri mukudonhedza kuti zvitayera sezviri kushanda .

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

Yakaremara

Wedzera .disabledkuzvinhu zviri mukudonhedza kuti zvitaera sezvakaremara .

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

Nekumisikidza, menyu yekudonha inoiswa otomatiki 100% kubva kumusoro uye nekuruboshwe rwemubereki wayo. Wedzera .dropdown-menu-rightkune a .dropdown-menukune kurudyi gadzirisa menyu yekudonha.

Musoro! Madonhwe akaiswa panzvimbo yekutenda kuPopper.js (kunze kwekunge ari mubhara rekufamba).

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

Headers

Wedzera musoro kuti unyore zvikamu zvezviito mune chero kudonha menyu.

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

Vapesanisi

Mapoka akaparadzana ezvine hukama zvemenu ane divider.

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

Text

Isa chero mavara emahara mukati memenu yekudonha ine mavara uye shandisa spacing utilities . Ziva kuti iwe ungangoda mamwe masaizi masitaera kumanikidza menyu upamhi.

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

Mafomu

Isa fomu mukati memenu yekudonhedza, kana kuti riite mune yekudonha menyu, uye shandisa margin kana padding zvishandiso kuti uzvipe iyo isina kunaka nzvimbo yaunoda.

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

Shandisa data-offsetkana data-referencekushandura nzvimbo yekudonha.

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

Usage

Kuburikidza nehunhu hwedhata kana JavaScript, iyo yekudonha plugin inoshandura zvakavanzika zvemukati (mamenu ekudonha) nekuchinja .showkirasi pane yevabereki rondedzero chinhu. Iwo data-toggle="dropdown"hunhu hunovimbwa nawo pakuvhara mamenu ekudonha padanho rekushandisa, saka ipfungwa yakanaka kugara uchiishandisa.

Pazvishandiso zvinogonesa kubata, kuvhura kudonhedza kunowedzera isina chinhu ( $.noop) mouseoverzvibatiso kune vekare vana <body>vechinhu. Uku kubhejera kunobvumwa kwakashata kunodiwa kuti ushande zvakatenderedza quirk muiOS' chiitiko delegation , iyo yaizodzivirira pombi chero kupi zvako kunze kwekudonha kubva kukonzeresa kodhi inovhara kudonha. Kamwe kudonhedza kwavharwa, aya ekuwedzera asina chinhu mouseoveranobatika anobviswa.

Via data hunhu

Wedzera data-toggle="dropdown"kune chinongedzo kana bhatani kuti uchinje kudonhedza.

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

Via JavaScript

Fonera zvinodonha kuburikidza neJavaScript:

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

`data-toggle="dropdown"`zvichiri kudiwa

Kunyangwe iwe uchifonera kudonha kwako kuburikidza neJavaScript kana kuti panzvimbo pacho shandisa iyo data-api, data-toggle="dropdown"inogara ichidikanwa kuti unge uripo pane inodonhedza inokonzeresa chinhu.

Options

Sarudzo dzinogona kupfuudzwa kuburikidza nedata hunhu kana JavaScript. Nezve data hunhu, wedzera iyo sarudzo zita ku data-, semu data-offset="".

Zita	Type	Default	Tsanangudzo
offset	nhamba \| tambo \| basa	0	Offset yekudonha inoenderana nechinangwa chayo. Kuti uwane rumwe ruzivo tarisa kuPopper.js's offset docs .
flip	boolean	chokwadi	Bvumira Dropdown kuti itenderere kana pane kupindirana pane referensi chinhu. Kuti uwane rumwe ruzivo tarisa kuPopper.js's flip docs .
muganhu	tambo \| element	'scrollParent'	Kufashukira kunomanikidza muganho weiyo yekudonha menyu. Inobvuma kukosha kwe `'viewport'`, `'window'`, `'scrollParent'`, kana HTMLElement referensi (JavaScript chete). Kuti uwane rumwe ruzivo tarisa kune Popper.js's preventOverflow docs .
reference	tambo \| element	'shandura'	Reference element yemenu yekudonha. Inobvuma kukosha kwe `'toggle'`, `'parent'`, kana HTMLElement referensi. Kuti uwane rumwe ruzivo tarisa kuPopper.js's referenceObject docs .
kuratidza	tambo	'dynamic'	Nekumisikidza, isu tinoshandisa Popper.js kune inoshanduka chinzvimbo. Dzima izvi ne `static`.

Ziva kana boundaryyaiswa kune chero kukosha kunze 'scrollParent'kwe, maitiro position: staticanoiswa .dropdownkumudziyo.

Nzira

Nzira	Tsanangudzo
`$().dropdown('toggle')`	Shandura menyu yekudonhedza yakapihwa navbar kana tabbed navigation.
`$().dropdown('update')`	Inovandudza nzvimbo yekudonha kwechimwe chinhu.
`$().dropdown('dispose')`	Inoparadza kudonha kwechimwe chinhu.

Zviitiko

Zviitiko zvese zvekudonhedza zvinodzingirwa kune .dropdown-menu's mubereki element uye zvine relatedTargetpfuma, iyo kukosha kwayo ndiko toggling anchor element. hide.bs.dropdownuye hidden.bs.dropdownzviitiko zvine chivakwa clickEvent(chete kana yekutanga chiitiko mhando click) ine Chiitiko Chinhu chechiitiko chekudzvanya.

Chiitiko	Tsanangudzo
`show.bs.dropdown`	Ichi chiitiko chinopisa nekukasira kana iyo nzira yemuenzaniso inodanwa.
`shown.bs.dropdown`	Ichi chiitiko chinodzingwa kana kudonhedza kwaitwa kuti kuonekwe kumushandisi (ichamirira shanduko yeCSS, kuti ipedze).
`hide.bs.dropdown`	Chiitiko ichi chinodzingwa nekukasira kana nzira yekuhwanda yadaidzwa.
`hidden.bs.dropdown`	Ichi chiitiko chinodzingwa kana kudonhedza kwapera kuvanzwa kubva kumushandisi (ichamirira shanduko yeCSS, kuti ipedze).

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

Dropdowns

Overview

Accessibility

Mienzaniso

Bhatani rimwechete

Split bhatani

Kukura

Nhungamiro

Dropup

Dropright

Dropleft

Menu zvinhu

Active

Yakaremara

Menu alignment

Menu content

Headers

Vapesanisi

Text

Mafomu

Usage

Via data hunhu

Via JavaScript

`data-toggle="dropdown"`zvichiri kudiwa

Options

Nzira

Zviitiko

Dropdowns

Overview

Accessibility

Mienzaniso

Bhatani rimwechete

Split bhatani

Kukura

Nhungamiro

Dropup

Dropright

Dropleft

Menu zvinhu

Active

Yakaremara

Menu alignment

Menu content

Headers

Dropdown header

Vapesanisi

Text

Mafomu

Dropdown options

Usage

Via data hunhu

Via JavaScript

data-toggle="dropdown"zvichiri kudiwa

Options

Nzira

Zviitiko

`data-toggle="dropdown"`zvichiri kudiwa