Ebintu ebigwa wansi

Toggle contextual overlays okulaga enkalala z'enkolagana n'ebirala ne Bootstrap dropdown plugin.

Okulaba okutwalira awamu

Dropdowns zikyusibwakyusibwa, contextual overlays okulaga enkalala z'enkolagana n'ebirala. Zikolebwa nga zikwatagana ne Bootstrap dropdown JavaScript plugin erimu. Zikyusibwakyusibwa nga zinyiga, so si nga ziwuubaala; kino kusalawo kwa dizayini mu bugenderevu.

Dropdowns zizimbibwa ku tterekero ly’ebitabo ery’ekibiina eky’okusatu, Popper.js , ekiwa ekifo ekikyukakyuka n’okuzuula ekifo eky’okulaba. Kakasa nti ossaamu popper.min.js nga tonnaba kukola JavaScript ya Bootstrap oba kozesa bootstrap.bundle.min.js/ bootstrap.bundle.jserimu Popper.js. Popper.js tekozesebwa kuteeka dropdowns mu navbars wadde nga dynamic positioning tekyetaagisa.

Bw'oba ozimba JavaScript yaffe okuva ku nsibuko, kyetaagisautil.js .

Okutuuka ku bantu

Omutindo gwa WAI ARIA role="menu" gutegeeza widget entuufu , naye kino kyetongodde ku menu eziringa enkola ezitandikawo ebikolwa oba emirimu. Menyu za ARIA zisobola okubeeramu ebintu bya menu byokka, ebintu bya menu eby’akabokisi akalaga, ebintu bya menu bya button ya radio, ebibinja bya button za radio, ne sub-menus.

Ku luuyi olulala, ebigwa bya Bootstrap bikoleddwa okuba eby’enjawulo era nga bikozesebwa mu mbeera ez’enjawulo n’ensengeka z’obubonero. Okugeza, kisoboka okukola ebifo ebikka ebirimu ebiyingizibwa ebirala n’ebifuga foomu, gamba ng’ennimiro z’okunoonya oba foomu z’okuyingira. Olw'ensonga eno, Bootstrap tesuubira (oba okwongera mu ngeri ey'otoma) ekintu kyonna ku rolen'ebintu aria-ebyetaagisa ku menu za ARIA entuufu . Abawandiisi bajja kuba balina okussaamu ebifaananyi bino ebisingawo ebitongole bennyini.

Naye, Bootstrap eyongerako obuwagizi obuzimbibwamu ku nkolagana za menu ya keyboard ezisinga obungi eza bulijjo, gamba ng’obusobozi okutambula mu .dropdown-itembintu ssekinnoomu ng’okozesa ebisumuluzo bya cursor n’okuggalawo menu ESCn’ekisumuluzo.

Eby’okulabirako

Zinga toggle ya dropdown (button yo oba link yo) ne dropdown menu munda mu .dropdown, oba elementi endala elangirira position: relative;. Dropdowns zisobola okutandika okuva <a>oba <button>elements okusobola okutuukana obulungi ku byetaago byo ebiyinza okubaawo.

Ebiwandiiko ebikka ku bbaatuuni emu

Single yonna .btnesobola okufuulibwa dropdown toggle nga waliwo enkyukakyuka mu markup. Laba engeri gy’oyinza okuziteeka ku nkola n’ebintu byombi <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>

Era nga waliwo <a>elementi:

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

Ekisinga obulungi kino osobola okukikola ne button variant yonna, naawe:

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

Mu ngeri y’emu, tonda split button dropdowns nga kumpi markup y’emu nga button emu dropdowns, naye nga kwogasse .dropdown-toggle-splitfor for proper spacing around the dropdown caret.

Tukozesa kiraasi eno ey’enjawulo okukendeeza ku horizontal paddingku buli ludda lwa caret ebitundu 25% n’okuggyawo margin-leftthat’s added for regular button dropdowns. Enkyukakyuka ezo ez’enjawulo zikuuma caret ng’eri wakati mu bbaatuuni eyawuddwamu era ziwa ekifo ky’okukuba eky’obunene obutuufu okumpi ne bbaatuuni enkulu.

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

Okugerageranya obunene

Ebintu ebikka wansi bikola ne butaamu eza sayizi zonna, omuli obutambi obugwa wansi obusookerwako n’obw’enjawulo.

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

Enkyukakyuka mu dropup

Trigger dropdown menus waggulu wa elements nga oyongera .dropupku elementi omuzadde.

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

Enkyukakyuka ya dropright

Trigger dropdown menus ku ddyo w'ebintu nga oyongera .droprightku elementi omuzadde.

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

Enkyukakyuka mu dropleft

Trigger dropdown menus ku kkono w'ebintu nga oyongera .dropleftku elementi omuzadde.

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

Mu byafaayo ebirimu mu menu egwa wansi byali birina okuba enkolagana, naye ekyo tekikyali bwe kityo ku v4. Kati osobola okukozesa <button>elements mu dropdowns zo mu kifo kya <a>s yokka.

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

Nga bwekiba, menu egwa wansi eteekebwa mu ngeri ey’otoma 100% okuva waggulu ne ku ludda olwa kkono olwa muzadde waayo. Okwongera .dropdown-menu-rightku a .dropdown-menuku ddyo sengeka menu egwa wansi.

Emitwe waggulu! Dropdowns ziteekebwa mu kifo okwebaza Popper.js (okuggyako nga ziri mu navbar).

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

Okwongerako omutwe okuwandiika ebitundu by'ebikolwa mu menu yonna ekka.

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

Yawula ebibinja by’ebintu ebikwatagana mu menu n’omugabanya.

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

Teeka foomu munda mu menu egwa wansi, oba gifuule mu menu egwa wansi, era kozesa margin oba padding utilities okugiwa ekifo ekibi ky’oyagala.

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

Yongera .activeku bintu ebiri mu dropdown okubikola sitayiro nga 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>

Yongera .disabledku bintu mu dropdown okubikola sitayiro nga ebilema .

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

Enkozesa

Okuyita mu data attributes oba JavaScript, dropdown plugin ekyusa ebirimu ebikwekebwa (dropdown menus) nga ekyusa .showclass ku kintu ky'olukalala lw'omuzadde. Attribute data-toggle="dropdown"yesigamyeko okuggalawo dropdown menus ku ddaala ly'enkola, kale kirungi bulijjo okugikozesa.

Ku byuma ebisobola okukwata, okuggulawo ekintu ekigwa wansi kwongera ebikwaso ebyereere ( $.noop) mouseoverku baana ab’amangu <body>ab’ekintu. This admittedly ugly hack is necessary to work around a quirk in iOS' event delegation , ekiyinza okulemesa tap wonna ebweru w'okugwa okuva ku kutandika koodi eggalawo okugwa. Ekifo ekikka wansi bwe kimala okuggalwa, ebikwaso bino ebirala ebitaliiko kintu kyonna mouseoverbiggyibwawo.

Okuyita mu bikwata ku data

Yongera data-toggle="dropdown"ku link oba button okukyusa dropdown.

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

Okuyita mu JavaScript

Kuba ku bigenda okukka wansi ng’oyita mu JavaScript:

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

`data-toggle="dropdown"`kikyali kyetaagisa

Nga tofuddeeyo oba oyita dropdown yo ng'oyita mu JavaScript oba mu kifo ky'ekyo okozesa data-api, data-toggle="dropdown"bulijjo kyetaagisa okubeerawo ku dropdown's trigger element.

Eby’okulondako

Ebyokulonda bisobola okuyisibwa nga biyita mu data attributes oba JavaScript. Ku bikwata ku data, ssaako erinnya ly'okulonda ku data-, nga mu data-offset="".

Erinnya	Okuwandiika	Okukosamu	Okunnyonnyola
offset	ennamba \| olunyiriri \| enkola	0.	Offset ya dropdown okusinziira ku target yaayo. Okumanya ebisingawo laba Popper.js's offset docs .
okukyuusa	boolean	kituufu	Kiriza Dropdown okufuumuuka mu mbeera y'okukwatagana ku elementi y'okujuliza. Okumanya ebisingawo laba Popper.js's flip docs .
ensalo	olunyiriri \| ekintu	'omuzadde omuzingo'.	Ensalosalo y'okuziyiza okujjula eya menu egwa wansi. Ekkiriza emiwendo gya `'viewport'`, `'window'`, `'scrollParent'`, oba ekijuliziddwa HTMLElement (JavaScript yokka). Okumanya ebisingawo laba Popper.js's preventOverflow docs .

Weetegereze bwe boundarykiteekebwa ku muwendo gwonna okuggyako 'scrollParent', sitayiro position: staticekozesebwa ku .dropdownkibya.

Enkola

Engeri	Okunnyonnyola
`$().dropdown('toggle')`	Ekyusa menu egwa wansi eya navbar oba tabbed navigation eweereddwa.
`$().dropdown('update')`	Ezza obuggya ekifo ky'ekintu ekigwa wansi.
`$().dropdown('dispose')`	Esaanyaawo ekintu ekigwa wansi.

Ebibaddewo

Ebintu byonna ebigwa wansi bikubwa ku .dropdown-menu's parent element era birina relatedTargeteky'obugagga, omuwendo gwakyo gwe toggling anchor element.

Omukolo	Okunnyonnyola
`show.bs.dropdown`	Ekintu kino kikuba amangu ddala nga enkola ya show instance eyitiddwa.
`shown.bs.dropdown`	Ekintu kino kikubwa nga ekigwa kikoleddwa okulabika eri omukozesa (kijja kulinda enkyukakyuka za CSS, okuggwa).
`hide.bs.dropdown`	Ekintu kino kikubwa amangu ddala nga enkola ya hide instance eyitiddwa.
`hidden.bs.dropdown`	Ekintu kino kikubwa nga ekigwa kiwedde okukwekebwa okuva eri omukozesa (kijja kulinda enkyukakyuka za CSS, okuggwa).

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

Ebintu ebigwa wansi

Okulaba okutwalira awamu

Okutuuka ku bantu

Eby’okulabirako

Ebiwandiiko ebikka ku bbaatuuni emu

Split button ezigwa wansi

Okugerageranya obunene

Enkyukakyuka mu dropup

Enkyukakyuka ya dropright

Enkyukakyuka mu dropleft

Ebintu ebiri mu menu

Okusengeka menu

Emitwe gya menu

Ebigabanya menyu

Ffoomu za menu

Ebintu bya menu ebikola

Ebintu bya menu ebiremeseddwa

Enkozesa

Okuyita mu bikwata ku data

Okuyita mu JavaScript

`data-toggle="dropdown"`kikyali kyetaagisa

Eby’okulondako

Enkola

Ebibaddewo

Ebintu ebigwa wansi

Okulaba okutwalira awamu

Okutuuka ku bantu

Eby’okulabirako

Ebiwandiiko ebikka ku bbaatuuni emu

Split button ezigwa wansi

Okugerageranya obunene

Enkyukakyuka mu dropup

Enkyukakyuka ya dropright

Enkyukakyuka mu dropleft

Ebintu ebiri mu menu

Okusengeka menu

Emitwe gya menu

Omutwe ogukka wansi

Ebigabanya menyu

Ffoomu za menu

Ebintu bya menu ebikola

Ebintu bya menu ebiremeseddwa

Enkozesa

Okuyita mu bikwata ku data

Okuyita mu JavaScript

data-toggle="dropdown"kikyali kyetaagisa

Eby’okulondako

Enkola

Ebibaddewo

`data-toggle="dropdown"`kikyali kyetaagisa