Source

Di-dropdown tša go theoga

Fetoša dikhupetšo tša diteng bakeng sa go bontšha mananeo a dikgokagano le tše dingwe ka polaka ya go theoga ya Bootstrap.

Kakaretšo

Di-dropdown di ka fetošwa, di-overlay tša diteng tša go bontšha mananeo a dikgokagano le tše dingwe. Di dirilwe gore di be le tirišano ka plugin ya JavaScript ya go theoga ya Bootstrap yeo e akareditšwego. Di fetošwa ka go kgotla, e sego ka go hovering; se ke sephetho sa go hlama ka boomo.

Di-dropdown di agilwe godimo ga bokgobapuku bja mokgatlo wa boraro, Popper.js , yeo e fago maemo a go fetoga le go utolla lefelo la go lebelela. Kgonthišetša gore o akaretša popper.min.js pele ga JavaScript ya Bootstrap goba o diriša bootstrap.bundle.min.js/ bootstrap.bundle.jsyeo e nago le Popper.js. Popper.js ga e šomišwe go bea di-dropdown ka go di-navbar le ge e le go beakanya ga go fetoga ga go nyakege.

Ge e ba o aga JavaScript ya rena go tšwa mothopong, e nyakautil.js .

Phihlelelo

The WAI ARIA standard defines an actual role="menu"widget , eupša se se itšego go dimenu tša go swana le tirišo tšeo di hlohleletšago ditiro goba mešomo. Dimenu tša ARIA di ka ba le fela diaetheme tša thepo, diaetheme tša thepo ya lepokisi la go hlahloba, diaetheme tša thepo ya konope ya radio, dihlopha tša dikonope tša radio, le dimenu tša ka fasana.

Di-dropdown tša Bootstrap, ka lehlakoreng le lengwe, di hlamilwe go ba tša kakaretšo le go šoma maemong a fapa-fapanego le dibopego tša go swaya. Go fa mohlala, go a kgonega go hlama dithepo te di theogago te di nago le ditseno ta tlaleleto le ditaolo ta diforomo, go swana le mafelo a go nyaka goba diforomo ta go tsena. Ka lebaka le, Bootstrap ga e letele (goba go oketša ka go iketla) efe goba efe ya rolele aria-dika tše di nyakegago bakeng sa dimenu tša nnete tša ARIA . Bangwadi ba tla swanelwa ke go akaretša dika tše tše di lebanyago kudu ka bobona.

Le ge go le bjalo, Bootstrap e tlaleletša thekgo ye e agetšwego ka gare ya bontši bja ditirišano tša thepo ya khiiboto ya maemo, go swana le bokgoni bja go sepela ka .dropdown-itemdielemente ka botee ka go šomiša dinotlelo tša khesara le go tswalela thepo ka ESCsenotlelo.

Mehlala

Phuthelela toggle ya go theoga (konope ya gago goba kgokagano) le thepo ya go theoga ka gare ga .dropdown, goba elemente ye nngwe yeo e tsebagatšago position: relative;. Di-dropdown di ka hlohleletša go tšwa <a>goba <button>dielemente go swanela gakaone dinyakwa tša gago tšeo di ka bago gona.

Di-drolodown tša konope e tee

Sefe goba sefe se tee se .btnka fetošetšwa go toggle ya go theoga ka diphetogo tše dingwe tša go swaya. Ke kamoo o ka di beago ka gona go šoma ka <button>dielemente tše dingwe le tše dingwe:

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

Le ka <a>dielemente:

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

Karolo e kaone ke gore o ka dira se ka mohuta ofe goba ofe wa konope, le 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>

Arola konopo dropdowns

Ka mo go swanago, hlama di-dropdown tša konope ya go arogana ka go nyakile go swana le go swaya mo go swanago le go theoga ga konope e tee, eupša ka tlaleletšo ya .dropdown-toggle-splitbakeng sa sekgoba se se swanetšego go dikologa caret ya go theoga.

Re diriša sehlopha se sa tlaleletšo go fokotša go rapalala paddingka mahlakoreng ka bobedi a caret ka 25% le go tloša margin-leftseo se okeditšwego bakeng sa di-dropdown tša konope tša ka mehla. Diphetogo tšeo tše oketšegilego di boloka caret e tsepame konotswaneng yeo e arotšwego gomme e nea lefelo la go otla leo le nago le bogolo bjo bo swanetšego kudu kgaufsi le konotswana e kgolo.

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

Go lekanyetša bogolo

Dikonope tša go theoga di šoma ka dikonope tša bogolo ka moka, go akaretšwa dikonope tša go theoga tša go se fetoge le tša go arogana.

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

Phapano ya go theoga

Hlohleletša dimenu tša go theoga ka godimo ga dielemente ka go tlaleletša .dropupgo elemente ya motswadi.

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

Phapano ya dropright

Hlohleletša dimenu tša go theoga ka go le letona la dielemente ka go tlaleletša .droprightgo elemente ya motswadi.

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

Phapano ya dropleft

Hlohleletša dimenu tša go theoga ka go la nngele la dielemente ka go tlaleletša .dropleftgo elemente ya motswadi.

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

Go ya ka histori dikagare tša thepo ya go theoga di be di swanetše go ba dikgokagano, eupša seo ga se sa le bjalo ka v4. Bjale o ka šomiša ka boikgethelo <button>dielemente ka go dithepo tša gago go e na le <a>s fela.

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

Ka go ikemela, thepo ya go theoga e bewa ka go iketla 100% go tšwa godimo le go bapa le lehlakore la nngele la motswadi wa yona. Oketša .dropdown-menu-rightgo a go ya .dropdown-menugo le letona logaganya thepo ya go theoga.

Dihlogo godimo! Di-dropdown di bewa ka lebaka la Popper.js (ntle le ge di le ka gare ga 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>

Oketša hlogo go leina dikarolo tša ditiro ka go thepo efe goba efe ya go theoga.

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

Aroganya dihlopha tša dintho tša menu tše di amanago ka karoganyo.

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

Bea foromo ka gare ga thepo ya go theoga, goba o e dire gore e be thepo ya go theoga, gomme o šomiše didirišwa tša ka thoko goba tša go tlatša go e fa sekgoba se sebe seo o se nyakago.

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

Oketša .activego diaetheme ka go theoga go di setaele bjalo ka tše di šomago .

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

Oketša .disabledgo diaetheme ka go theoga go di setaele bjalo ka tše di golofetšego .

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

Tšhomišo

Ka dika tša datha goba JavaScript, polaka ya go theoga e fetoša diteng tše di utilwego (dimenu tša go theoga) ka go fetoša .showsehlopha go aetheme ya lenaneo la motswadi. Sebopego data-toggle="dropdown"se ithekgile ka go tswalela dimenu tša go theoga maemong a tirišo, ka fao ke kgopolo ye botse go se šomiša ka mehla.

Go didirišwa tšeo di kgontšhitšwego ka go kgoma, go bula selo sa go theoga go oketša didirišwa tša go swara tše di se nago selo ( $.noop) mouseovergo bana ba kgaufsi ba <body>elemente. This admittedly ugly hack is necessary to work around a quirk in iOS’ event delegation , e leng ka tsela e nngwe e ne e tla thibela pompo kae kapa kae ka ntle ho dropdown ho qholotsa khoutu e koala dropdown. Ge go šetše go tswaletšwe, didirišwa tše tša tlaleletšo tše di se nago selo mouseoverdi a tlošwa.

Ka dika ya data

Oketša data-toggle="dropdown"go kgokagano goba konope go fetoša go theoga.

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

Ka JavaScript

Bitša di-drolodown ka JavaScript:

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

`data-toggle="dropdown"`e sa dutše e nyakega

Go sa šetšwe gore o bitša dropdown ya gago ka JavaScript goba go e na le moo o diriša data-api, data-toggle="dropdown"go nyakega ka mehla go ba gona go elemente ya go hlohleletša ya dropdown.

Dikgetho

Dikgetho di ka fetišwa ka dika tša datha goba JavaScript. Bakeng sa dika tša datha, tlaleletša leina la kgetho go data-, bjalo ka go data-offset="".

Leina	Mohuta	Hlokomologa	Tlhalošo
offset	nomoro ya \| thapo ya \| mošomo	0.	Offset ya dropdown leloko le sepheo lona. Bakeng sa tshedimošo e oketšegilego lebelela Popper.js's offset docs .
phepheula	boolean ya go swana	nnete	Dumelela Dropdown go flip ge go ka ba le go swana godimo ga elemente ya tšhupetšo. Bakeng sa tshedimošo e oketšegilego lebelela Popper.js's flip docs .
mollwane	thapo ya \| ntlha	'Motswadi wa go kgokološa'.	Moedi wa thibelo ya go tlala wa thepo ya go theoga. E amogela dikelo tša `'viewport'`, `'window'`, `'scrollParent'`, goba tšhupetšo ya HTMLElement (JavaScript fela). Bakeng sa tshedimošo e oketšegilego lebelela ditokomane tša preventOverflow tša Popper.js .

Hlokomela ge boundarye beakantšwe go boleng bjo bongwe le bjo bongwe ntle le 'scrollParent', setaele position: staticse dirišwa go .dropdownsetshelo.

Mekgwa ya go šoma

Mokgwa	Tlhalošo
`$().dropdown('toggle')`	E fetola thepo ya go theoga ya navbar ye e filwego goba go sepelasepela ga dithepo.
`$().dropdown('update')`	E mpshafatša maemo a go theoga ga elemente.
`$().dropdown('dispose')`	E senya go theoga ga elemente.

Ditiragalo

Ditiragalo ka moka tša go theoga di thuntšhwa go .dropdown-menuelemente ya motswadi ya 's gomme di na le relatedTargetthepa, yeo boleng bja yona e lego elemente ya ankora ya go fetoša.

Tiragalo	Tlhalošo
`show.bs.dropdown`	Tiragalo ye e thunya ka pela ge mokgwa wa mohlala wa pontšho o bitšwa.
`shown.bs.dropdown`	Tiragalo ye e thuntšhwa ge go theoga go dirilwe gore go bonagale go modiriši (e tla emela diphetogo tša CSS, go phetha).
`hide.bs.dropdown`	Tiragalo ye e thuntšhwa ka pela ge mokgwa wa go uta mohlala o biditšwe.
`hidden.bs.dropdown`	Tiragalo ye e thuntšhwa ge go theoga go feditše go utollwa go tšwa go modiriši (e tla emela diphetogo tša CSS, go phetha).

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

Di-dropdown tša go theoga

Kakaretšo

Phihlelelo

Mehlala

Di-drolodown tša konope e tee

Arola konopo dropdowns

Go lekanyetša bogolo

Phapano ya go theoga

Phapano ya dropright

Phapano ya dropleft

Diaetheme tša menu

Go logaganya menu

Dihlogo tša dimenu

Dikaroganyo tša dimenu

Diforomo tša menu

Diaetheme tša menu tše di šomago

Diaetheme tša menu tše di golofetšego

Tšhomišo

Ka dika ya data

Ka JavaScript

`data-toggle="dropdown"`e sa dutše e nyakega

Dikgetho

Mekgwa ya go šoma

Ditiragalo

Di-dropdown tša go theoga

Kakaretšo

Phihlelelo

Mehlala

Di-drolodown tša konope e tee

Arola konopo dropdowns

Go lekanyetša bogolo

Phapano ya go theoga

Phapano ya dropright

Phapano ya dropleft

Diaetheme tša menu

Go logaganya menu

Dihlogo tša dimenu

Hlogo ya go theoga

Dikaroganyo tša dimenu

Diforomo tša menu

Diaetheme tša menu tše di šomago

Diaetheme tša menu tše di golofetšego

Tšhomišo

Ka dika ya data

Ka JavaScript

data-toggle="dropdown"e sa dutše e nyakega

Dikgetho

Mekgwa ya go šoma

Ditiragalo

`data-toggle="dropdown"`e sa dutše e nyakega