Source

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 dizayini lexi endliweke hi xikongomelo.

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

Swilo leswi nga ehansi ka buti yin’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:

Action Another action Something else here 
<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:

Action Another action Something else here 
<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>

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

Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link 
<!-- 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 swilo leswi nga ehansi ka swikomba-nkarhi

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 endla leswaku caret yi ri exikarhi eka buti leyi avaneke naswona yi nyika ndhawu yo ba leyi nga ni sayizi leyi faneleke swinene ekusuhi ni buti leyikulu.

Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link 
<!-- 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-nkarhi leswi nga ehansi swi tirha hi swikomba-nkarhi swa vukulu hinkwabyo, ku katsa ni swikomba-nkarhi leswi nga ta va kona 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>

Ku hambana ka dropup

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

Action Another action Something else here
Separated link
Action Another action Something else here
Separated link 
<!-- 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>

Ku cinca-cinca ka dropright

Pfuxeta timenyu leti rhetaka etlhelo ra xinene ra swiaki hi ku engetela .droprighteka xiaki xa mutswari.

Action Another action Something else here
Separated link
Action Another action Something else here
Separated link 
<!-- 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>

Ku cinca-cinca ka dropleft

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

Action Another action Something else here
Separated link
Action Another action Something else here
Separated link 
<!-- 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>

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

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

Nhlokomhaka leyi nga ehansi
Goza Xiendlo xin’wana 
<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>

Hlukanisa mintlawa ya swilo swa menyu leswi fambelanaka hi xihambanisi.

Goza Xiendlo xin’wana Xin’wana laha
Xihlanganisi lexi hambanisiweke 
<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>

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.

New around laha? Tsarisa Xana u rivele password? 
<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>

Swilo swa menyu leswi tirhaka

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

Xihlanganisi xa nkarhi na nkarhi Xihlanganisi lexi tirhaka Xihlanganisi xin’wana 
<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>

Swilo swa menyu leswi nga tirhiki

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

Xihlanganisi xa nkarhi na nkarhi Xihlanganisi lexi nga tirhiki Xihlanganisi xin’wana 
<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>

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

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('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.

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 duvuriwa 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…
})