Dropdowns kan jedhu

Tarreewwan hidhannoo fi kanneen biroo agarsiisuuf haguuggii haalata jijjiiri, tarreewwan tarree Bootstrap waliin.

Haala Waliigalaa

Kubbaawwan jijjiiramuu danda'u, tarreewwan hidhannoowwanii fi kkf agarsiisuuf haguuggii haalata. Isaanis Bootstrap dropdown JavaScript plugin dabalameen walqunnamtii akka ta'an taasifamaniiru. Isaan kan toggled cuqaasuun malee hovering gochuudhaan miti; kun murtoo dizaayinii itti yaadanii kennameedha.

Dropdowns mana kitaabaa qaama sadaffaa irratti ijaaramaniiru, Popper.js , kunis bakka daayinamikii fi adda baasuu iddoo ilaalchaa kenna. JaavaScript Bootstrap dura popper.min.js dabaluu kee mirkaneessi ykn bootstrap.bundle.min.js/ bootstrap.bundle.jskan Popper.js of keessaa qabu fayyadami. Popper.js navbars keessatti gadi bu'iinsa iddoo kaa'uuf hin fayyadamu haa ta'u malee akka iddoo daayinamikii hin barbaachifnetti.

Yoo JavaScriptutil.js keenya madda irraa ijaaraa jirta ta'e, .

Dhaqqabummaa

Istaandardiin WAI ARIA role="menu" wiijetii qabatamaa ibsa , garuu kun menuwwan aplikeeshinii fakkaatanii kanneen gochoota ykn dalagaalee kakaasan adda ta'a. Sajoo ARIA wanta sajoo, wanta sajoo sanduuqa filannoo, wanta sajoo qaree raadiyoo, gareewwan qaree raadiyoo, fi sajoo xiqqaa qofa qabaachuu danda'u.

Bootstrap's dropdowns, gama biraatiin, akka waliigalaa fi haalawwan adda addaa fi caasaa mallattoo irratti hojiirra ooluu danda'aniif qophaa'aniiru. Fakkeenyaaf, tarreewwan galtee dabalataa fi too'annoo unkaa of keessaa qaban uumuun ni danda'ama, kan akka man'ee barbaacha ykn unka galmee. Sababa kanaaf, Bootstrap amaloota rolefi menuwwan ARIAaria- dhugaatiif barbaachisan kamiyyuu hin eegu (ofumaanis hin dabalu). Barreessitoonni amaloota adda ta’an kana ofuma isaanii hammachuu qabu.

Haa ta'u malee, Bootstrap walqunnamtii menu furtuu istaandaardii baay'eedhaaf deeggarsa ijaarame dabalata, kan akka dandeettii .dropdown-itemfurtuuwwan qaree fayyadamuun elementoota dhuunfaa keessa socho'uu fi furtuun menu cufuu ESC.

Fakkeenyaaf

Jijjiirraa tarree (qaree ykn hidhaa kee) fi sajoo tarree keessaa .dropdown, ykn qaama biraa kan labsu marsi position: relative;. Dropdowns irraa <a>ykn <button>elementoota fedhii kee ta'uu danda'u haala gaariin walsimuuf kakaafamuu danda'a.

Qabduu tokko qofa

Tokkichi kamiyyuu .btngara jijjiirama mallattoo tokko tokkoon gara jijjiirraa gadi-bu'aa jijjiiramuu danda'a. <button>Akkaataa isaan elementoota lamaanuu wajjin hojiitti galchuu dandeessu kunooti :

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

Akkasumas <a>elementoota waliin:

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

Kutaan hundarra gaariin kana gochuu dandeessa button variant kamiinuu, akkasumas:

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

Qabduu addaan qoodi

Haaluma walfakkaatuun, tarreewwan qaree qoqqoodaman kanneen mallattoo walfakkaataa ta'an kanneen qaree tokkoo wajjin wal fakkaatu uumi, garuu .dropdown-toggle-splitnaannoo caret gadi bu'aa addaan fageenya sirrii ta'eef dabaluudhaan.

Gitaa dabalataa kana fayyadamnee horizontal paddinggama lamaanuu caret %25 hir'isuu fi margin-leftthat's added for regular button dropdowns balleessuuf. Jijjiiramni dabalataa sun caret qaree addaan ba'e keessatti giddugaleessa akka ta'ee fi bakka rukuttaa safara sirrii ta'e qaree guddaa cinatti kenna.

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

Saayizii gochuu

Tarreewwan qaree qaree hammangaa hunda waliin hojjetu, qaree durtii fi qoodame dabalatee.

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

Kallattii

Dropup jedhu

.dropupQaaqa warraa irratti dabaluudhaan qaaqawwan tarree qaamolee olitti kakaasi .

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

.droprightQaaqa warraa irratti dabaluudhaan sajoo tarree mirgaa qaamolee irratti kakaasi .

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

Dropleeft jedhamuun beekama

.dropleftQaaqa warraa irratti dabaluudhaan sajoo tarree bitaa qaamolee irratti kakaasi .

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

Seenaa keessatti qabiyyeen menu gadi bu'aa hidhaa ta'uu qaba ture , garuu kana booda v4 irratti akkas miti. Amma filannoodhaan <button>elementoota tarreewwan kee keessatti <a>s qofa osoo hin taane fayyadamuu dandeessa.

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

Akkasumas wantoota tarree wal-qunnamsiisoo hin taane waliin uumuu dandeessa .dropdown-item-text. Faayidaa CSS ykn barruu amala ta'een caalaatti style gochuuf bilisa ta'i.

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

Si'aawaa

.activeWantoota tarree keessa jiranitti dabali akka socho'aa ta'etti akkaataa itti gootu .

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

Miidhamaa

.disabledWantoota akka hanqifameetti akkaataa itti godhuuf tarree keessa jiranitti dabali .

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

Akka durtiitti, sajoo tarree ofumaan 100% gubbaa irraa fi gama bitaa warra isaa irratti dhaabbata. Sajoo tarree gara mirgaatti .dropdown-menu-rightdabali ..dropdown-menu

Mataa ol qaba! Dropdowns galata Popper.js (yeroo navbar keessatti qabaman malee) bakka bu'u.

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

Mata dureewwan

Kutaalee gochaalee sajoo tarree kamiyyuu keessatti asxaa gochuuf mataduree dabali.

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

Qoqqoodduu

Garee wanta menu walqabatan qoqqoodduu waliin addaan baasi.

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

Barreeffama

Barruu bifa bilisaa kamiyyuu barruu waliin sajoo tarree keessa kaa'iitii faayidaa addaan fageenyaa fayyadami . Hubadhu, bal'ina sajoo daangessuuf akkaataa safara dabalataa si barbaachisuu hin oolu.

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

Unkaalee

Unkaa sajoo tarree keessa kaa'i, ykn gara sajoo gadi bu'aa godhi, fi faayidaa margina ykn padding fayyadamii iddoo negaatiivii barbaaddu kenniif.

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

Bakka gadi bu'aa jijjiiruuf data-offsetykn fayyadami .data-reference

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

Fayyadama

Karaa amaloota deetaa ykn JaavaScript, ifteessituun tarree qabiyyee dhokataa (qajoojiiwwan gadi bu'aa) .showgita wanta tarree warraa irratti jijjiiruun jijjiira. Amalli kun data-toggle="dropdown"sadarkaa aplikeeshinii irratti qaaqawwan gadi bu'aa cufuuf irratti hirkata, kanaaf yeroo hunda fayyadamuun yaada gaarii dha.

Meeshaalee tuqaan dandeessifaman irratti, tarree banuun qabattoota duwwaa ( $.noop) mouseoverijoollee dhiyeenya <body>elementichaatti dabalata. This admittedly ugly hack is necessary to work around a quirk in iOS' event delegation , kunis yoo kana hin taane tuquun bakka kamittiyyuu gadi bu'iinsaan ala ta'e koodii gadi bu'aa cufu akka hin kakaasne dhorka ture. Erga gadi bu'iinsi cufamee booda, mouseoverqabattoonni duwwaa dabalataa kun ni haqamu.

Karaa amaloota deetaa

data-toggle="dropdown"Tarree tokko jijjiiruuf hidhaa ykn qaree irratti dabali .

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

Karaa JaavaScript

Karaa JaavaScript kanneen gadi bu'an bilbili:

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

`data-toggle="dropdown"`ammallee barbaachisaadha

Karaa JaavaScript tarree kee waamtus ykn inumaayyuu data-api fayyadamuu kee osoo hin ilaalin, data-toggle="dropdown"yeroo hunda elementii kaka'umsaa gadi bu'aa irratti argamuun barbaachisaadha.

Filannoowwan

Filannoon karaa amaloota deetaa ykn JaavaScript darbuu danda'u. Amaloota deetaatiif, maqaa filannoo gara data-, akkuma keessatti dabali data-offset="".

Maqaa	Akaakuu	Durtii dha	Ibsa
ofseeti jechuun ni danda’ama	lakkoofsa \| tarree \| faayidaa	0.	Ofseeti kufaatii galma isaa wajjin walqabatee. Odeeffannoo dabalataaf Popper.js's offset docs ilaali .
garagalchuu	boolee	dhugaa	Yoo qaama wabii irratti wal-irra bu'e, Gadi-bu'aan akka garagalchu hayyami. Odeeffannoo dabalataaf Popper.js's flip docs ilaali .
daangaa	tarree \| qabiyyee	'Warra garagalchuu'.	Daangaa danqaa dhangala'aa sajoo tarree gadi bu'aa. Gatii `'viewport'`, `'window'`, `'scrollParent'`, ykn wabii HTMLElement fudhata (JavaScript qofa). Odeeffannoo dabalataaf Popper.js's preventOverflow docs ilaali .
wabeeffannaa	tarree \| qabiyyee	'toggle' jedhu.	Qaama wabii sajoo tarree. Gatii `'toggle'`, `'parent'`, ykn wabii HTMLElement fudhata. Odeeffannoo dabalataaf Popper.js's referenceObject docs ilaali .
agarsiisa	hidhaa	'daayinamikii'.	Akka durtiitti, iddoo daayinamikiidhaaf Popper.js fayyadamna. Kana waliin hanqisi `static`.

Hubadhu yeroo boundarygatii kamiyyuu irratti qindaa'u 'scrollParent', akkaataan qabduu position: staticirratti hojii irra oola ..dropdown

Malawwan

Mala	Ibsa
`$().dropdown('toggle')`	Sajoo tarree navbar kennamee ykn qajeelcha caancalaa jijjiira.
`$().dropdown('update')`	Bakka tarree qaama tokkoo fooyyessa.
`$().dropdown('dispose')`	Tarree elementii tokkoo balleessa.

Taateewwan

Taateewwan gadi bu'aa hundi .dropdown-menuqaama warraa 's irratti dhukaafamu fi relatedTargetqabeentaa qabu, kan gatiin isaa qaama anchor jijjiirraa dha. hide.bs.dropdownfi hidden.bs.dropdowntaateewwan clickEventqabeentaa qabu (yeroo akaakuu taatee jalqabaa ta'e qofa click) kan Taatee taatee cuqaasuudhaaf Wanti Taatee of keessaa qabu.

Taatee	Ibsa
`show.bs.dropdown`	Taatee kun yeroo mala fakkeenya agarsiisaa waamamu battalumatti dhukaasa.
`shown.bs.dropdown`	Taatee kun yeroo gadi bu'iinsi fayyadamaaf akka mul'atu godhame ni ari'ama (ce'umsa CSS ni eega, xumuruuf).
`hide.bs.dropdown`	Taatee kun yeroo mala fakkeenya dhoksaa waamame battalumatti dhukaafama.
`hidden.bs.dropdown`	Taatee kun kan dhukaafamu yeroo gadi bu'iinsi fayyadamaa irraa dhokfamuu xumure (ce'umsa CSS ni eega, xumuruuf).

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

Dropdowns kan jedhu

Haala Waliigalaa

Dhaqqabummaa

Fakkeenyaaf

Qabduu tokko qofa

Qabduu addaan qoodi

Saayizii gochuu

Kallattii

Dropup jedhu

Dropright jedhu

Dropleeft jedhamuun beekama

Wantoota menu

Si'aawaa

Miidhamaa

Hiriirsa menu

Qabiyyee menu

Mata dureewwan

Qoqqoodduu

Barreeffama

Unkaalee

Fayyadama

Karaa amaloota deetaa

Karaa JaavaScript

`data-toggle="dropdown"`ammallee barbaachisaadha

Filannoowwan

Malawwan

Taateewwan

Dropdowns kan jedhu

Haala Waliigalaa

Dhaqqabummaa

Fakkeenyaaf

Qabduu tokko qofa

Qabduu addaan qoodi

Saayizii gochuu

Kallattii

Dropup jedhu

Dropright jedhu

Dropleeft jedhamuun beekama

Wantoota menu

Si'aawaa

Miidhamaa

Hiriirsa menu

Qabiyyee menu

Mata dureewwan

Mata duree gadi bu'aa

Qoqqoodduu

Barreeffama

Unkaalee

Filannoowwan gadi bu'an

Fayyadama

Karaa amaloota deetaa

Karaa JaavaScript

data-toggle="dropdown"ammallee barbaachisaadha

Filannoowwan

Malawwan

Taateewwan

`data-toggle="dropdown"`ammallee barbaachisaadha