Source

Açylýan ýerler

“Bootstrap” açylýan plugin bilen baglanyşyklaryň sanawyny we başga zatlary görkezmek üçin kontekstdäki örtükleri üýtgediň.

Gysgaça syn

Açylýan ýerler, baglanyşyklaryň sanawlaryny we başgalary görkezmek üçin üýtgedilip bilner, kontekstdäki örtükler. Olara goşulan Bootstrap açylýan JavaScript plugin bilen interaktiw ýasaldy. Olary basmak bilen däl-de, basmak bilen üýtgedýärler; bu bilgeşleýin dizaýn karary.

Açylýan ýerler dinamiki ýerleşişi we görnüşi kesgitlemegi üpjün edýän Popper.js üçünji tarap kitaphanasynda gurulýar . Bootstrap-yň JavaScript-den öň popper.min.js-i goşuň ýa-da Popper.js - i öz içine alýan bootstrap.bundle.min.js/ ulanyň. bootstrap.bundle.jsPopper.js dinamiki ýerleşiş talap edilmeýänligi sebäpli, deňiz panellerinde aşak düşýän ýerleri ýerleşdirmek üçin ulanylmaýar.

JavaScriptimizi çeşmeden gurýan bolsaňyz, talap edýärutil.js .

Elýeterlilik

WAI ARIA standarty hakyky role="menu"widjeti kesgitleýär , ýöne bu hereketlere ýa-da funksiýalara itergi berýän programma menýusyna mahsus. ARIA menýularynda diňe menýu elementleri, bellik gutusy menýu elementleri, radio düwme menýu elementleri, radio düwme toparlary we kiçi menýular bolup biler.

Beýleki tarapdan, “Bootstrap” -yň aşak düşmegi umumy we dürli ýagdaýlara we bellik gurluşlaryna degişlidir. Mysal üçin, gözleg meýdanlary ýa-da giriş formalary ýaly goşmaça girişleri we forma dolandyryşlaryny öz içine alýan açylan ýerleri döredip bolýar. Şol sebäpli, Bootstrap hakyky ARIA menýulary üçin zerur bolan atributlara garaşmaýar (ýa-da awtomatiki goşmaýar) role. Uthorsazyjylar bu has anyk häsiýetleri özleri goşmaly bolarlar.aria-

.dropdown-itemŞeýle-de bolsa, “Bootstrap ” kursor düwmelerini ulanyp aýratyn elementleriň üstünden geçmek we menýu açary bilen ýapmak ýaly adaty klawiatura menýusynyň özara täsirleri üçin içerki goldaw goşýar ESC.

Mysallar

Açylýan açary üýtgetmek (düwmäňiz ýa-da baglanyşyk) we açylýan menýu .dropdownýa-da yglan edýän başga bir element bilen örtüň position: relative;. Mümkin bolan zerurlyklaryňyza has laýyk gelmek üçin aşak gaçmalar ýa- <a>da elementler ýüze çykyp biler .<button>

Leeke düwme

Islendik .btnbelligi käbir üýtgeşmeler bilen açylan açyklyga öwrüp bolýar. <button>Olary iki element bilen işlemek üçin nädip goýup bilersiňiz :

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

<a>Elementler bilen :

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

Iň gowy tarapy, muny islendik düwme görnüşi bilen hem edip bilersiňiz:

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

Bölmek düwmesi

Edil şonuň ýaly-da, bir düwmäniň aşak gaçmagy bilen birmeňzeş bellik bilen bölünen düwme açylmalaryny dörediň, ýöne .dropdown-toggle-splitaçylýan karetiň töwereginde dogry aralyk goşmak bilen.

paddingKaretiň iki gapdalyndaky keseligine 25% azaltmak we margin-leftyzygiderli düwmeleriň açylmagy üçin goşulanlary aýyrmak üçin bu goşmaça synpy ulanýarys . Şol goşmaça üýtgeşmeler, kartany bölmek düwmesinde jemleýär we esasy düwmäniň gapdalyndaky has laýyk ölçeg meýdanyny üpjün edýär.

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

Ölçeg

Düwmeleriň açylmagy, ähli ululykdaky düwmeler bilen işleýär, şol sanda deslapky we bölünen açylýan düwmeler.

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

Görkezmeler

Taşlamak

Esasy elemente goşup .dropup, aşaky menýulary elementleriň üstünde işlediň.

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

Esasy elemente goşup, elementleriň sag tarapynda açylan menýulary işlediň .dropright.

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

.dropleftEne elementine goşmak bilen elementleriň çep tarapynda açylan menýulary işlediň .

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

Taryhy taýdan açylýan menýu mazmuny baglanyşyk bolmalydy , ýöne indi v4 bilen beýle bolmaz. Indi islege görä diňe s <button>däl-de, açylýan ýerleriňizdäki elementleri ulanyp bilersiňiz.<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>

Şeýle hem, interaktiw däl açylýan zatlary döredip bilersiňiz .dropdown-item-text. Customörite CSS ýa-da tekst enjamlary bilen hasam stilleşip bilersiňiz.

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

Işjeň

Aktiw.active görnüşde düzmek üçin açylan elementlere goşuň .

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

Maýyp

.disabledAçyk görnüşdäki zatlary goşuň , olary ýapyk görnüşde düzüň .

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

Düzgüne görä, açylýan menýu awtomatiki usulda ýokardan we ene-atasynyň çep tarapynda 100% ýerleşdirilýär. Açylýan menýuny saga deňleşdirmek üçin saga .dropdown-menu-rightgoşuň ..dropdown-menu

Başlar! Açylýan ýerler Popper.js-iň kömegi bilen ýerleşýär (deňiz panelinde bolanyndan başga).

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

Sözbaşylar

Islendik açylýan menýuda hereketleriň bölümlerini bellemek üçin sözbaşy goşuň.

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

Bölünýänler

Baglanyşykly menýu elementleriniň toparlaryny bölüň.

<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

Islendik erkin form tekstini açylýan menýuda ýerleşdiriň we aralyk hyzmatlaryny ulanyň . Menýu giňligini çäklendirmek üçin size goşmaça ululyk stilleriniň gerekdigini unutmaň.

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

Formalar

Açylýan menýuda bir forma goýuň ýa-da açylýan menýuda düzüň we zerur negatiw ýer bermek üçin margin ýa-da padding enjamlaryny ulanyň.

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

Açylýan ýeri ulanyň data-offsetýa-da üýtgediň.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>

Ulanylyşy

.showMaglumat atributlary ýa-da JavaScript arkaly, açylan plugin ene mazmuny sanawynda synpy üýtgedip gizlin mazmuny (açylýan menýular) üýtgedýär . Bu data-toggle="dropdown"aýratynlyk, programma derejesinde açylýan menýulary ýapmak üçin bil baglanýar, şonuň üçin ony hemişe ulanmak gowy zat.

Duýgurlyk bilen işleýän enjamlarda, açylmany açmak elementiň ýakyn çagalaryna boş ( $.noop) işleýjileri goşýar . Bu ýigrenji hack, iOS-nyň çäräniň wekiliýetinde bir çekeleşigiň üstünde işlemek üçin zerurdyr , bu bolsa aşak gaçýan kody açmagynyň öňüni alyp biler. Açylma ýapylansoň, bu goşmaça boş işleýänler aýrylýar.mouseover<body>mouseover

Maglumat atributlary arkaly

data-toggle="dropdown"Açylan zady üýtgetmek üçin baglanyşyk ýa-da düwme goşuň .

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

JavaScript arkaly

JavaScript arkaly açylanlara jaň ediň:

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

`data-toggle="dropdown"`henizem talap edilýär

Açylýan ýere JavaScript arkaly jaň edýändigiňize ýa-da ýerine maglumat-api ulanýandygyňyza garamazdan, data-toggle="dropdown"açylan trigger elementinde elmydama bolmaly.

Görnüş

Opsiýalar maglumat atributlary ýa-da JavaScript arkaly geçirilip bilner. Maglumat atributlary üçin, opsiýanyň adyny data-bolşy ýaly goşuň data-offset="".

Ady	Görnüşi	Bellenen	Düşündiriş
ofset	sany \| setir \| funksiýasy	0	Maksadyna görä aşak düşýän ofset. Has giňişleýin maglumat üçin Popper.js-iň ofset resminamalaryna serediň .
flip	boolean	dogry	Salgy elementiniň üstünde bir-biriniň üstünden düşen ýagdaýynda “Dropdown” -yň süýşmegine rugsat beriň. Has giňişleýin maglumat üçin Popper.js-iň flip resminamalaryna serediň .
araçäk	setir \| elementi	'scrollParent'	Açylýan menýunyň aşýan çäklendiriji araçägi. `'viewport'`,, ora `'window'`- `'scrollParent'`da HTMLElement salgylanmasynyň bahalaryny kabul edýär (diňe JavaScript). Has giňişleýin maglumat üçin Popper.js-iň öňüni alyş resminamalaryna serediň .
salgylanma	setir \| elementi	'üýtgetmek'	Açylýan menýunyň salgylanma elementi. `'toggle'`Bahalaryny ýa - `'parent'`da HTMLElement salgylanmasyny kabul edýär . Has giňişleýin maglumat üçin Popper.js-iň salgylanmaObject resminamalaryna serediň .
görkezmek	setir	'dinamiki'	Düzgüne görä, dinamiki ýerleşiş üçin Popper.js ulanýarys. Muny öçüriň `static`.

Haçan boundary-da başga bir gymmaty kesgitlenende 'scrollParent', stil konteýnerde position: staticulanylýar ..dropdown

Usullar

Usul	Düşündiriş
`$().dropdown('toggle')`	Berlen navbar ýa-da bellikli nawigasiýa açylýan menýusyny üýtgedýär.
`$().dropdown('update')`	Bir elementiň aşak düşýän ýerini täzeleýär.
`$().dropdown('dispose')`	Bir elementiň gaçmagyny ýok edýär.

Wakalar

.dropdown-menuDrophli açylan wakalar ene-atanyň elementine atylýar we relatedTargetgymmaty üýtgeýän labyr elementi bolan emlägi bar. hide.bs.dropdownwe hidden.bs.dropdownhadysalarda basmak hadysasy üçin Waka obýektini öz içine alýan häsiýet bar clickEvent(diňe asyl hadysanyň görnüşi bolanda ).click

Waka	Düşündiriş
`show.bs.dropdown`	Bu waka görkeziş usuly çagyrylanda derrew ýanýar.
`shown.bs.dropdown`	Bu waka ulanyja açyk görkezilende (CSS geçişleriniň garaşmagyna garaşýar) atylýar.
`hide.bs.dropdown`	Gizlin mysal usuly çagyrylanda bu waka derrew atylýar.
`hidden.bs.dropdown`	Bu waka ulanyjydan gizlenip gutarandan soň (CSS geçişlerine garaşar) atylýar.

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

Açylýan ýerler

Gysgaça syn

Elýeterlilik

Mysallar

Leeke düwme

Bölmek düwmesi

Ölçeg

Görkezmeler

Taşlamak

Dropright

Dropleft

Menýu elementleri

Işjeň

Maýyp

Menýu deňleşdirmek

Menýu mazmuny

Sözbaşylar

Bölünýänler

Tekst

Formalar

Ulanylyşy

Maglumat atributlary arkaly

JavaScript arkaly

`data-toggle="dropdown"`henizem talap edilýär

Görnüş

Usullar

Wakalar

Açylýan ýerler

Gysgaça syn

Elýeterlilik

Mysallar

Leeke düwme

Bölmek düwmesi

Ölçeg

Görkezmeler

Taşlamak

Dropright

Dropleft

Menýu elementleri

Işjeň

Maýyp

Menýu deňleşdirmek

Menýu mazmuny

Sözbaşylar

Açylýan sözbaşy

Bölünýänler

Tekst

Formalar

Açylyş opsiýalary

Ulanylyşy

Maglumat atributlary arkaly

JavaScript arkaly

data-toggle="dropdown"henizem talap edilýär

Görnüş

Usullar

Wakalar

`data-toggle="dropdown"`henizem talap edilýär