Source

Pa'u i lalo

Fa'afeso'ota'i fa'amaufa'ailoga mo le fa'aalia o lisi o feso'ota'iga ma isi mea fa'atasi ma le Bootstrap dropdown plugin.

Vaaiga lautele

Pa'u i lalo e mafai ona fesuia'i, fa'alava fa'atatau mo le fa'aalia o lisi o so'otaga ma isi mea. O lo'o fa'afeso'ota'i fa'atasi ma le fa'apipi'i fa'apipi'i a le Bootstrap dropdown JavaScript. E fesuia'i i le kiliki, ae le o le fa'afefe; ose fa'ai'uga faufau fa'amoemoeina.

Dropdowns e fausia i luga o se faletusi vaega lona tolu, Popper.js , lea e maua ai le tulaga faʻamalosi ma le vaʻaia vaʻaia. Ia mautinoa e aofia ai popper.min.js i luma o le Bootstrap's JavaScript poʻo le faʻaoga bootstrap.bundle.min.js/ bootstrap.bundle.jslea e iai Popper.js. E le fa'aogaina le Popper.js e fa'atulaga ai fa'alalo i lalo i luga o navbars e ui e le mana'omia se tulaga fa'amalosi.

Afai o loʻo e fausiaina la matou JavaScript mai le puna, e manaʻomiautil.js .

Avanoa

O le WAI ARIA standard o loʻo faʻamatalaina se role="menu"widget moni , ae o lenei mea e faʻapitoa i faʻaoga-pei o menus e faʻaosoina ai gaioiga poʻo galuega. ARIA menus e mafai ona i ai na'o mea fa'aitu, pusa siaki mea lisi, mea fa'aitula'i fa'amau, fa'alapotopotoga fa'amau leitio, ma sub-menu.

Bootstrap's dropdowns, i le isi itu, ua mamanuina ina ia lautele ma talafeagai i tulaga eseese ma fausaga faʻailoga. Mo se fa'ata'ita'iga, e mafai ona fa'atupu fa'amaulalo o lo'o iai mea fa'aopoopo ma fa'atonutonu fomu, e pei o fanua su'esu'e po'o fomu saini. Mo lenei mafuaʻaga, e le faʻamoemoeina e Bootstrap (pe faʻaopoopoina otometi) soʻo se rolema aria-uiga manaʻomia mo menus ARIA moni. E tatau i le au tusitala ona aofia ai nei uiga sili atu ona patino.

Ae ui i lea, e faʻaopoopoina e Bootstrap le lagolago faʻapipiʻi mo le tele o fesoʻotaʻiga lisi lisi, e pei o le mafai ona faʻaogaina .dropdown-itemelemene taʻitasi e faʻaaoga ai ki ma tapuni le lisi ma le ESCki.

Faataitaiga

Afifi le koli o le pa'u i lalo (lou faamau po'o le so'oga) ma le lisi fa'alalo i totonu .dropdown, po'o se isi elemene e fa'ailoa mai position: relative;. E mafai ona fa'aosoina mai <a>po'o <button>elemene e fetaui lelei ma ou mana'oga.

Fa'amau fa'amau tasi

So'o se mea e tasi .btne mafai ona liua i se pa'u i lalo toggle ma nisi suiga fa'ailoga. O le auala lenei e mafai ai ona e faʻaogaina i latou i <button>elemene e lua:

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

Ma faʻatasi ai ma <a>elemene:

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

O le vaega pito sili ona lelei e mafai ona e faia lenei mea i soʻo se suiga faʻamau, foi:

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

Vaevae fa'amau fa'amau i lalo

E fa'apena fo'i, fa'atupu fa'amaufa'ailoga vaelua fa'atasi ma fa'ailoga tutusa ma fa'amau fa'amau tasi, ae fa'atasi ai ma le fa'aopoopoina .dropdown-toggle-splitmo le avanoa talafeagai i le fa'amaufa'ailoga.

Matou te fa'aogaina lenei vasega fa'aopoopo e fa'aitiitia ai le fa'alava paddingi itu uma e lua o le fa'ailoga i le 25% ma aveese le margin-leftfa'aopoopo mo fa'amau fa'amau fa'amau. O na suiga fa'aopoopo e fa'amautu ai le fa'amaufa'ailoga i le ki vaelua ma tu'u ai se vaega e sili atu le lapopo'a ta i tafatafa o le ki autu.

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

Tele

O fa'amau fa'amau e galue i fa'amau o so'o se lapo'a, e aofia ai fa'amau fa'aletonu ma vaevae fa'amau.

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

Fesuia'iga fa'atu'u

Fa'aoso lisi fa'alalo i luga o elemene e ala i le fa'aopoopo .dropupi le elemene matua.

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

Su'ega pa'u

Fa'aoso menus pa'u i le itu taumatau o elemene e ala i le fa'aopoopo .droprighti le elemene matua.

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

Su'ega ile agavale

Fa'aoso menus pa'u i le agavale o elemene e ala i le fa'aopoopo .droplefti le elemene matua.

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

O mea o lo'o i lalo ole lisi fa'asolopito e tatau ona avea ma so'otaga, ae e le o toe fa'apea le v4. Ole taimi nei e mafai ona e fa'aogaina <button>elemene i lau pa'u i lalo nai lo na'o <a>le s.

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

Ona o le faaletonu, e otometi lava ona tu'u 100% mai le pito i luga ma le itu agavale o lona matua. Fa'aopoopo .dropdown-menu-righti le .dropdown-menufa'aoga i le taumatau le lisi o le pa'u i lalo.

Ulu i luga! Fa'ato'a fa'atulaga fa'afetai i Popper.js (sei vagana ai ua i ai i totonu o le 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>

Fa'aopoopo se ulutala e fa'ailoga vaega o gaioioiga i so'o se lisi fa'alalo.

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

Vaevae vaega o mea fa'aitu fa'atasi ma se vaeluaga.

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

Tu'u se fomu i totonu o le lisi o le pa'u i lalo, pe fai i totonu o le lisi o le pa'u i lalo, ma fa'aoga le pito i lalo po'o le padding utilities e tu'u ai le avanoa leaga e te mana'omia.

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

Faaopoopo .activei aitema i le pa'ū i lalo e fa'avasega ai e pei o le gaioi .

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

Faaopoopo .disabledi aitema i le pa'ū i lalo e fa'apena e le atoatoa .

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

Fa'aoga

E ala i fa'amatalaga uiga po'o le JavaScript, o le pa'ū fa'apipi'i fa'apipi'i mea natia (pa'u i lalo menus) e ala i le fa'anofoina o le .showvasega i le lisi o matua. O le data-toggle="dropdown"uiga e fa'alagolago i ai mo le tapunia o menus dropdown i se tulaga o talosaga, o se manatu lelei le fa'aaogaina i taimi uma.

I luga o masini e mafai ona pa'i, o le tatalaina o se pa'u i lalo e fa'aopoopoina ai le gaogao ( $.noop) mouseoverfa'atonu i tamaiti vave o le <body>elemene. O lenei hack e ta'utinoina mataga e mana'omia e galue fa'ata'amilo i se fa'alavelave i le tu'uina atu o mea e fai a iOS , lea e ono taofia ai se pa'i i so'o se mea i fafo atu o le pa'u i lalo mai le fa'aosoina o le code e tapuni ai le pa'ū. O le taimi lava e tapuni ai le pa'u i lalo, o nei isi fa'aoga gaogao mouseovere aveese.

E ala i fa'amaumauga uiga

Fa'aopoopo data-toggle="dropdown"i se so'oga po'o se fa'amau e fa'asolo i lalo.

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

E ala i le JavaScript

Valaau le to'alalo e ala i le JavaScript:

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

`data-toggle="dropdown"`manaomia pea

Tusa lava pe e te valaʻau lau pa'ū i lalo e ala i le JavaScript pe faʻaaoga le data-api, data-toggle="dropdown"e manaʻomia i taimi uma le i ai i luga o le elemene faʻaoso.

Filifiliga

O filifiliga e mafai ona pasia e ala i faʻamatalaga uiga poʻo le JavaScript. Mo fa'amatalaga uiga, fa'aopoopo le igoa filifiliga i le data-, pei o le data-offset="".

Igoa	Ituaiga	Fa'atonu	Fa'amatalaga
fa'apena	numera \| manoa \| galuega faatino	0	Offset o le pa'u i lalo e fa'atatau i lona fa'amoemoe. Mo nisi fa'amatalaga va'ai ile Popper.js's offset docs .
liliu	boolean	moni	Fa'ataga le Pa'u i lalo e fa'ase'e pe a o'o i luga o le elemene fa'asino. Mo nisi fa'amatalaga va'ai ile Popper.js's flip docs .
tuaoi	manoa \| elemene	'scrollParent'	Fa'agata tapula'a tuaoi o le lisi e to'a i lalo. Talia le taua o le `'viewport'`, `'window'`, `'scrollParent'`, poʻo se HTMLElement reference (JavaScript naʻo). Mo nisi fa'amatalaga va'ai ile Popper.js's preventOverflow docs .

Manatua pe a boundaryseti i soʻo se tau e ese mai i le 'scrollParent', o le sitaili position: statice faʻaoga i le .dropdownkoneteina.

Metotia

Metotia	Fa'amatalaga
`$().dropdown('toggle')`	Fa'asolo i lalo le lisi o le navbar ua tu'uina atu po'o le fa'atautaiga fa'apipi'i.
`$().dropdown('update')`	Fa'afou le tulaga o le pa'u i lalo o se elemene.
`$().dropdown('dispose')`	Fa'aleagaina le pa'u i lalo o se elemene.

Mea na tutupu

O mea uma e pa'u i lalo o lo'o fa'ao i le .dropdown-menu'elemene matua ma e iai se relatedTargetmeatotino, o lona tau o le elemene taula ta'amilo.

Mea na tupu	Fa'amatalaga
`show.bs.dropdown`	E mu vave lenei mea pe a valaau le auala fa'ata'ita'iga.
`shown.bs.dropdown`	O lenei mea e tupu pe a faʻaalia le pa'ū i lalo i le tagata faʻaoga (o le a faʻatali mo suiga CSS, e faʻamaeʻa).
`hide.bs.dropdown`	O lenei mea e tupu e faʻamalo vave pe a valaʻau le auala faʻataʻitaʻiga natia.
`hidden.bs.dropdown`	O lenei mea e tupu pe a maeʻa ona natia le pa'ū i lalo mai le tagata faʻaoga (o le a faʻatali mo suiga CSS, e faʻamaeʻa).

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

Pa'u i lalo

Vaaiga lautele

Avanoa

Faataitaiga

Fa'amau fa'amau tasi

Vaevae fa'amau fa'amau i lalo

Tele

Fesuia'iga fa'atu'u

Su'ega pa'u

Su'ega ile agavale

Menu mea

Fa'atonuga lisi

Ulutala lisi

Vaevae lisi

Pepa fomu

Mea gaioi lisi

Ua le atoatoa le lisi o mea

Fa'aoga

E ala i fa'amaumauga uiga

E ala i le JavaScript

`data-toggle="dropdown"`manaomia pea

Filifiliga

Metotia

Mea na tutupu

Pa'u i lalo

Vaaiga lautele

Avanoa

Faataitaiga

Fa'amau fa'amau tasi

Vaevae fa'amau fa'amau i lalo

Tele

Fesuia'iga fa'atu'u

Su'ega pa'u

Su'ega ile agavale

Menu mea

Fa'atonuga lisi

Ulutala lisi

Ulutala pa'ū

Vaevae lisi

Pepa fomu

Mea gaioi lisi

Ua le atoatoa le lisi o mea

Fa'aoga

E ala i fa'amaumauga uiga

E ala i le JavaScript

data-toggle="dropdown"manaomia pea

Filifiliga

Metotia

Mea na tutupu

`data-toggle="dropdown"`manaomia pea