Nusiwo wotsɔna ƒua gbe

Trɔ nya siwo ƒo xlãe ƒe nutsyɔtsyɔwo hena kadodowo ƒe xexlẽdzesiwo kple bubuwo ɖeɖefia kple Bootstrap ƒe ƒuƒoƒoa.

Kpɔɖeŋunyagbɔgblɔ

Dropdowns nye toggleable, contextual overlays hena kadodowo ƒe xexlẽdzesiwo ɖeɖefia kple bubuwo. Wowɔ wo be woawɔ nu kple Bootstrap ƒe JavaScript ƒe kpeɖeŋutɔ si le eme. Wotrɔa asi le wo ŋu to asiƒoƒo ɖe wo dzi me, ke menye to asiƒoƒo ɖe wo dzi me o; esia nye nyametsotso si woɖo koŋ wɔ ɖe aɖaŋuwɔwɔ ŋu.

Wotu nusiwo wotsɔna ƒua gbe ɖe ame etɔ̃lia ƒe agbalẽdzraɖoƒe aɖe dzi, Popper.js , si naa teƒe si woate ŋu atrɔ asi le kple nukpɔkpɔ ƒe ʋɔtruwo didi. Kpɔ egbɔ be yede popper.min.js do ŋgɔ na Bootstrap ƒe JavaScript alo zã bootstrap.bundle.min.js/ bootstrap.bundle.jssi me Popper.js le. Popper.js mezãna tsɔ ɖoa dropdowns ɖe navbars me togbɔ be abe dynamic positioning mehiã o ene.

Ne èle míaƒe JavaScript tum tso dzɔtsoƒe la, ebia beutil.js .

Mɔnukpɔkpɔwo ƒe Mɔnukpɔkpɔ

WAI ARIA ƒe dzidzenu ɖe role="menu"widget ŋutɔŋutɔ gɔme , gake esia nye menu siwo le abe dɔwɔwɔ ene siwo ʋãa nuwɔna alo dɔwɔwɔwo koŋ. ARIA ƒe nuɖuɖuwo ate ŋu anye nusiwo le menu me, aɖaka me nu siwo le aɖaka me, radio ƒe abɔta ƒe nuɖuɖu ƒe akpawo, radio ƒe abɔta ƒe ƒuƒoƒo, kple menu suewo ko.

Gake wowɔ Bootstrap ƒe dropdowns ya be woanye esiwo wozãna le mɔ vovovowo nu eye woate ŋu azã wo ɖe nɔnɔme vovovowo kple dzesideɖoɖowo me. Le kpɔɖeŋu me, anya wɔ be woawɔ nusiwo woatsɔ ade eme siwo me nyatakaka bubuwo kple agbalẽviwo dzi kpɔkpɔ le, abe didiƒewo alo agbalẽvi siwo dzi woato age ɖe eme ene. Le susu sia ta la, Bootstrap mekpɔ mɔ (alo tsɔe kpe ɖe eŋu le eɖokui si) rolekple aria-nɔnɔme siwo hiã na ARIA ƒe nuɖuɖu vavãwo dometɔ aɖeke o. Ele be agbalẽŋlɔlawo ŋutɔ nade nɔnɔme siawo siwo le tẽ wu la eme.

Ke hã, Bootstrap tsɔa kpekpeɖeŋu si wotu ɖe eme kpena ɖe keyboard menu ƒe kadodo siwo wozãna ɖaa ƒe akpa gãtɔ ŋu, abe ŋutete si le ame si be wòaʋu to .dropdown-itemnu ɖekaɖekawo me to cursor keys zazã me eye nàtu menu la kple ESCkey la ene.

Kpɔɖeŋuwo

Kpe fli si le fli dzi ƒe toggle (wò abɔta alo kadodo) kple nu si le fli dzi la ɖe .dropdown, alo nu bubu si ɖe gbeƒã position: relative;. Woate ŋu aʋã dropdowns tso <a>alo <button>elements be wòasɔ ɖe wò nuhiahiã siwo ate ŋu adzɔ nu nyuie wu.

Abɔti ɖeka ƒe ʋuʋudediwo

Woateŋu atrɔ ɖekaɖeka ɖesiaɖe .btnwòazu dropdown toggle kple dzesidede tɔtrɔ aɖewo. Alesi nàte ŋu atsɔ wo ade dɔwɔwɔ me kple nu eveawo dometɔ ɖesiaɖee nye esi <button>:

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

Eye kple <a>nu veviwo:

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

Akpa nyuitɔ kekeakee nye be àte ŋu awɔ esia kple button variant ɖesiaɖe, hã:

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

Ma abɔta ƒe akpa siwo le tsia dzi

Nenema ke wɔ split button dropdowns kple dzeside ɖeka kloe abe button ɖeka dropdowns ene, gake nàtsɔe akpe ɖe eŋu .dropdown-toggle-splithena dometsotso nyuitɔ ƒo xlã dropdown caret la.

Míezãa klass bubu sia tsɔ ɖea horizontal paddingsi le caret la ƒe akpa eveawo dzi kpɔtɔna 25% eye míeɖea margin-leftthat’s added for regular button dropdowns ɖa. Tɔtrɔ mawo kpee la nana caret la nɔa titina le abɔta si woma la me eye wònaa teƒe si woate ŋu aƒoe si ƒe lolome sɔ wu le abɔta gã la xa.

<!-- 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 ƒe lolome

Abɔta siwo le tsia dzi la wɔa dɔ kple abɔta siwo ƒe lolome le vovovo, siwo dometɔ aɖewoe nye abɔta siwo woɖo ɖi kple esiwo woma ɖe akpa vovovowo me.

<!-- 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 ƒe tɔtrɔ

Dze nu siwo le fli dzi la gɔme le elementwo tame to etsɔtsɔ kpe .dropupɖe dzila ƒe akpaa ŋu me.

<!-- 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 ƒe tɔtrɔ

Dze nusiwo le fli dzi le elementawo ƒe ɖusime to tsɔtsɔ kpe .droprightɖe dzila element la ŋu me.

<!-- 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 ƒe tɔtrɔ

Dze nusiwo le fli dzi le elementawo ƒe miame to tsɔtsɔ kpe .dropleftɖe dzila element la ŋu me.

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

Le ŋutinya me la , ele be nusiwo le fli dzi la nanye kadodowo, gake meganye nenema le v4 gome o. Fifia àteŋu azã <button>elements le wò dropdowns me le wò tiatia me ɖe <a>s ɖeɖeko teƒe.

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

Le gɔmedzedzea me la, woɖoa nusiwo le tsia dzi la ɖe teƒe si le eɖokui si 100% tso etame kple edzila ƒe miame. Tsɔ kpe .dropdown-menu-rightɖe a .dropdown-menuŋu yi ɖusime ɖo fli si le fli dzi la ɖe ɖoɖo nu.

Tawo yi dzi! Woɖoa nusiwo wotsɔna ƒua gbe ɖe teƒe ɖeka akpe na Popper.js (negbe ne wole navbar me ko).

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

Tsɔ tanya kpee be nàde dzesi nuwɔna ƒe akpawo le nudzraɖoƒe ɖesiaɖe si le fli dzi.

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

Tsɔ numamãnu ɖe nuɖuɖu siwo do ƒome kple wo nɔewo ƒe ƒuƒoƒowo me.

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

De agbalẽvi aɖe nu siwo le fli dzi la me, alo nàwɔe wòazu nu siwo le fli dzi, eye nàzã margin alo padding utilities atsɔ ana teƒe manyomanyo si nèhiã lae.

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

Tsɔe kpe .activeɖe nusiwo le fli si le fli dzi la ŋu be nàwɔ woƒe atsyã be wole dɔ wɔm .

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

Tsɔe kpe .disabledɖe nusiwo le fli si le fli dzi la ŋu be nàwɔ woƒe atsyã abe nuwɔametɔwo ene .

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

Zãzã

To data attributes alo JavaScript dzi la, dropdown plugin la trɔa nya ɣaɣlawo (dropdown menus) to asitɔtrɔ le .showklass la ŋu le dzila ƒe xexlẽdzesi ƒe nu la dzi. Woɖoa data-toggle="dropdown"ŋu ɖe nɔnɔmea ŋu hena nutsotso siwo le fli dzi le dɔwɔwɔ ƒe ɖoɖo aɖe dzi, eyata anyo be nàzãe ɣesiaɣi.

Le mɔ̃ siwo ŋu woate ŋu aka asi nu ŋu le dzi la, ne èʋu nusi le tsia dzi la, etsɔa asiléƒe ƒuƒlu ( $.noop) kpena ɖe element mouseoverla ƒe viwo ŋu enumake . <body>This admittedly ugly hack is necessary to work around a quirk in iOS’ event delegation , si ne menye nenema o la, axe mɔ na tap le afisiafi le dropdown la godo be wòagaʋã code si xea dropdown la o. Ne wonya tu nusi wotsɔna ƒua gbe la ko la, woɖea asiléƒe ƒuƒlu siawo siwo wotsɔ kpe ɖe eŋu mouseoverla ɖa.

To nyatakaka ƒe nɔnɔmewo dzi

Tsɔe kpe data-toggle="dropdown"ɖe kadodo alo abɔta ŋu be nàtrɔ asi le nya aɖe ŋ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>

To JavaScript dzi

Yɔ nusiwo le fli dzi la to JavaScript dzi:

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

`data-toggle="dropdown"`wogahiã kokoko

Eɖanye be èyɔ wò dropdown la to JavaScript dzi alo nèzã data-api boŋ o, data-toggle="dropdown"ehiã ɣesiaɣi be nànɔ dropdown la ƒe trigger element la dzi.

Tiatiawɔblɔɖewo

Woateŋu atsɔ tiatiawɔblɔɖewo ato nyatakaka ƒe nɔnɔmewo alo JavaScript dzi. Le nyatakaka ƒe nɔnɔmewo gome la, tsɔ tiatia ƒe ŋkɔ kpe ɖe data-, abe alesi wòle le data-offset="".

Ŋkɔ	Ƒomevi	Gᴐmedzeƒe	Nuɖᴐɖᴐ
offset ƒe ƒuƒoƒo	xexlẽdzesi \| kaƒoƒo \| wᴐ dᴐ	0.	Offset of the dropdown ne wotsɔe sɔ kple eƒe taɖodzinu. Ne èdi nyatakaka bubuwo la, kpɔ Popper.js ƒe offset docs .
ti kpo	boolean ƒe ƒuƒoƒo	nyateƒe	Ðe mɔ na Dropdown be wòatrɔ nenye be eƒo xlã nufiame ƒe akpaa. Ne èdi nyatakaka bubuwo la, kpɔ Popper.js ƒe flip docs .
liƒo dzi	kaƒoƒo \| na	'agbalẽ xatsaxatsa dzila'.	Overflow mɔxexeɖedɔléle liƒo na dropdown menu. Xɔ `'viewport'`, `'window'`, `'scrollParent'`, alo HTMLElement ƒe nufiame ƒe asixɔxɔwo (JavaScript ɖeɖeko). Ne èdi nyatakaka bubuwo la, kpɔ Popper.js ƒe preventOverflow docs .

De dzesii ne boundarywoɖoe ɖe asixɔxɔ ɖesiaɖe si menye 'scrollParent', o la, wozãa atsyã position: staticla ɖe .dropdownnugoe la ŋu.

Mɔnuwo

Nuwɔmɔnu	Nuɖᴐɖᴐ
`$().dropdown('toggle')`	Trɔa navbar alo tabbed navigation aɖe si wona la ƒe dropdown menu.
`$().dropdown('update')`	Trɔ asi le element aɖe ƒe dropdown ƒe nɔƒe ŋu.
`$().dropdown('dispose')`	Egblẽa nu le element aɖe ƒe dropdown ŋu.

Nudzɔdzɔwo

Wodoa nudzɔdzɔ siwo katã le tsia dzi la ɖe .dropdown-menu's dzila ƒe akpaa dzi eye nɔnɔme aɖe le wo si relatedTarget, si ƒe asixɔxɔ nye toggling anchor element.

Nudzᴐdzᴐ	Nuɖᴐɖᴐ
`show.bs.dropdown`	Nudzɔdzɔ sia doa dzo enumake ne woyɔ show instance mɔnu la.
`shown.bs.dropdown`	Woɖea nudzɔdzɔ sia ne wowɔ dropdown la be wòadze na zãla (alala CSS ƒe tɔtrɔwo, be woawu enu).
`hide.bs.dropdown`	Woɖea nudzɔdzɔ sia ɖa enumake ne woyɔ hide instance mɔnu la.
`hidden.bs.dropdown`	Woɖea nudzɔdzɔ sia ne wowu dropdown la ɣla ɖe zãla la nu (alala CSS ƒe tɔtrɔwo, be woawu enu).

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

Nusiwo wotsɔna ƒua gbe

Kpɔɖeŋunyagbɔgblɔ

Mɔnukpɔkpɔwo ƒe Mɔnukpɔkpɔ

Kpɔɖeŋuwo

Abɔti ɖeka ƒe ʋuʋudediwo

Ma abɔta ƒe akpa siwo le tsia dzi

Sizing ƒe lolome

Dropup ƒe tɔtrɔ

Dropright ƒe tɔtrɔ

Dropleft ƒe tɔtrɔ

Nu siwo le menu la me

Menu ƒe ɖoɖowɔwɔ ɖe ɖoɖo nu

Menu ƒe tanyawo

Menu ƒe mamawo

Menu ƒe agbalẽviwo

Menu siwo le dɔ wɔm

Nuwɔametɔwo le menu me nuawo me

Zãzã

To nyatakaka ƒe nɔnɔmewo dzi

To JavaScript dzi

`data-toggle="dropdown"`wogahiã kokoko

Tiatiawɔblɔɖewo

Mɔnuwo

Nudzɔdzɔwo

Nusiwo wotsɔna ƒua gbe

Kpɔɖeŋunyagbɔgblɔ

Mɔnukpɔkpɔwo ƒe Mɔnukpɔkpɔ

Kpɔɖeŋuwo

Abɔti ɖeka ƒe ʋuʋudediwo

Ma abɔta ƒe akpa siwo le tsia dzi

Sizing ƒe lolome

Dropup ƒe tɔtrɔ

Dropright ƒe tɔtrɔ

Dropleft ƒe tɔtrɔ

Nu siwo le menu la me

Menu ƒe ɖoɖowɔwɔ ɖe ɖoɖo nu

Menu ƒe tanyawo

Tanya si le tsia dzi

Menu ƒe mamawo

Menu ƒe agbalẽviwo

Menu siwo le dɔ wɔm

Nuwɔametɔwo le menu me nuawo me

Zãzã

To nyatakaka ƒe nɔnɔmewo dzi

To JavaScript dzi

data-toggle="dropdown"wogahiã kokoko

Tiatiawɔblɔɖewo

Mɔnuwo

Nudzɔdzɔwo

`data-toggle="dropdown"`wogahiã kokoko