Dropdowns

Bi pêveka daketinê ya Bootstrap re ji bo nîşandana navnîşên lînkan û hêj bêtir pêveberên kontekstê biguherînin.

Têgihiştinî

Dropdown ji bo xuyangkirina navnîşên lînkan û hêj bêtir veguheztin, serpêhatiyên kontekstê ne. Ew bi pêveka dakêşana JavaScript-ê ya Bootstrap-ê ve girêdayî têne çêkirin. Ew bi tikandinê têne guheztin, ne bi hejandinê; ev biryarek sêwiranê ye.

Dropdowns li ser pirtûkxaneyek partiya sêyemîn, Popper.js , têne çêkirin, ku pozîsyona dînamîkî û vedîtina dîmenderê peyda dike. Pê bawer bin ku berî JavaScript-a Bootstrap-ê popper.min.js têxinbootstrap.bundle.min.js nav xwe an jî bikar bînin / bootstrap.bundle.jsya ku Popper.js heye. Popper.js ji bo danîna dakêşanan di navbaran de nayê bikar anîn lê ji ber ku pozîsyona dînamîk ne hewce ye.

Heke hûn JavaScript-a me ji çavkaniyê ava dikin, ew hewce dikeutil.js .

Gihîştina

Standarda WAI ARIA role="menu" widgetek rastîn diyar dike , lê ev taybetî ji bo pêşekên wekî serîlêdanê yên ku kiryar an fonksiyonan didin destpêkirin e. Pêşekên ARIA tenê dikarin hêmanên menu, hêmanên menuya qutiya kontrolê, hêmanên menuya bişkojka radyoyê, komên bişkojka radyoyê û jêr-pêşekan hebin.

Ji hêla din ve, dakêşanên Bootstrap têne sêwirandin ku ji bo cûrbecûr rewş û strukturên nîşankirinê gelemperî bin û werin sepandin. Mînakî, gengaz e ku meriv pelên dakêşan biafirîne ku têketinên zêde û kontrolên formê dihewîne, wek qadên lêgerînê an formên têketinê. Ji ber vê yekê, Bootstrap ne li bendê ye (ne jî bixweber lê zêde bike) yek ji wan roleû aria-taybetmendiyên ku ji bo pêşekên ARIA -ya rastîn hewce ne. Nivîskar neçar in ku van taybetmendiyên taybetî bi xwe vekin.

Lêbelê, Bootstrap ji bo piraniya danûstendinên menuya klavyeyê yên standard piştgirîya çêkirî lê zêde dike, wek mînak şiyana ku meriv di nav .dropdown-itemhêmanên kesane de bi karanîna bişkokên pîvazê bigere û menuyê bi ESCbişkojkê bigire.

Examples

Veguheztina dakêşanê (bişkojka xwe an girêdana xwe) û menuya dakêşanê di hundurê de .dropdown, an hêmanek din a ku diyar dike, bipêçin position: relative;. Dropdown dikarin ji <a>an <button>hêmanan werin avêtin da ku çêtir hewcedariyên weyên potansiyel bicîh bînin.

Bişkojka yekane

Her yek yek .btndikare bi hin guhertinên nîşankirinê ve were veguheztinek dakêşan. Li vir çawa hûn dikarin wan bi her <button>hêmanan re bixebitin:

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

Û bi <a>hêmanên:

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

Beşa çêtirîn ev e ku hûn dikarin bi her cûrbecûr bişkojkê re jî bikin:

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

Bi heman rengî, bişkojkên veqetandî bi hema hema bi heman nîşankirinê wekî dakêşanên yek bişkokê, lê bi lêzêdekirina ji .dropdown-toggle-splitbo cîhê rast li dora kêşeya dakêşanê biafirînin.

Em vê pola zêde bikar tînin da ku horizontî paddingli her du aliyên xêzikê% 25 kêm bikin û ya margin-leftku ji bo daxistina bişkojka birêkûpêk hatî zêdekirin jêbirin. Van guheztinên zêde hêlînê di bişkoka dabeşkirinê de navend dihêlin û li kêleka bişkoka sereke deverek lêdanek bi guncantir peyda dikin.

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

Mezinbûn

Daxistina bişkokan bi bişkokên her mezinahî re dixebitin, tevî bişkokên dakêşanê yên xwerû û dabeşkirî.

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

Tarîfa bikaranînê

Dropup

.dropupBi lêzêdekirina li hêmana dêûbav pêşekên daketinê yên li jor vekin.

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

.droprightBi lêzêdekirina li hêmana dêûbav pêşekên dakêşanê li milê rastê hêmanan vekin.

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

.dropleftBi lêzêdekirina li hêmana dêûbav pêşekên dakêşanê li milê çepê hêmanan vekin.

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

Ji hêla dîrokî ve naveroka menuya dakêşanê pêdivî bû ku zencîre bin, lê ew êdî bi v4 re ne wusa ye. Naha hûn dikarin vebijarkî <button>li şûna s-yê hêmanan di pelikên xwe de bikar bînin <a>.

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

Her weha hûn dikarin bi .dropdown-item-text. Dilxwazin ku bi CSS-ya xwerû an karûbarên nivîsê bêtir şêwaz bikin.

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

Jîr

.activeTiştên di pelika dakêşanê de zêde bikin da ku wan wekî çalak şêwaz bikin .

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

Bêmecel

.disabledTiştên di pelika daketinê de lê zêde bikin da ku wan wekî neçalak şêwaz bikin .

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

Ji hêla xwerû ve, pêşekek dakêşanê bixweber 100% ji jor û li milê çepê yê dêûbavê xwe tê danîn. Pêşeka daketinê .dropdown-menu-rightli a .dropdown-menuber bi rastê ve zêde bikin.

Serê xwe! Dropdowns bi saya Popper.js têne cîh kirin (ji bilî gava ku ew di navbarekê de ne).

<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

Sernavek lê zêde bikin da ku beşên çalakiyan di her menuya dakêşanê de nîşan bikin.

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

Dividers

Komên hêmanên menuya têkildar bi dabeşkerek veqetînin.

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

Nivîstok

Her metnek belaş di nav pêşekek dakêşanê de bi nivîsê ve bi cîh bikin û karûbarên valakirinê bikar bînin . Bala xwe bidinê ku hûn ê muhtemelen hewceyê şêwazên mezinbûnê yên din bin da ku firehiya menuyê asteng bikin.

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

Forms

Formek di nav pêşekek dakêşanê de bixin, an jî wê bikin pêşekek dakêşan, û karûbarên marjînal an pêlavê bikar bînin da ku cîhê neyînî ya ku hûn hewce dikin bidin wê.

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

Bikaranîn data-offsetan data-referenceji bo guheztina cîhê dakêşanê.

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

Bikaranîna

Bi riya taybetmendiyên daneyê an JavaScriptê, pêveka dakêşanê naveroka veşartî (menekên daketî) bi guheztina .showpola li ser xala navnîşa dêûbav diguhezîne. Taybetmendî data-toggle="dropdown"ji bo girtina pêşekên dakêşanê di astek serîlêdanê de pê ve girêdayî ye, ji ber vê yekê ramanek baş e ku hûn her gav wê bikar bînin.

Li ser cîhazên pêça-çalakkirî, vekirina peldankek hilgirên vala ( $.noop) mouseoverli zarokên tavilê yên <body>hêmanê zêde dike. Ev hacka bêkêmasî ya nebaş pêdivî ye ku meriv di delegasyona bûyera iOS-ê de li dor xeletiyek bixebite , ku wekî din rê li ber tepek li cîhek derveyî dakêşanê bigire ku koda ku dakêşanê digire dest pê bike. Dema ku dakêşandin girtî be, ev mouseoverrêkarên vala yên zêde têne rakirin.

Bi taybetmendiyên daneyê

Ji data-toggle="dropdown"bo guheztina peldankekê li lînkek an bişkokek zêde bikin.

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

Bi JavaScript

Bi navgîniya JavaScript-ê ve bang bikin:

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

`data-toggle="dropdown"`hîn jî pêwîst e

Her çiqas hûn bi JavaScript-ê ve gazî daketina xwe bikin an li şûna data-api-ê bikar bînin, data-toggle="dropdown"pêdivî ye ku her gav li ser hêmana dakêşanê hebe.

Vebijêrk

Vebijark dikarin bi taybetmendiyên daneyan an JavaScriptê ve werin derbas kirin. Ji bo taybetmendiyên daneyê, navê vebijarkê lê zêde bikin data-, wekî di data-offset="".

Nav	Awa	Destçûnî	Terîf
offset	hejmar \| string \| karî	0	Berhevkirina dakêşanê li gorî armanca xwe. Ji bo bêtir agahdarî serî li belgeyên offset yên Popper.js bidin .
flip	boolean	rast	Destûrê bide Dropdown ku di bûyera ku li ser hêmana referansê li hev biqelişe. Ji bo bêtir agahdarî serî li belgeyên flip ên Popper.js bidin .
tixûb	string \| pêve	'scrollParent'	Sînorê astengiya zêde ya pêşeka daketî. Nirxên `'viewport'`, `'window'`, `'scrollParent'`, an referansek HTMLElement (tenê JavaScript) qebûl dike. Ji bo bêtir agahdarî serî li belgeyên preventOverflow ya Popper.js bidin .
balkêşî	string \| pêve	'veguhertin'	Hêmana referansê ya menuya dakêşanê. Nirxên `'toggle'`, `'parent'`, an referansek HTMLElement qebûl dike. Ji bo bêtir agahdarî serî li Popper.js's referenceObject docs .
pêşkêşî	ben	'dînamîk'	Bi xwerû, em Popper.js ji bo pozîsyona dînamîkî bikar tînin. Vê bi neçalak bike `static`.

Nîşe dema boundaryku ji bilî nirxek din were danîn 'scrollParent', şêwaz li konteynerê position: statictê sepandin ..dropdown

Methods

Awa	Terîf
`$().dropdown('toggle')`	Menûya dakêşanê ya navbarek diyarkirî an navîgasyonek tabloyê vedike.
`$().dropdown('update')`	Positiona dakêşana hêmanek nûve dike.
`$().dropdown('dispose')`	Daxistina elementek hilweşîne.

Events

Hemî bûyerên dakêşanê li .dropdown-menuhêmana dêûbavê '' têne avêtin û xwedan relatedTargettaybetmendiyek e, ku nirxa wê hêmana lengerê ya guhezbar e. hide.bs.dropdownû hidden.bs.dropdownbûyeran clickEventtaybetmendiyek heye (tenê gava ku celebê bûyera orîjînal be click) ku ji bo bûyera klîk Tiştek Bûyerê dihewîne.

Bûyer	Terîf
`show.bs.dropdown`	Dema ku rêbaza mînaka nîşandanê tê gazî kirin, ev bûyer tavilê dişewite.
`shown.bs.dropdown`	Dema ku dakêşana ji bikarhênerê re xuya bibe (dê li benda veguheztinên CSS-ê bisekine, biqede), ev bûyer tê şewitandin.
`hide.bs.dropdown`	Dema ku rêbaza mînaka veşartinê hate gazî kirin, ev bûyer tavilê tê şewitandin.
`hidden.bs.dropdown`	Ev bûyer dema ku dakêşana ku ji bikarhênerê veşartî xilas bû (dê li benda veguheztinên CSS-ê bisekine, biqede) tê şewitandin.

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

Dropdowns

Têgihiştinî

Gihîştina

Examples

Bişkojka yekane

Split button

Mezinbûn

Tarîfa bikaranînê

Dropup

Dropright

Dropleft

Tiştên menu

Jîr

Bêmecel

Alignment menu

Naveroka menu

Headers

Dividers

Nivîstok

Forms

Bikaranîna

Bi taybetmendiyên daneyê

Bi JavaScript

`data-toggle="dropdown"`hîn jî pêwîst e

Vebijêrk

Methods

Events

Dropdowns

Têgihiştinî

Gihîştina

Examples

Bişkojka yekane

Split button

Mezinbûn

Tarîfa bikaranînê

Dropup

Dropright

Dropleft

Tiştên menu

Jîr

Bêmecel

Alignment menu

Naveroka menu

Headers

Sernavê dakêşanê

Dividers

Nivîstok

Forms

Vebijarkên Dropdown

Bikaranîna

Bi taybetmendiyên daneyê

Bi JavaScript

data-toggle="dropdown"hîn jî pêwîst e

Vebijêrk

Methods

Events

`data-toggle="dropdown"`hîn jî pêwîst e