Nneɛma a wɔde gu fam

Toggle contextual overlays ma ɛkyerɛ links a wɔahyehyɛ ne nea ɛkeka ho denam Bootstrap dropdown plugin no so.

Nsɛm a Wɔaka abom

Dropdowns yɛ toggleable, nsɛm a ɛfa ho a wɔde kata so a wɔde kyerɛ link ahorow a wɔahyehyɛ ne nea ɛkeka ho. Wɔde Bootstrap dropdown JavaScript plugin a ɛka ho no ayɛ nkitahodi. Wɔnam klik so na ɛsakra wɔn, na ɛnyɛ sɛ wɔde wɔn ho to so; eyi yɛ gyinaesi a wɔahyɛ da ayɛ wɔ nhyehyɛe ho.

Wɔasi dropdowns wɔ nhomakorabea a ɛto so abiɛsa, Popper.js , a ɛma gyinabea a ɛyɛ nnam ne viewport detection. Hwɛ sɛ wode popper.min.js bɛka ho ansa na Bootstrap JavaScript no aba anaa fa bootstrap.bundle.min.js/ bootstrap.bundle.jsa Popper.js wom no di dwuma. Popper.js nnyɛ mfa nsi dropdowns wɔ navbars ɛwom sɛ sɛ dynamic positioning nhia.

Sɛ worekyekye yɛn JavaScript no afi fibea a, ɛhwehwɛ sɛutil.js .

Nneɛma a wotumi nya

WAI ARIA gyinapɛn no kyerɛkyerɛ widget ankasa mu role="menu", nanso eyi yɛ pɔtee ma application-te sɛ menus a ɛkanyan nneyɛe anaa dwumadi ahorow. ARIA menu ahorow no betumi akura menu nneɛma, checkbox menu nneɛma, radio bɔtn menu nneɛma, radio bɔtn akuw, ne menu nketewa nkutoo.

Nanso, wɔayɛ Bootstrap dropdowns no sɛnea ɛbɛyɛ a ɛbɛyɛ nea ɛfa biribiara ho na ɛyɛ adwuma wɔ tebea horow ne agyiraehyɛde nhyehyɛe ahorow mu. Sɛ nhwɛso no, wobetumi ayɛ dropdowns a ɛwɔ inputs foforo ne form controls, te sɛ search fields anaa login forms. Esiane eyi nti, Bootstrap nhwɛ kwan (anaasɛ ɛde bɛka ho ankasa) rolene aria-su ahorow a ɛho hia ma nokware ARIA menu ahorow no mu biara. Ɛsɛ sɛ akyerɛwfo ankasa de saa su ahorow a ɛyɛ pɔtee kɛse yi ka ho.

Nanso, Bootstrap de mmoa a wɔasisi mu ka ho ma keyboard menu nkitahodi dodow no ara a ɛyɛ gyinapɛn, te sɛ tumi a wode bɛfa nneɛma ankorankoro .dropdown-itemmu denam cursor safoa no so na wode safoa no ato menu no mu ESC.

Nhwɛso ahorow

Fa dropdown no toggle (wo button anaa link) ne dropdown menu no kyekyere .dropdown, anaa element foforo a ɛpae mu ka position: relative;. Wobetumi akanyan dropdowns afi <a>anaa <button>elements mu ma ɛne w’ahiade ahorow a ebetumi aba no ahyia yiye.

Button biako a ɛwɔ ase

.btnWobetumi adan single biara ayɛ no dropdown toggle a markup nsakrae ahorow bi wom. Sɛnea wubetumi de wɔn ayɛ adwuma ne <button>elements abien no mu biara ni:

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

Na ɛne <a>element ahorow:

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

Ɔfã a eye sen biara ne sɛ wubetumi ayɛ eyi ne button variant biara, nso:

<!-- 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 a ɛwɔ ase no

Saa ara nso na yɛ split button dropdowns a ɛkame ayɛ sɛ markup koro no ara sɛ button dropdowns biako, nanso fa ka ho .dropdown-toggle-splitma kwan a ɛfata twa dropdown caret no ho hyia.

Yɛde saa adesua foforo yi di dwuma de tew horizontal paddinga ɛwɔ caret no afã abien no nyinaa so 25% na yɛayi nea margin-leftwɔde aka ho ama daa button dropdowns no. Saa nsakrae afoforo no ma caret no kɔ mfinimfini wɔ split button no mu na ɛma hit area a ne kɛse fata kɛse wɔ button titiriw no nkyɛn.

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

Sizing a wɔde yɛ nneɛma

Button dropdowns ne buttons a ne kɛse nyinaa yɛ adwuma, a default ne split dropdown buttons ka ho.

<!-- 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 nsakrae a ɛba

Trigger dropdown menus a ɛwɔ element ahorow no atifi denam .dropupawofo element no a wode bɛka ho no so.

<!-- 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 nsakrae a ɛba

Trigger dropdown menus wɔ elements no nifa so denam .droprightawofo element no a wode bɛka ho no so.

<!-- 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 a ɛsakrasakra

Trigger dropdown menus wɔ elements no benkum so denam .dropleftawofo element no a wode bɛka ho no so.

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

Abakɔsɛm mu no na ɛsɛ sɛ dropdown menu mu nsɛm yɛ links, nanso ɛnyɛ saa bio wɔ v4 ho. Afei wobɛtumi de <button>elements adi dwuma wɔ wo dropdowns no mu sen sɛ wode <a>s kɛkɛ bedi dwuma.

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

Sɛnea wɔahyɛ no, wɔde menu a ɛba fam no si hɔ ankasa 100% fi soro ne ne wofo no benkum so. Fa ka .dropdown-menu-righta ho .dropdown-menukɔ nifa so hyɛ dropdown menu no mu.

Ti a ɛwɔ soro! Dropdowns no wɔ gyinabea aseda Popper.js (gye sɛ bere a ɛwɔ navbar mu).

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

Fa asɛmti bi ka ho na fa nkyerɛwde afã horow a ɛfa nneyɛe ho wɔ dropdown menu biara mu.

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

Fa divider yiyi nneɛma a ɛfa ho a ɛwɔ menu mu no mu akuw mu.

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

Fa kratasin bi hyɛ dropdown menu mu, anaa yɛ no dropdown menu, na fa margin anaa padding utilities di dwuma ma no negative space a wopɛ.

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

Fa ka .activenneɛma a ɛwɔ dropdown no ho na fa style no sɛ active .

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

Fa ka .disablednneɛma a ɛwɔ dropdown no mu ho na fa style no sɛ disabled .

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

Sɛnea wɔde di dwuma

Ɛnam data attributes anaa JavaScript so no, dropdown plugin no dannan nneɛma a ahintaw (dropdown menus) denam .showadesuakuw no a ɛsakra wɔ ɔwofo list ade no so. Wɔde data-toggle="dropdown"wɔn ho to su no so de to dropdown menus mu wɔ application level bi so, enti ɛyɛ adwene pa sɛ wode bedi dwuma bere nyinaa.

Wɔ mfiri a wɔde nsa ka so no, sɛ wubue dropdown a, ɛde handlers a hwee nni mu ( $.noop) ka element mouseoverno mma a wɔbɛn wɔn ntɛm ara no ho. <body>This admittedly ugly hack is necessary to work around a quirk in iOS’ event delegation , a anka ɛbɛma tap biara a ɛwɔ dropdown no akyi a ɛbɛkanyan code a ɛto dropdown no. Sɛ wɔto dropdown no mu wie a, woyi saa mouseoverhandlers foforo a hwee nni mu yi fi hɔ.

Via data su ahorow so

Fa ka data-toggle="dropdown"link anaa button bi ho na dannan dropdown bi.

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

Ɛdenam JavaScript so

Frɛ nsɛm a ɛwɔ ase hɔ no denam JavaScript so:

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

`data-toggle="dropdown"`wɔda so ara hwehwɛ

Ɛmfa ho sɛ ebia wobɛfrɛ wo dropdown no denam JavaScript so anaasɛ wode data-api no bedi dwuma mmom no, data-toggle="dropdown"ɛhwehwɛ sɛ ɛwɔ hɔ bere nyinaa wɔ dropdown no trigger element no so.

Nneɛma a wubetumi apaw

Wobetumi afa data attributes anaa JavaScript so de nneɛma a wobɛpaw no akɔ. Sɛ wopɛ data su ahorow a, fa option din no ka ho data-, sɛnea ɛwɔ data-offset="".

Din	Korɔ	Mfiaseɛ	Nkyerɛmu
offset a wɔde hyɛ mu	nɔma \| ahama \| dwumadie	0 na ɛwɔ hɔ	Offset a ɛfa dropdown no ho a ɛfa ne botae ho. Sɛ wopɛ nsɛm pii a hwɛ Popper.js offset docs .
dane	boolean ho asɛm	nokorɛ	Ma Dropdown no kwan ma ɛndannan sɛ ɛba sɛ biribi akata so wɔ reference element no so a. Sɛ wopɛ nsɛm pii a hwɛ Popper.js flip docs .
ɔhye so	ahama \| adeɛ	'scrollƆwofo'.	Overflow anohyeto hye a ɛwɔ dropdown menu no mu. Gye `'viewport'`, `'window'`, `'scrollParent'`, anaa HTMLElement nkyerɛkyerɛmu bi (JavaScript nkutoo) botae ahorow tom. Sɛ wopɛ nsɛm pii a hwɛ Popper.js preventOverflow docs .

Hyɛ no nsow bere boundarya wɔde ato botae biara a ɛnyɛ 'scrollParent', wɔde ɔkwan position: staticno di dwuma wɔ .dropdownade no so.

Akwan a wɔfa so yɛ

Ɔkwan	Nkyerɛmu
`$().dropdown('toggle')`	Toggles dropdown menu a ɛwɔ navbar anaa tabbed navigation a wɔde ama no mu.
`$().dropdown('update')`	Ɔyɛ element bi a ɛwɔ dropdown no gyinabea foforo.
`$().dropdown('dispose')`	Ɔsɛe element bi a ɛwɔ dropdown no.

Nsɛm a esisi

Wɔde dropdown nsɛm a esisi nyinaa tow wɔ .dropdown-menu's awofo element no so na ɛwɔ relatedTargetagyapade, a ne bo yɛ toggling anchor element.

Dwumadie	Nkyerɛmu
`show.bs.dropdown`	Saa adeyɛ yi tow ntɛm ara bere a wɔfrɛ show instance kwan no.
`shown.bs.dropdown`	Wɔtow saa adeyɛ yi bere a wɔayɛ dropdown no ahu nea ɔde di dwuma no (bɛtwɛn ma CSS nsakrae ahorow, awie).
`hide.bs.dropdown`	Wɔtow saa adeyɛ yi ntɛm ara bere a wɔafrɛ hide instance kwan no.
`hidden.bs.dropdown`	Wɔtow saa adeyɛ yi bere a wɔawie dropdown no a wɔde asie ama ɔdefo no (bɛtwɛn ma CSS nsakrae ahorow, awie).

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

Nneɛma a wɔde gu fam

Nsɛm a Wɔaka abom

Nneɛma a wotumi nya

Nhwɛso ahorow

Button biako a ɛwɔ ase

Split button a ɛwɔ ase no

Sizing a wɔde yɛ nneɛma

Dropup nsakrae a ɛba

Dropright nsakrae a ɛba

Dropleft a ɛsakrasakra

Menu mu nneɛma

Menu a wɔde hyɛ mu

Menu nsɛmti ahorow

Menu mu nneɛma a wɔkyekyɛ mu

Menu nkrataa ahorow

Menu mu nneɛma a ɛyɛ adwuma

Menu mu nneɛma a wɔagyae

Sɛnea wɔde di dwuma

Via data su ahorow so

Ɛdenam JavaScript so

`data-toggle="dropdown"`wɔda so ara hwehwɛ

Nneɛma a wubetumi apaw

Akwan a wɔfa so yɛ

Nsɛm a esisi

Nneɛma a wɔde gu fam

Nsɛm a Wɔaka abom

Nneɛma a wotumi nya

Nhwɛso ahorow

Button biako a ɛwɔ ase

Split button a ɛwɔ ase no

Sizing a wɔde yɛ nneɛma

Dropup nsakrae a ɛba

Dropright nsakrae a ɛba

Dropleft a ɛsakrasakra

Menu mu nneɛma

Menu a wɔde hyɛ mu

Menu nsɛmti ahorow

Dropdown asɛmti no

Menu mu nneɛma a wɔkyekyɛ mu

Menu nkrataa ahorow

Menu mu nneɛma a ɛyɛ adwuma

Menu mu nneɛma a wɔagyae

Sɛnea wɔde di dwuma

Via data su ahorow so

Ɛdenam JavaScript so

data-toggle="dropdown"wɔda so ara hwehwɛ

Nneɛma a wubetumi apaw

Akwan a wɔfa so yɛ

Nsɛm a esisi

`data-toggle="dropdown"`wɔda so ara hwehwɛ