Dropdowns

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

Overview

Madonhwe anogona kuchinjika, akafukidzirana pamusoro pekuratidzira 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 chekuchinja chisingadiwi.

Kana iwe uri kuvaka yedu JavaScript kubva kunobva, zvinodautil.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

Putira iyo yekudonhedza toggle (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.

Single button dropdowns

Chero imwe chete .btninogona kushandurwa kuita yekudonhedza dhizaini 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 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>

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

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>

Dropup musiyano

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 variation

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 variation

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>

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

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>

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>

Isa fomu mukati memenu yekudonhedza, kana gadzira iyo 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>

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>

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>

Usage

Kuburikidza nehunhu hwedhata kana JavaScript, iyo yekudonha plugin inoshandura zvakavanzika zvemukati (mamenu ekudonha) nekuchinja .showkirasi pane yevabereki rondedzero chinhu. Hunhu data-toggle="dropdown"hunovimbwa nahwo 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 muiOS' chiitiko delegation , iyo yaizodzivirira tepi 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 pasi.

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

Ziva kana boundaryyaiswa kune chero kukosha kunze 'scrollParent'kwe, chimiro position: staticchinoshandiswa .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 kuchinjisa anchor element.

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`	Chiitiko ichi chinodzingwa kana kudonhedza kwapera kuvanzwa kubva kumushandisi (ichamirira shanduko yeCSS, kuti ipedze).

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

Dropdowns

Overview

Accessibility

Mienzaniso

Single button dropdowns

Split button dropdowns

Kukura

Dropup musiyano

Dropright variation

Dropleft variation

Menu zvinhu

Menu alignment

Menu misoro

Menu dividers

Mafomu emenyu

Active menyu zvinhu

Akaremara menyu zvinhu

Usage

Via data hunhu

Via JavaScript

`data-toggle="dropdown"`zvichiri kudiwa

Options

Nzira

Zviitiko

Dropdowns

Overview

Accessibility

Mienzaniso

Single button dropdowns

Split button dropdowns

Kukura

Dropup musiyano

Dropright variation

Dropleft variation

Menu zvinhu

Menu alignment

Menu misoro

Dropdown header

Menu dividers

Mafomu emenyu

Active menyu zvinhu

Akaremara menyu zvinhu

Usage

Via data hunhu

Via JavaScript

data-toggle="dropdown"zvichiri kudiwa

Options

Nzira

Zviitiko

`data-toggle="dropdown"`zvichiri kudiwa