Dropdowns

Aqleb is-superpożizzjonijiet kuntestwali għall-wiri ta' listi ta' links u aktar bil-plugin dropdown Bootstrap.

Ħarsa ġenerali

Dropdowns huma toggleable, overlays kuntestwali għall-wiri ta 'listi ta' links u aktar. Huma jsiru interattivi mal-plugin Bootstrap dropdown JavaScript inkluż. Huma qed toggled billi tikklikkja, mhux billi tittajjar; din hija deċiżjoni ta' disinn intenzjonali.

Dropdowns huma mibnija fuq librerija ta 'parti terza, Popper.js , li tipprovdi pożizzjonament dinamiku u skoperta viewport. Kun żgur li tinkludi popper.min.js qabel il-JavaScript ta' Bootstrap jew uża bootstrap.bundle.min.js/ bootstrap.bundle.jsli fih Popper.js. Popper.js ma jintużax biex ipoġġi dropdowns fin-navbars għalkemm peress li l-pożizzjonament dinamiku mhuwiex meħtieġ.

Jekk qed tibni JavaScript tagħna mis-sors, teħtieġutil.js .

Aċċessibilità

L -istandard WAI ARIA jiddefinixxi role="menu"widget attwali , iżda dan huwa speċifiku għal menus simili għal applikazzjoni li jqanqlu azzjonijiet jew funzjonijiet. Il-menus ARIA jista' jkun fihom biss oġġetti tal-menu, oġġetti tal-menu tal-kaxxa ta' kontroll, oġġetti tal-menu tal-buttuni tar-radju, gruppi tal-buttuni tar-radju u sub-menus.

Il-dropdowns ta' Bootstrap, min-naħa l-oħra, huma mfassla biex ikunu ġeneriċi u applikabbli għal varjetà ta' sitwazzjonijiet u strutturi ta' markup. Pereżempju, huwa possibbli li jinħolqu dropdowns li fihom inputs addizzjonali u kontrolli tal-formoli, bħal oqsma ta 'tfittxija jew formoli ta' login. Għal din ir-raġuni, Bootstrap ma jistenna (u lanqas iżid awtomatikament) xi wieħed mill- roleu aria-attributi meħtieġa għal menus ARIA veri. L-awturi se jkollhom jinkludu dawn l-attributi aktar speċifiċi huma stess.

Madankollu, Bootstrap iżid appoġġ integrat għall-biċċa l-kbira tal-interazzjonijiet standard tal-menu tat-tastiera, bħall-abbiltà li timxi minn .dropdown-itemelementi individwali billi tuża ċ-ċwievet tal-cursor u tagħlaq il-menu biċ- ESCċavetta.

Eżempji

Kebbeb it-toggle tal-dropdown (il-buttuna jew il-link tiegħek) u l-menu dropdown fi ħdan .dropdown, jew element ieħor li jiddikjara position: relative;. Dropdowns jistgħu jiġu attivati minn <a>jew <button>elementi li jaqblu aħjar mal-bżonnijiet potenzjali tiegħek.

Buttuna waħda

Kwalunkwe wieħed .btnjista' jinbidel f'toggle dropdown b'xi bidliet fil-markup. Hawn kif tista 'tpoġġihom jaħdmu ma' kwalunkwe <button>elementi:

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

U <a>b'elementi:

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

L-aħjar parti hija li tista 'tagħmel dan ma' kwalunkwe varjant tal-buttuna, ukoll:

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

Buttuna maqsuma

Bl-istess mod, oħloq dropdowns tal-buttuna maqsuma prattikament bl-istess markup bħal dropdowns ta 'buttuna waħda, iżda biż-żieda ta' .dropdown-toggle-splitgħal spazjar xieraq madwar il-caret dropdown.

Aħna nużaw din il-klassi żejda biex innaqqsu l-orizzontali paddingfuq kull naħa tal-caret b'25% u neħħi margin-leftdak miżjud għal dropdowns tal-buttuni regolari. Dawk il-bidliet żejda jżommu l-caret iċċentrat fil-buttuna maqsuma u jipprovdu żona ta 'hit ta' daqs aktar xieraq ħdejn il-buttuna prinċipali.

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

Daqs

Buttuni dropdowns jaħdmu ma 'buttuni ta' kull daqs, inklużi default u buttuni dropdown maqsuma.

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

Direzzjonijiet

Dropup

Trigger menus dropdown hawn fuq elementi billi żżid .dropupmal-element ġenitur.

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

Trigger menus dropdown fuq il-lemin tal-elementi billi żżid .droprightmal-element ġenitur.

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

Dropleft

Trigger menus dropdown fuq ix-xellug tal-elementi billi żżid .dropleftmal-element ġenitur.

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

Storikament il-kontenuti tal-menu dropdown kellhom ikunu links, iżda dan m'għadux il-każ ma v4. Issa tista' b'għażla tuża <button>elementi fil-dropdowns tiegħek minflok <a>s biss.

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

Tista' wkoll toħloq oġġetti dropdown mhux interattivi b' .dropdown-item-text. Ħossok liberu li tfassal aktar b'utilitajiet CSS jew test tad-dwana.

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

Attiva

Żid .activemal-oġġetti fil-dropdown biex tfassalhom bħala attivi .

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

B'diżabilità

Żid .disabledmal-oġġetti fil-dropdown biex tfassalhom bħala diżabbli .

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

B'mod awtomatiku, menu dropdown jitqiegħed awtomatikament 100% minn fuq u tul in-naħa tax-xellug tal-ġenitur tiegħu. Żid .dropdown-menu-rightmal- .dropdown-menulemin tallinja l-menu dropdown.

Irjus up! Dropdowns huma pożizzjonati grazzi għal Popper.js (ħlief meta jkunu jinsabu f'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>

Headers

Żid header biex ittikketta sezzjonijiet tal-azzjonijiet fi kwalunkwe menu dropdown.

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

Diviżuri

Gruppi separati ta 'oġġetti tal-menu relatati b'diviżur.

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

Test

Poġġi kwalunkwe test ta' forma ħielsa f'menu dropdown bit-test u uża utilitajiet ta' spazjar . Innota li x'aktarx ikollok bżonn stili ta' daqs addizzjonali biex tillimita l-wisa' tal-menu.

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

Formoli

Poġġi formola f'menu dropdown, jew għamilha f'menu dropdown, u uża utilitajiet tal-marġni jew tal-ikkuttunar biex tagħtiha l-ispazju negattiv li teħtieġ.

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

Uża data-offsetjew data-referencebiex tibdel il-post tal-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>

Użu

Permezz ta 'attributi tad-dejta jew JavaScript, il-plugin dropdown jibdel kontenut moħbi (menus dropdown) billi taqleb il- .showklassi fuq l-oġġett tal-lista prinċipali. L- data-toggle="dropdown"attribut huwa bbażat fuqu għall-għeluq tal-menus dropdown f'livell ta 'applikazzjoni, għalhekk hija idea tajba li dejjem tużah.

Fuq apparati li jintmess, il-ftuħ ta' dropdown iżid handlers vojta ( $.noop) mouseovermat-tfal immedjati tal- <body>element. Dan il-hack ċertament ikrah huwa meħtieġ biex taħdem madwar quirk fid-delegazzjoni tal-avvenimenti tal-iOS , li inkella jipprevjeni vit kullimkien barra mill-dropdown milli jikkawża l-kodiċi li jagħlaq il-dropdown. Ladarba l-dropdown jingħalaq, dawn il-handlers vojta addizzjonali mouseoverjitneħħew.

Via attributi tad-data

Żid data-toggle="dropdown"ma' link jew buttuna biex taqleb 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>

Via JavaScript

Ċempel il-dropdowns permezz ta' JavaScript:

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

`data-toggle="dropdown"`għadu meħtieġ

Irrispettivament minn jekk inti sejħa dropdown tiegħek permezz JavaScript jew minflok tuża d-data-api, data-toggle="dropdown"huwa dejjem meħtieġ li tkun preżenti fuq l-element grillu dropdown.

Għażliet

L-għażliet jistgħu jiġu mgħoddija permezz ta' attributi tad-dejta jew JavaScript. Għal attributi tad-dejta, ehmeż l-isem tal-għażla ma' data-, bħal f' data-offset="".

Isem	Tip	Default	Deskrizzjoni
offset	numru \| spag \| funzjoni	0	Tpaċija tal-dropdown relattiv għall-mira tagħha. Għal aktar informazzjoni irreferi għad-doks tal- offset ta' Popper.js .
flip	boolean	veru	Ħalli Dropdown jinqaleb f'każ ta' sovrapożizzjoni fuq l-element ta' referenza. Għal aktar informazzjoni irreferi għall- flip docs ta' Popper.js .
fruntiera	spag \| element	'scrollParent'	Limitu ta' restrizzjoni ta' overflow tal-menu dropdown. Jaċċetta l-valuri ta' `'viewport'`, `'window'`, `'scrollParent'`, jew referenza HTMLElement (JavaScript biss). Għal aktar informazzjoni irreferi għad-doks preventOverflow ta' Popper.js .
referenza	spag \| element	'toggle'	Element ta' referenza tal-menu dropdown. Jaċċetta l-valuri ta' `'toggle'`, `'parent'`, jew referenza HTMLElement. Għal aktar informazzjoni irreferi għad-doks referenceObject ta' Popper.js .
wiri	spag	'dinamika'	B'mod awtomatiku, nużaw Popper.js għal pożizzjonament dinamiku. Iddiżattiva dan b' `static`.

Innota meta boundaryhuwa ssettjat għal kwalunkwe valur minbarra 'scrollParent', l-istil position: statichuwa applikat għall- .dropdownkontenitur.

Metodi

Metodu	Deskrizzjoni
`$().dropdown('toggle')`	Jiddawwar il-menu dropdown ta' navbar partikolari jew ta' navigazzjoni bit-tabbed.
`$().dropdown('update')`	Taġġorna l-pożizzjoni ta' dropdown ta' element.
`$().dropdown('dispose')`	Jeqred id-dropdown ta' element.

Avvenimenti

L-avvenimenti kollha dropdown huma sparati fuq l .dropdown-menu-element ġenitur ta '' u għandhom relatedTargetproprjetà, li l-valur tagħha huwa l-element ta 'ankra toggling. hide.bs.dropdownu l- hidden.bs.dropdownavvenimenti għandhom clickEventproprjetà (biss meta t-tip ta' avveniment oriġinali huwa click) li fih Oġġett ta' Avveniment għall-avveniment tal-ikklikkja.

Avveniment	Deskrizzjoni
`show.bs.dropdown`	Dan l-avveniment jispara immedjatament meta jissejjaħ il-metodu tal-ispettaklu.
`shown.bs.dropdown`	Dan l-avveniment jiġi sparat meta l-dropdown tkun saret viżibbli għall-utent (se tistenna għal transizzjonijiet CSS, biex jitlestew).
`hide.bs.dropdown`	Dan l-avveniment jiġi sparat immedjatament meta l-metodu tal-istanza taħbi jkun ġie msejjaħ.
`hidden.bs.dropdown`	Dan l-avveniment jiġi sparat meta l-dropdown ikun lest jiġi moħbi mill-utent (se jistenna għal transizzjonijiet CSS, biex jitlestew).

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

Dropdowns

Ħarsa ġenerali

Aċċessibilità

Eżempji

Buttuna waħda

Buttuna maqsuma

Daqs

Direzzjonijiet

Dropup

Dropright

Dropleft

Oġġetti tal-menu

Attiva

B'diżabilità

Allinjament tal-menu

Kontenut tal-menu

Headers

Diviżuri

Test

Formoli

Użu

Via attributi tad-data

Via JavaScript

`data-toggle="dropdown"`għadu meħtieġ

Għażliet

Metodi

Avvenimenti

Dropdowns

Ħarsa ġenerali

Aċċessibilità

Eżempji

Buttuna waħda

Buttuna maqsuma

Daqs

Direzzjonijiet

Dropup

Dropright

Dropleft

Oġġetti tal-menu

Attiva

B'diżabilità

Allinjament tal-menu

Kontenut tal-menu

Headers

Dropdown header

Diviżuri

Test

Formoli

Għażliet dropdown

Użu

Via attributi tad-data

Via JavaScript

data-toggle="dropdown"għadu meħtieġ

Għażliet

Metodi

Avvenimenti

`data-toggle="dropdown"`għadu meħtieġ