Pa'u i lalo

Fa'afeso'ota'i fa'alava fa'atatau 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'aopoopo Bootstrap dropdown JavaScript plugin. 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ʻaoso ai gaioiga poʻo galuega. O menus ARIA e mafai ona i ai na'o mea fa'aitu, mea fa'aitu pusa siaki, mea fa'aitula'i fa'amau leitio, vaega fa'amau leitio, ma tama'i lisi.

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ʻaopoopo otometi) soʻo se rolema aria-uiga e 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.

faamau tasi

So'o se mea e tasi .btne mafai ona liua i se pa'u i lalo 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">
  <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>

Fa'amau vaevae

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 fa'amau vaelua ma maua ai se vaega e sili atu le lapopo'a fa'atau 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>

Fa'atonuga

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

Matamata

Fa'aoso menus pa'u i lalo i le 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>

Matāua 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>

E mafai fo'i ona e faia ni mea fa'ato'a fa'atasi ma .dropdown-item-text. Lagona le saoloto e faʻapipiʻi atili i le CSS masani poʻo le faʻaogaina o tusitusiga.

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

Malosi

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>

Fa'aletonu

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>

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 o lo'o i totonu o se 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>

Ulutala

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>

Vaevaega

Vaevae vaega o mea fa'atatau i le lisi 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>

Tusitusi

Tu'u so'o se tusitusiga fa'afuafua i totonu ole lisi fa'alalo ma fa'aoga ma fa'aoga avanoa avanoa . Manatua e te mana'omia ni sitaili fa'aopoopo e fa'agata ai le lautele o le lisi.

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

Fomu

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>

Fa'aoga data-offsetpe data-referencesui le nofoaga o le pa'u i lalo.

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

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 data-toggle="dropdown"lo'o fa'amoemoeina le uiga mo le tapunia o fa'alalo menus i se tulaga fa'aoga, 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 .
faasinomaga	manoa \| elemene	'togo	Fa'asinoga elemene o le lisi o le pa'u i lalo. Talia le taua o le `'toggle'`, `'parent'`, poʻo se HTMLElement reference. Mo nisi faʻamatalaga vaʻai ile Popper.js's referenceObject docs .
fa'aaliga	manoa	'malosi'	E ala i le faaletonu, matou te faʻaaogaina Popper.js mo le faʻatulagaina o tulaga. Taofi lenei mea i le `static`.

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 relatedTargetmea totino, o lona taua o le elemene taula ta'amilo. hide.bs.dropdownma hidden.bs.dropdownmea e tutupu e iai se clickEventmeatotino (na'o le ituaiga o mea na tupu muamua click) o lo'o i ai se Mea Fa'atino mo le kiliki mea na tupu.

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'ū mai le tagata faʻaoga (o le a faʻatali mo suiga CSS, e maeʻa).

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

Pa'u i lalo

Vaaiga lautele

Avanoa

Faataitaiga

faamau tasi

Fa'amau vaevae

Tele

Fa'atonuga

Pa'u

Matamata

Matāua agavale

Menu mea

Malosi

Fa'aletonu

Fa'atonuga lisi

Menu o lo'o i totonu

Ulutala

Vaevaega

Tusitusi

Fomu

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

faamau tasi

Fa'amau vaevae

Tele

Fa'atonuga

Pa'u

Matamata

Matāua agavale

Menu mea

Malosi

Fa'aletonu

Fa'atonuga lisi

Menu o lo'o i totonu

Ulutala

Ulutala pa'ū

Vaevaega

Tusitusi

Fomu

Filifiliga pa'u i lalo

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