Swilo leswi nga ehansi

Cinca swifunengeto swa mongo ku kombisa minxaxamelo ya swihlanganisi na swin’wana hi xiengetelo xa Bootstrap lexi nga ehansi.

Nkatsakanyo

Swilo leswi nga ehansi swi nga cinca-cinca, swifunengeto swa mongo swo kombisa minxaxamelo ya swihlanganisi na swin’wana. Va endliwe va tirhisana hi xiengetelo xa JavaScript xa Bootstrap lexi nga ehansi lexi katsekaka. Va cinca-cinca hi ku tsindziyela, ku nga ri hi ku hover; lexi i xiboho xa ku dizayina hi vomu .

Ti dropdowns ti akiwile eka layiburari ya munhu wa vunharhu, Popper.js , leyi nyikaka xiyimo lexi cinca-cincaka na ku kumiwa ka viewport. Tiyisisa leswaku u katsa popper.min.js emahlweni ka JavaScript ya Bootstrap kumbe u tirhisa bootstrap.bundle.min.js/ bootstrap.bundle.jsleyi nga na Popper.js. Popper.js a yi tirhisiwi ku veka swilo leswi nga ehansi eka ti-navbar hambileswi ku veka swilo leswi cinca-cincaka swi nga lavekiki.

Loko u aka JavaScript ya hina ku suka eka xihlovo, swi lavautil.js .

Ku fikelela

Mpimo wa WAI ARIA wu hlamusela role="menu"xitirhisiwa xa xiviri , kambe leswi swi kongomile eka timenyu to fana na xitirhisiwa leti hlohlotelaka swiendlo kumbe mintirho. Timenyu ta ARIA ti nga va na ntsena swilo swa menyu, swilo swa menyu ya bokisi ro kambela, swilo swa menyu ya buti ya xiya-ni-moya, mintlawa ya swikomba-nkarhi swa xiya-ni-moya, na timenyu letitsongo.

Ti dropdown ta Bootstrap, hi hala tlhelo, ti endleriwe ku va ta xivumbeko xa le henhla naswona ti tirha eka swiyimo swo hambana na swivumbeko swa markup. Hi xikombiso, swa koteka ku endla swilo leswi nga ehansi leswi nga ni swilo leswi engetelekeke leswi nghenisiwaka ni swilawuri swa tifomo, swo tanihi tinsimu to lavisisa kumbe tifomo to nghena. Hi xivangelo lexi, Bootstrap a yi langutelanga (kumbe ku engetela hi ku tisungulela) swin’wana swa swihlawulekisi swa rolena aria-leswi lavekaka eka timenyu ta ntiyiso ta ARIA . Vatsari va ta boheka ku katsa swihlawulekisi leswi swo kongoma swinene hi voxe.

Hambiswiritano, Bootstrap yi engetela nseketelo lowu akiweke eka ku tirhisana ko tala ka menyu ya khibhodi ya ntolovelo, ku fana ni vuswikoti byo famba eka .dropdown-itemswiaki ha xin’we hi ku tirhisa swilotlelo swa xikombiso ni ku pfala menyu hi ESCxilotlelo.

Swikombiso

Pfuxeta toggle ya dropdown (button ya wena kumbe link) na dropdown menu endzeni ka .dropdown, kumbe element yin’wana leyi tivisa position: relative;. Dropdowns yinga hlohloteriwa kusuka eka <a>kumbe <button>elements ku antswa ku fambelana na swilaveko swa wena leswinga vaka kona.

Xibamu xin’we

Single yin’wana na yin’wana yi .btnnga hundzuriwa dropdown toggle hi ku cinca kun’wana ka markup. Hi leyi ndlela leyi u nga swi vekaka ha yona leswaku swi tirha hi <button>swiaki swimbirhi:

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

Naswona hi <a>swiaki:

<div class="dropdown">
  <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>

Xiphemu lexinene ngopfu hi leswaku u nga endla leswi hi muxaka wihi na wihi wa button, na wena:

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

Ku avanyisa buti

Hilaha ku fanaka, endla swikomba-nkarhi leswi avaneke leswi nga ni swikombiso leswi fanaka ni leswi nga ehansi ka buti yin’we, kambe hi ku engeteriwa ka .dropdown-toggle-splitleswaku ku va ni ku hambana loku faneleke ku rhendzela caret leyi nga ehansi.

Hi tirhisa tlilasi leyi yo engetela ku hunguta horizontal paddingeka matlhelo hamambirhi ya caret hi 25% na ku susa margin-leftthat’s added for regular button dropdowns. Ku cinca koloko loku engetelekeke ku hlayisa caret yi ri exikarhi eka buti leyi avaneke naswona yi nyika ndhawu yo ba leyi nga ni mpimo lowu faneleke swinene ekusuhi ni buti leyikulu.

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

Ku pima mpimo

Swikomba-ndlela swa swikomba-nkarhi swi tirha hi swikomba-nkarhi swa vukulu hinkwabyo, ku katsa ni swikomba-nkarhi swa xiviri ni leswi avaneke.

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

Swiletelo

Ku wisa

Pfuxeta timenyu leti rhetaka ehenhla ka swiaki hi ku engetela .dropupeka xiaki xa mutswari.

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

Xithopo xa xirhendzevutani

Pfuxeta timenyu leti nga ehansi exineneni xa swiaki hi ku engetela .droprighteka xiaki xa mutswari.

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

Xitombo xa drop

Pfuxeta timenyu leti rhetaka etlhelo ra ximatsi ra swiaki hi ku engetela .droplefteka xiaki xa mutswari.

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

Hi matimu swilo leswi nga endzeni ka menyu leyi nga ehansi a swi fanele swi va swihlanganisi, kambe sweswo a swa ha ri tano hi v4. Sweswi u nga tirhisa hi ku hlawula <button>swiaki eka ti-dropdown ta wena ematshan’weni ya <a>s ntsena.

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

U nga ha tlhela u endla swilo leswi nga riki swa vuhlanganisi hi .dropdown-item-text. Titwele u ntshunxekile ku xitayili ku ya emahlweni hi CSS ya ntolovelo kumbe switirhisiwa swa matsalwa.

<div class="dropdown-menu">
  <span class="dropdown-item-text">Dropdown item text</span>
  <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>

Hanya

Engetela .activeeka swilo leswi nga eka dropdown ku swi xitayili tanihi leswi tirhaka .

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

Lamarile

Engetelani .disabledeka swilo leswi nga eka dropdown ku swi xitayili tanihi leswi nga tirhiki .

<div class="dropdown-menu">
  <a class="dropdown-item" href="#">Regular link</a>
  <a class="dropdown-item disabled" href="#" tabindex="-1" aria-disabled="true">Disabled link</a>
  <a class="dropdown-item" href="#">Another link</a>
</div>

Hi ku tiyimisela, menyu leyi nga ehansi yi vekiwa hi yoxe hi 100% ku suka ehenhla ni le tlhelo ra ximatsi ra mutswari wa yona. Engetelani .dropdown-menu-righteka a .dropdown-menuku ya exineneni ringanisa menyu leyi nga ehansi.

Tinhloko ta le henhla! Ti dropdowns ti vekiwa hi ku khensa Popper.js (handle ka loko ti ri eka 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>

Ku ringanisa loku hlamulaka

Loko u lava ku tirhisa ku ringanisa loku hlamulaka, tshikisa ku veka loku cinca-cincaka hi ku engetela data-display="static"xihlawulekisi ivi u tirhisa titlilasi ta ku cinca-cinca loku hlamulaka.

Ku ringanisa exineneni menyu leyi nga ehansi ni ndhawu yo wisa leyi nyikiweke kumbe leyikulu, engetela .dropdown-menu{-sm|-md|-lg|-xl}-right.

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" data-display="static" aria-haspopup="true" aria-expanded="false">
    Left-aligned but right aligned when large screen
  </button>
  <div class="dropdown-menu dropdown-menu-lg-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>

Ku ringanisa menyu ya le hansi ya ximatsi.dropdown-menu-right ni ndhawu yo wisa leyi nyikiweke kumbe leyikulu, engetela na .dropdown-menu{-sm|-md|-lg|-xl}-left.

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" data-display="static" aria-haspopup="true" aria-expanded="false">
    Right-aligned but left aligned when large screen
  </button>
  <div class="dropdown-menu dropdown-menu-right dropdown-menu-lg-left">
    <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>

Xiya leswaku a wu lavi ku engetela data-display="static"xihlawulekisi eka swikomba-nkarhi leswi rhetaka eka ti-navbar, tanihi leswi Popper.js yi nga tirhisiwiki eka ti-navbar.

Tinhlokomhaka

Engetela nhlokomhaka ku lebula swiyenge swa swiendlo eka menyu yihi na yihi leyi rhetaka.

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

Swihambanisi

Hlukanisa mintlawa ya swilo swa menyu leswi fambelanaka hi xihambanisi.

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

Tsalwa

Veka tsalwa rihi na rihi ra xivumbeko xa mahala endzeni ka menyu leyi nga ehansi leyi nga ni tsalwa naswona tirhisa switirhisiwa swa ku hambana . Xiya leswaku u ta lava switayele leswi engetelekeke swo pima mpimo leswaku u sivela ku anama ka menyu.

<div class="dropdown-menu p-4 text-muted" style="max-width: 200px;">
  <p>
    Some example text that's free-flowing within the dropdown menu.
  </p>
  <p class="mb-0">
    And this is more example text.
  </p>
</div>

Swivumbeko

Veka fomo endzeni ka menyu leyi nga ehansi, kutani u yi endla menyu leyi nga ehansi, naswona tirhisa switirhisiwa swa margin kumbe padding ku yi nyika ndhawu yo biha leyi u yi lavaka.

<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-group">
      <div class="form-check">
        <input type="checkbox" class="form-check-input" id="dropdownCheck">
        <label class="form-check-label" for="dropdownCheck">
          Remember me
        </label>
      </div>
    </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-group">
    <div class="form-check">
      <input type="checkbox" class="form-check-input" id="dropdownCheck2">
      <label class="form-check-label" for="dropdownCheck2">
        Remember me
      </label>
    </div>
  </div>
  <button type="submit" class="btn btn-primary">Sign in</button>
</form>

Tirhisa data-offsetkumbe data-referenceku cinca ndhawu ya dropdown.

<div class="d-flex">
  <div class="dropdown mr-1">
    <button type="button" class="btn btn-secondary dropdown-toggle" id="dropdownMenuOffset" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-offset="10,20">
      Offset
    </button>
    <div class="dropdown-menu" aria-labelledby="dropdownMenuOffset">
      <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>
  <div class="btn-group">
    <button type="button" class="btn btn-secondary">Reference</button>
    <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" id="dropdownMenuReference" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-reference="parent">
      <span class="sr-only">Toggle Dropdown</span>
    </button>
    <div class="dropdown-menu" aria-labelledby="dropdownMenuReference">
      <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>
</div>

Matirhiselo

Hi ku tirhisa swihlawulekisi swa datha kumbe JavaScript, xiengetelo lexi nga ehansi xi cinca-cinca nhundzu leyi fihliweke (timenyu leyi nga ehansi) hi ku cinca-cinca .showtlilasi eka nchumu wa nxaxamelo wa mutswari. Xihlawulekisi data-toggle="dropdown"xi tshembheka eka ku pfala timenyu to rhelela eka xiyimo xa xitirhisiwa, kutani i mianakanyo ya kahle ku tshama u xi tirhisa.

Eka switirhisiwa leswi pfuniwaka hi ku khumba, ku pfula dropdown swi engetela swikhomela-ndhawu leswi nga riki na nchumu ( $.noop) mouseovereka vana va le kusuhi va <body>elemente. This admittedly ugly hack is necessary to work around a quirk in iOS’ event delegation , leswi handle ka sweswo a swi ta sivela ku pompa kun’wana ni kun’wana ehandle ka dropdown ku pfuxa khodi leyi pfala dropdown. Loko se dropdown yi pfariwile, swikhomela-ndhawu leswi leswi engetelekeke leswi nga riki na nchumu mouseoverswa susiwa.

Hi ku tirhisa swihlawulekisi swa data

Engetela data-toggle="dropdown"eka link kumbe button ku cinca-cinca 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>

Hi ku tirhisa JavaScript

Fonela swilo leswi nga ehansi hi ku tirhisa JavaScript:

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

`data-toggle="dropdown"`swa ha laveka

Ku nga khathariseki leswaku u vitana dropdown ya wena hi ku tirhisa JavaScript kumbe ematshan’wini ya sweswo u tirhisa data-api, data-toggle="dropdown"minkarhi hinkwayo swi laveka ku va kona eka elemente ya trigger ya dropdown.

Swihlawulekisi

Swihlawulekisi swi nga hundzisiwa hi ku tirhisa swihlawulekisi swa data kumbe JavaScript. Eka swihlawulekisi swa datha, engetela vito ra xihlawuhlawu eka data-, tanihi le ka data-offset="".

Vito	Muxaka	Ku tlula	Nhlamuselo
offset	nomboro \| ntambhu ya xirhendzevutani \| ntirho	0.	Offset ya dropdown loko yi pimanisiwa na target ya yona. Loko ntirho wu tirhisiwa ku kumisisa offset, wu vitaniwa hi nchumu lowu nga na data ya offset tanihi argument ya wona yo sungula. Ntirho wu fanele ku vuyisa nchumu lowu nga na xivumbeko lexi fanaka. Node ya DOM ya elemente leyi hlohlotelaka yi hundziseriwa tanihi argument ya vumbirhi. Ku kuma vuxokoxoko byo tala languta eka Popper.js's offset docs .
hundzuluxa	xitsonga xitsonga	ntiyiso	Pfumelela Dropdown ku flip loko ku ri na ku hlangana eka elemente ya reference. Ku kuma vuxokoxoko byo tala languta eka Popper.js's flip docs .
ndzilakano	ntambhu ya xirhendzevutani \| nchumu	'ScrollMutswari'.	Ndzilakano wa xipimelo xa ku tala ka menyu leyi nga ehansi. Ku amukela mimpimo ya `'viewport'`, `'window'`, `'scrollParent'`, kumbe xikombo xa HTMLElement (JavaScript ntsena). Ku kuma vuxokoxoko byo tala languta eka Popper.js's preventOverflow docs .
rheferense	ntambhu ya xirhendzevutani \| nchumu	'ku cinca-cinca'.	Xiphemu xa xikombo xa menyu leyi nga ehansi. Amukela mimpimo ya `'toggle'`, `'parent'`, kumbe xikombo xa HTMLElement. Ku kuma vuxokoxoko byo tala languta eka Popper.js's referenceObject docs .
kombisa	ntambu	'dynamic'.	Hi ku tiyimisela, hi tirhisa Popper.js eka xiyimo lexi cinca-cincaka. Tirhisa leswi hi `static`.
xivumbeko xa popper	null \| nchumu	hava	Ku cinca xivumbeko xa Popper.js xa xiviri xa Bootstrap, vona vukorhokeri bya Popper.js

Xiya loko boundaryyi vekiwile eka ntikelo wihi na wihi handle ka 'scrollParent', xitayili position: staticxi tirhisiwa eka .dropdownxigwitsirisi.

Maendlelo

Ndlela	Nhlamuselo
`$().dropdown('toggle')`	Ku cinca-cinca menyu leyi nga ehansi ya navbar leyi nyikiweke kumbe ku famba-famba loku nga ni tithebhu.
`$().dropdown('show')`	Ku kombisa menyu leyi nga ehansi ya navbar leyi nyikiweke kumbe ku famba-famba loku nga ni tithebhu.
`$().dropdown('hide')`	Ku fihla menyu leyi nga ehansi ya navbar leyi nyikiweke kumbe ku famba-famba loku nga ni tithebhu.
`$().dropdown('update')`	Ku pfuxeta xiyimo xa xiaki xa xirhendzevutani.
`$().dropdown('dispose')`	Ku herisa dropdown ya elemente.

Swiendlakalo

Swiendlakalo hinkwaswo swa dropdown swi duvuriwa eka .dropdown-menu's parent element naswona swi na relatedTargetnhundzu, leyi nkoka wa yona ku nga toggling anchor element. hide.bs.dropdownnaswona hidden.bs.dropdownswiendlakalo swi na clickEventnhundzu (ntsena loko muxaka wa xiendlakalo xo sungula wu ri click) lowu nga na Nchumu wa Xiendlakalo wa xiendlakalo xa ku tsindziyela.

Nkhuvo	Nhlamuselo
`show.bs.dropdown`	Xiendlakalo lexi xi pfurha hi ku hatlisa loko ku vitaniwa ndlela ya xikombiso xa nkombiso.
`shown.bs.dropdown`	Xiendlakalo lexi xi duvuriwa loko dropdown yi endliwile yi vonaka eka mutirhisi (yi ta rindza ku cinca ka CSS, ku hetisisiwa).
`hide.bs.dropdown`	Xiendlakalo lexi xi pfuriwa hi ku hatlisa loko ndlela ya hide instance yi vitaniwile.
`hidden.bs.dropdown`	Xiendlakalo lexi xi duvuriwa loko dropdown yi hetile ku tumbetiwa eka mutirhisi (yi ta rindza ku cinca ka CSS, ku hetisa).

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

Swilo leswi nga ehansi

Nkatsakanyo

Ku fikelela

Swikombiso

Xibamu xin’we

Ku avanyisa buti

Ku pima mpimo

Swiletelo

Ku wisa

Xithopo xa xirhendzevutani

Xitombo xa drop

Swilo swa menyu

Hanya

Lamarile

Ku ringanisiwa ka menyu

Ku ringanisa loku hlamulaka

Swilo leswi nga endzeni ka menyu

Tinhlokomhaka

Swihambanisi

Tsalwa

Swivumbeko

Matirhiselo

Hi ku tirhisa swihlawulekisi swa data

Hi ku tirhisa JavaScript

`data-toggle="dropdown"`swa ha laveka

Swihlawulekisi

Maendlelo

Swiendlakalo

Swilo leswi nga ehansi

Nkatsakanyo

Ku fikelela

Swikombiso

Xibamu xin’we

Ku avanyisa buti

Ku pima mpimo

Swiletelo

Ku wisa

Xithopo xa xirhendzevutani

Xitombo xa drop

Swilo swa menyu

Hanya

Lamarile

Ku ringanisiwa ka menyu

Ku ringanisa loku hlamulaka

Swilo leswi nga endzeni ka menyu

Tinhlokomhaka

Nhlokomhaka leyi nga ehansi

Swihambanisi

Tsalwa

Swivumbeko

Swihlawulekisi swa dropdown

Matirhiselo

Hi ku tirhisa swihlawulekisi swa data

Hi ku tirhisa JavaScript

data-toggle="dropdown"swa ha laveka

Swihlawulekisi

Maendlelo

Swiendlakalo

`data-toggle="dropdown"`swa ha laveka