Dropdowns

Ganti overlay kontekstual kanggo nampilake dhaptar pranala lan liya-liyane nganggo plugin gulung mudhun Bootstrap.

Ringkesan

Dropdown bisa diganti, overlay kontekstual kanggo nampilake dhaptar pranala lan liya-liyane. Dheweke digawe interaktif karo plugin JavaScript dropdown Bootstrap sing kalebu. Padha diganti kanthi ngeklik, ora kanthi nglayang; iki kaputusan desain disengojo.

Dropdown dibangun ing perpustakaan pihak katelu, Popper.js , sing nyedhiyakake posisi dinamis lan deteksi viewport. Priksa manawa sampeyan kalebu popper.min.js sadurunge Bootstrap JavaScript utawa gunakake bootstrap.bundle.min.js/ bootstrap.bundle.jssing ngemot Popper.js. Popper.js ora digunakake kanggo nyelehake dropdown ing navbar sanajan posisi dinamis ora dibutuhake.

Yen sampeyan lagi mbangun JavaScript saka sumber, mbutuhakeutil.js .

Aksesibilitas

Standar WAI ARIA role="menu" nemtokake widget sing nyata , nanging iki khusus kanggo menu kaya aplikasi sing micu tumindak utawa fungsi. Menu ARIA mung bisa ngemot item menu, item menu kothak centhang, item menu tombol radio, grup tombol radio, lan sub-menu.

Dropdown Bootstrap, ing sisih liya, dirancang kanggo umum lan bisa ditrapake kanggo macem-macem kahanan lan struktur markup. Contone, sampeyan bisa nggawe dropdown sing ngemot input tambahan lan kontrol formulir, kayata kolom telusuran utawa formulir login. Mulane, Bootstrap ora ngarep-arep (utawa kanthi otomatis nambah) samubarang rolelan aria-atribut sing dibutuhake kanggo menu ARIA sing bener. Penulis kudu nyakup atribut sing luwih spesifik iki.

Nanging, Bootstrap nambahake dhukungan sing dibangun kanggo umume interaksi menu keyboard standar, kayata kemampuan kanggo mindhah .dropdown-itemunsur individu nggunakake tombol kursor lan nutup menu nganggo ESCtombol.

Tuladha

Bungkus pilihan gulung mudhun (tombol utawa link sampeyan) lan menu gulung mudhun ing .dropdown, utawa unsur liyane sing nyatakake position: relative;. Dropdown bisa dipicu saka <a>utawa <button>unsur supaya luwih cocog karo kabutuhan potensial sampeyan.

Tombol dropdown tunggal

Sembarang .btnsiji bisa diowahi dadi pilihan gulung mudhun kanthi sawetara owah-owahan markup. Mangkene carane sampeyan bisa nggarap <button>unsur kasebut:

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

Lan karo <a>unsur:

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

Sisih paling apik yaiku sampeyan bisa nindakake iki karo varian tombol apa wae:

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

Tombol pamisah gulung mudhun

Kajaba iku, nggawe dropdown tombol pamisah kanthi markup sing meh padha karo dropdown tombol siji, nanging kanthi tambahan .dropdown-toggle-splitkanggo jarak sing tepat ing sekitar caret molor.

Kita nggunakake kelas ekstra iki kanggo nyuda horisontal paddinging salah siji sisih caret karo 25% lan mbusak margin-leftsing ditambahake kanggo dropdowns tombol biasa. Owah-owahan ekstra kasebut njaga karet pusat ing tombol pamisah lan nyedhiyakake area hit sing luwih cocog ing jejere tombol utama.

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

ukuran

Tombol dropdown bisa digunakake karo tombol kabeh ukuran, kalebu tombol gulung standar lan pamisah.

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

Variasi dropup

Micu menu gulung mudhun ing ndhuwur unsur kanthi nambahake .dropupmenyang unsur induk.

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

Variasi dropright

Micu menu gulung mudhun ing sisih tengen unsur kanthi nambahake .droprightmenyang unsur induk.

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

Variasi dropleft

Micu menu gulung mudhun ing sisih kiwa unsur kanthi nambahake .dropleftmenyang unsur induk.

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

Isi menu dropdown historis kudu dadi pranala, nanging ora ana maneh karo v4. Saiki sampeyan bisa nggunakake <button>unsur ing dropdowns tinimbang mung <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>

Kanthi gawan, menu gulung mudhun kanthi otomatis dipanggonke 100% saka ndhuwur lan ing sisih kiwa wong tuwa. Tambah .dropdown-menu-rightmenyang .dropdown-menusisih tengen menu gulung mudhun.

Kepala munggah! Dropdowns dipanggonke thanks Popper.js (kajaba lagi sing ana ing navbar a).

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

Tambah header kanggo menehi label bagean tumindak ing menu gulung mudhun.

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

Pisah klompok item menu sing gegandhengan karo 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>

Sijine formulir ing menu gulung mudhun, utawa nggawe menyang menu gulung mudhun, lan nggunakake margin utawa padding keperluan kanggo menehi papan negatif sing dibutuhake.

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

Tambah .activemenyang item ing gulung mudhun kanggo gaya minangka aktif .

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

Tambah .disabledmenyang item ing gulung mudhun kanggo gaya minangka dipatèni .

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

Panggunaan

Liwat atribut data utawa JavaScript, plugin gulung mudhun ngowahi konten sing didhelikake (menu gulung mudhun) kanthi ngowahi .showkelas ing item dhaptar wong tuwa. Atribut data-toggle="dropdown"kasebut diandelake kanggo nutup menu gulung mudhun ing tingkat aplikasi, mula luwih becik nggunakake aplikasi kasebut.

Ing piranti sing aktif tutul, mbukak dropdown nambah panangan kosong ( $.noop) mouseovermenyang anak langsung saka <body>unsur. Iki hack ngakoni elek perlu kanggo ngubengi quirk ing iOS 'delegasi acara , kang digunakake bakal nyegah tunyuk ngendi wae njaba dropdown saka pemicu kode sing nutup dropdown. Sawise gulung mudhun ditutup, panangan kosong tambahan mouseoveriki dibusak.

Liwat atribut data

Tambah data-toggle="dropdown"menyang link utawa tombol kanggo ngalih gulung mudhun.

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

Liwat JavaScript

Telpon dropdown liwat JavaScript:

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

`data-toggle="dropdown"`isih dibutuhake

Ora preduli apa sampeyan nelpon dropdown liwat JavaScript utawa nggunakake data-api, mesthine data-toggle="dropdown"kudu ana ing unsur pemicu dropdown.

Pilihan

Opsi bisa dilewati liwat atribut data utawa JavaScript. Kanggo atribut data, tambahake jeneng pilihan menyang data-, kaya ing data-offset="".

jeneng	Jinis	Default	Katrangan
ngimbangi	nomer \| senar \| fungsi	0	Offset saka dropdown relatif kanggo target. Kanggo informasi luwih lengkap waca docs offset Popper.js .
flip	boolean	bener	Ngidini Dropdown kanggo flip yen ana tumpang tindih ing unsur referensi. Kanggo informasi luwih lengkap, deleng dokumen flip Popper.js .
wates	senar \| unsur	'scrollParent'	Watesan watesan kebanjiran saka menu gulung mudhun. Nampa nilai `'viewport'`, `'window'`, `'scrollParent'`, utawa referensi HTMLElement (JavaScript mung). Kanggo informasi luwih lengkap waca Popper.js kang preventOverflow docs .

Elinga yen boundarywis disetel kanggo sembarang Nilai liyane saka 'scrollParent', gaya position: staticditrapake kanggo .dropdownwadhah.

Metode

Metode	Katrangan
`$().dropdown('toggle')`	Ngalih menu gulung mudhun saka navbar utawa pandhu arah tab.
`$().dropdown('update')`	Nganyari posisi gulung mudhun unsur.
`$().dropdown('dispose')`	Ngancurake dropdown unsur.

Acara

Kabeh acara gulung mudhun murub ing .dropdown-menuunsur induk 's lan duwe relatedTargetproperti, kang Nilai unsur anchor toggling.

Acara	Katrangan
`show.bs.dropdown`	Acara iki langsung murub nalika metode conto acara diarani.
`shown.bs.dropdown`	Acara iki dipecat nalika dropdown wis katon kanggo pangguna (bakal ngenteni transisi CSS, rampung).
`hide.bs.dropdown`	Acara iki langsung dipecat nalika metode conto ndhelikake wis diarani.
`hidden.bs.dropdown`	Acara iki dipecat nalika dropdown wis rampung didhelikake saka pangguna (bakal ngenteni transisi CSS, rampung).

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

Dropdowns

Ringkesan

Aksesibilitas

Tuladha

Tombol dropdown tunggal

Tombol pamisah gulung mudhun

ukuran

Variasi dropup

Variasi dropright

Variasi dropleft

Item menu

Alignment menu

Header menu

Pembagi menu

Wangun menu

Item menu aktif

Item menu dipatèni

Panggunaan

Liwat atribut data

Liwat JavaScript

`data-toggle="dropdown"`isih dibutuhake

Pilihan

Metode

Acara

Dropdowns

Ringkesan

Aksesibilitas

Tuladha

Tombol dropdown tunggal

Tombol pamisah gulung mudhun

ukuran

Variasi dropup

Variasi dropright

Variasi dropleft

Item menu

Alignment menu

Header menu

Header gulung mudhun

Pembagi menu

Wangun menu

Item menu aktif

Item menu dipatèni

Panggunaan

Liwat atribut data

Liwat JavaScript

data-toggle="dropdown"isih dibutuhake

Pilihan

Metode

Acara

`data-toggle="dropdown"`isih dibutuhake