Dropdowns

Toggle overlays kontekstual pikeun mintonkeun daptar tumbu jeung leuwih ku Bootstrap dropdown plugin.

Ihtisar

Dropdowns tiasa toggle, overlays kontekstual pikeun mintonkeun daptar tumbu sareng seueur deui. Éta didamel interaktif sareng plugin JavaScript dropdown Bootstrap anu kalebet. Aranjeunna toggled ku ngaklik, teu ku hovering; ieu kaputusan design ngahaja.

Dropdowns diwangun dina perpustakaan pihak katilu, Popper.js , nu nyadiakeun positioning dinamis sarta deteksi viewport. Pastikeun kalebet popper.min.js sateuacan Bootstrap JavaScript atanapi nganggo bootstrap.bundle.min.js/ bootstrap.bundle.jsanu ngandung Popper.js. Popper.js teu dipaké pikeun posisi dropdowns dina navbars sanajan posisi dinamis teu diperlukeun.

Upami anjeun nuju ngawangun JavaScript kami tina sumber, peryogiutil.js .

Aksesibilitas

Standar WAI ARIA ngahartikeun role="menu"widget sabenerna , tapi ieu husus pikeun ménu kawas aplikasi nu memicu tindakan atawa fungsi. Menu ARIA ngan ukur tiasa ngandung item ménu, item ménu kotak centang, item ménu tombol radio, grup tombol radio, sareng sub-menu.

Dropdown Bootstrap, di sisi anu sanés, dirancang pikeun umum sareng tiasa dianggo pikeun sababaraha kaayaan sareng struktur markup. Contona, kasebut nyaéta dimungkinkeun pikeun nyieun dropdowns nu ngandung inputs tambahan sarta kontrol formulir, kayaning widang teangan atawa formulir login. Ku sabab kitu, Bootstrap henteu nyangka (atanapi sacara otomatis nambihan) salah sahiji rolesareng aria-atribut anu diperyogikeun pikeun ménu ARIA anu leres. Pangarang kedah ngalebetkeun atribut anu langkung spésifik ieu nyalira.

Nanging, Bootstrap nambihan dukungan anu diwangun pikeun sabagéan ageung interaksi ménu keyboard standar, sapertos kamampuan pikeun mindahkeun .dropdown-itemelemen individu nganggo konci kursor sareng nutup ménu nganggo ESCkonci éta.

Contona

Bungkus toggle dropdown urang (tombol atawa link anjeun) jeung menu dropdown dina .dropdown, atawa elemen séjén nu nyatakeun position: relative;. Dropdowns tiasa dipicu tina <a>atanapi <button>elemen pikeun nyocogkeun ka kabutuhan poténsial anjeun.

Tunggal tombol dropdowns

Sakur tunggal .btntiasa dirobih janten togél lungsur sareng sababaraha parobihan markup. Kieu kumaha anjeun tiasa nempatkeun aranjeunna damel sareng unsur- <button>unsur:

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

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

Bagian anu pangsaéna nyaéta anjeun tiasa ngalakukeun ieu sareng varian tombol naon waé:

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

Dropdowns tombol pamisah

Nya kitu, jieun dropdowns tombol pamisah jeung markup ampir sarua salaku dropdowns tombol tunggal, tapi ditambahan .dropdown-toggle-splitpikeun spasi ditangtoskeun sabudeureun caret dropdown.

Kami nganggo kelas tambahan ieu pikeun ngirangan horisontal paddingdina dua sisi karet ku 25% sareng ngahapus margin-leftanu ditambah pikeun turunna tombol biasa. Parobihan tambahan éta ngajaga karét dipuseurkeun dina tombol pamisah sareng nyayogikeun daérah pencét ukuran anu langkung pas gigireun 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 dropdowns tiasa dianggo sareng tombol sadaya ukuran, kalebet tombol dropdown standar sareng 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 ménu dropdown luhureun elemen ku nambahkeun .dropupkana elemen indungna.

<!-- 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 ménu dropdown di katuhu tina elemen ku nambahkeun .droprightkana elemen indungna.

<!-- 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 ménu dropdown di kénca elemen ku nambahkeun .dropleftkana elemen indungna.

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

Sacara sajarah, eusi ménu lungsur kedah janten tautan, tapi éta henteu deui kasus v4. Ayeuna anjeun optionally bisa ngagunakeun <button>elemen dina dropdowns anjeun tinimbang ngan <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>

Sacara standar, menu dropdown otomatis diposisikan 100% ti luhur jeung sapanjang sisi kénca indungna. Tambahkeun .dropdown-menu-rightka .dropdown-menukatuhu align menu dropdown.

Mastaka tegak! Dropdowns diposisikan berkat Popper.js (iwal lamun aranjeunna dikandung dina 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>

Tambahkeun lulugu pikeun labél bagian tina lampah dina menu dropdown mana wae.

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

Misahkeun grup item menu nu patali jeung divider a.

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

Nempatkeun formulir dina menu dropdown, atawa nyieun kana menu dropdown, sarta ngagunakeun margin atawa padding Utiliti pikeun masihan eta spasi négatip nu peryogi.

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

Tambahkeun .activeka item dina dropdown pikeun gaya aranjeunna salaku aktip .

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

Tambahkeun .disabledka item dina dropdown pikeun gaya aranjeunna salaku ditumpurkeun .

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

Pamakéan

Ngaliwatan atribut data atanapi JavaScript, plugin dropdown toggles eusi disumputkeun (dropdown menu) ku toggling .showkelas dina item daptar indungna. Atribut data-toggle="dropdown"ieu diandelkeun pikeun nutup ménu lungsur dina tingkat aplikasi, janten ide anu sae pikeun nganggo éta.

Dina alat touch-diaktipkeun, muka dropdown nambahkeun kosong ( $.noop) mouseoverpawang ka barudak langsung <body>unsur. Hack anu diakui awon ieu diperyogikeun pikeun ngerjakeun quirk dina delegasi acara ios , anu bakal nyegah ketok dimana waé di luar dropdown tina pemicu kode anu nutup turunna. Sakali dropdown ditutup, pawang kosong tambahan mouseoverieu dihapus.

Via atribut data

Tambihkeun data-toggle="dropdown"kana tautan atanapi tombol pikeun ngagentoskeun turunna.

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

Ngaliwatan JavaScript

Nelepon dropdowns via JavaScript:

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

`data-toggle="dropdown"`masih diperlukeun

Paduli naha anjeun nelepon dropdown Anjeun liwat JavaScript atawa gantina ngagunakeun data-api, data-toggle="dropdown"salawasna diperlukeun pikeun hadir dina elemen pemicu dropdown urang.

Pilihan

Pilihan bisa diliwatan via atribut data atawa JavaScript. Pikeun atribut data, tambahkeun nami pilihan ka data-, sapertos dina data-offset="".

Ngaran	Tipe	Default	Katerangan
ngimbangan	angka \| string \| fungsi	0	Offset tina dropdown relatif ka target na. Kanggo inpo nu leuwih lengkep tingal docs offset Popper.js urang .
malik	boolean	leres	Ngidinan Dropdown malik upami aya tumpang tindih dina unsur rujukan. Kanggo inpo nu leuwih lengkep tingal docs flip Popper.js urang .
wates	string \| unsur	'scrollParent'	Wates konstrain overflow tina menu dropdown. Narima nilai `'viewport'`, `'window'`, `'scrollParent'`, atawa rujukan HTMLElement (JavaScript wungkul). Kanggo inpo nu leuwih lengkep tingal Popper.js urang preventOverflow docs .

Catet lamun boundarydisetel ka nilai nu mana wae nu lian ti 'scrollParent', gaya position: staticditerapkeun kana .dropdownwadahna.

Métode

Métode	Katerangan
`$().dropdown('toggle')`	Toggles menu dropdown tina navbar tinangtu atawa navigasi tab.
`$().dropdown('update')`	Ngamutahirkeun posisi turunna unsur.
`$().dropdown('dispose')`	Ngancurkeun dropdown hiji unsur.

Kajadian

Kabéh acara dropdown dipecat dina .dropdown-menu's unsur indungna sarta mibanda relatedTargetsipat, anu nilaina unsur jangkar toggling.

Acara	Katerangan
`show.bs.dropdown`	Kajadian ieu langsung hurung nalika metode conto acara disebut.
`shown.bs.dropdown`	Kajadian ieu dipecat nalika turunna parantos katingali ku pangguna (bari ngadagoan transisi CSS, réngsé).
`hide.bs.dropdown`	Kajadian ieu langsung dipecat nalika metode conto sumputkeun parantos disebut.
`hidden.bs.dropdown`	Acara ieu dipecat nalika dropdown tos rengse disumputkeun ti pamaké (bakal ngadagoan transisi CSS, pikeun ngalengkepan).

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

Dropdowns

Ihtisar

Aksesibilitas

Contona

Tunggal tombol dropdowns

Dropdowns tombol pamisah

Ukuran

Variasi dropup

Variasi dropright

Variasi dropleft

Item menu

alignment menu

Menu lulugu

Pembagi menu

Bentuk menu

Item ménu aktip

Item menu ditumpurkeun

Pamakéan

Via atribut data

Ngaliwatan JavaScript

`data-toggle="dropdown"`masih diperlukeun

Pilihan

Métode

Kajadian

Dropdowns

Ihtisar

Aksesibilitas

Contona

Tunggal tombol dropdowns

Dropdowns tombol pamisah

Ukuran

Variasi dropup

Variasi dropright

Variasi dropleft

Item menu

alignment menu

Menu lulugu

lulugu dropdown

Pembagi menu

Bentuk menu

Item ménu aktip

Item menu ditumpurkeun

Pamakéan

Via atribut data

Ngaliwatan JavaScript

data-toggle="dropdown"masih diperlukeun

Pilihan

Métode

Kajadian

`data-toggle="dropdown"`masih diperlukeun