Source

Mga dropdown

I-toggle ang mga contextual overlay para sa pagpapakita ng mga listahan ng mga link at higit pa gamit ang Bootstrap dropdown plugin.

Pangkalahatang-ideya

Ang mga dropdown ay toggleable, contextual overlay para sa pagpapakita ng mga listahan ng mga link at higit pa. Ginawa silang interactive gamit ang kasamang Bootstrap dropdown JavaScript plugin. Ang mga ito ay toggle sa pamamagitan ng pag-click, hindi sa pamamagitan ng pag-hover; ito ay isang intensyonal na desisyon sa disenyo.

Ang mga dropdown ay binuo sa isang third party na library, Popper.js , na nagbibigay ng dynamic na pagpoposisyon at viewport detection. Tiyaking isama ang popper.min.js bago ang JavaScript ng Bootstrap o gamitin ang bootstrap.bundle.min.js/ bootstrap.bundle.jsna naglalaman ng Popper.js. Ang Popper.js ay hindi ginagamit upang iposisyon ang mga dropdown sa mga navbar ngunit dahil hindi kinakailangan ang dynamic na pagpoposisyon.

Kung binubuo mo ang aming JavaScript mula sa pinagmulan, nangangailanganutil.js ito ng .

Accessibility

Ang WAI ARIA standard ay tumutukoy sa isang aktwal na role="menu"widget , ngunit ito ay partikular sa mga application-like na menu na nagti-trigger ng mga aksyon o function. Ang mga ARIA menu ay maaari lamang maglaman ng mga menu item, checkbox menu item, radio button menu item, radio button group, at sub-menu.

Ang mga dropdown ng Bootstrap, sa kabilang banda, ay idinisenyo upang maging generic at naaangkop sa iba't ibang sitwasyon at istruktura ng markup. Halimbawa, posibleng gumawa ng mga dropdown na naglalaman ng mga karagdagang input at kontrol ng form, gaya ng mga field sa paghahanap o mga form sa pag-login. Para sa kadahilanang ito, hindi inaasahan ng Bootstrap (o awtomatikong magdagdag) ng alinman sa roleat mga aria-katangiang kinakailangan para sa mga tunay na menu ng ARIA . Kailangang isama ng mga may-akda ang mga mas partikular na katangiang ito mismo.

Gayunpaman, ang Bootstrap ay nagdaragdag ng built-in na suporta para sa karamihan ng mga karaniwang pakikipag-ugnayan sa menu ng keyboard, tulad ng kakayahang lumipat sa mga indibidwal na .dropdown-itemelemento gamit ang mga cursor key at isara ang menu gamit ang ESCkey.

Mga halimbawa

I-wrap ang toggle ng dropdown (iyong button o link) at ang dropdown na menu sa loob ng .dropdown, o isa pang elementong nagdedeklara ng position: relative;. Maaaring ma-trigger ang mga dropdown mula sa <a>o <button>mga elemento upang mas umangkop sa iyong mga potensyal na pangangailangan.

Isang pindutan

Anumang single .btnay maaaring gawing dropdown toggle na may ilang pagbabago sa markup. Narito kung paano mo magagamit ang mga ito sa alinmang <button>elemento:

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

At may <a>mga elemento:

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

Ang pinakamagandang bahagi ay magagawa mo rin ito sa anumang variant ng button:

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

Split button

Katulad nito, lumikha ng mga dropdown ng split button na may halos kaparehong markup ng mga dropdown ng solong button, ngunit kasama ang pagdaragdag ng .dropdown-toggle-splitpara sa wastong espasyo sa paligid ng dropdown caret.

Ginagamit namin ang dagdag na klase na ito upang bawasan ang pahalang paddingsa magkabilang gilid ng caret ng 25% at alisin ang margin-leftidinagdag para sa mga regular na dropdown ng button. Ang mga karagdagang pagbabagong iyon ay nagpapanatili sa caret na nakasentro sa split button at nagbibigay ng mas naaangkop na laki ng hit area sa tabi ng pangunahing button.

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

Pagsusukat

Gumagana ang mga dropdown ng button sa mga button sa lahat ng laki, kabilang ang mga default at split dropdown na button.

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

Mga direksyon

Dropup

I-trigger ang mga dropdown na menu sa itaas ng mga elemento sa pamamagitan ng pagdaragdag .dropupsa parent na elemento.

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

I-trigger ang mga dropdown na menu sa kanan ng mga elemento sa pamamagitan ng pagdaragdag .droprightsa parent na elemento.

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

Patak sa kaliwa

I-trigger ang mga dropdown na menu sa kaliwa ng mga elemento sa pamamagitan ng pagdaragdag .dropleftsa parent na elemento.

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

Ang mga nilalaman ng dropdown na menu sa kasaysayan ay dapat na mga link, ngunit hindi na iyon ang kaso sa v4. Ngayon ay maaari mong opsyonal na gumamit <button>ng mga elemento sa iyong mga dropdown sa halip na <a>s lang.

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

Maaari ka ring gumawa ng mga hindi interactive na dropdown na item gamit ang .dropdown-item-text. Huwag mag-atubiling mag-istilo pa gamit ang custom na CSS o mga text utilities.

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

Aktibo

Idagdag .activesa mga item sa dropdown upang i- istilo ang mga ito bilang aktibo .

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

Hindi pinagana

Idagdag .disabledsa mga item sa dropdown upang i- istilo ang mga ito bilang hindi pinagana .

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

Bilang default, ang isang dropdown na menu ay awtomatikong nakaposisyon nang 100% mula sa itaas at sa kaliwang bahagi ng magulang nito. Idagdag .dropdown-menu-rightsa isang .dropdown-menui-align sa kanan ang dropdown na menu.

Heads up! Ang mga dropdown ay nakaposisyon salamat sa Popper.js (maliban kapag ang mga ito ay nakapaloob sa isang 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>

Mga header

Magdagdag ng header upang lagyan ng label ang mga seksyon ng mga aksyon sa anumang dropdown na menu.

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

Mga divider

Paghiwalayin ang mga pangkat ng mga kaugnay na item sa menu na may divider.

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

Text

Ilagay ang anumang freeform na text sa loob ng dropdown na menu na may text at gumamit ng mga spacing utilities . Tandaan na malamang na kailangan mo ng mga karagdagang istilo ng pagpapalaki upang hadlangan ang lapad ng 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>

Mga porma

Maglagay ng form sa loob ng dropdown na menu, o gawin itong dropdown na menu, at gumamit ng margin o padding utility para bigyan ito ng negatibong espasyo na kailangan mo.

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

Gamitin data-offseto data-referencepara baguhin ang lokasyon ng 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>

Paggamit

Sa pamamagitan ng mga attribute ng data o JavaScript, i-toggle ng dropdown na plugin ang nakatagong content (mga dropdown na menu) sa pamamagitan ng pag-toggle sa .showklase sa item sa listahan ng magulang. Ang data-toggle="dropdown"katangian ay umaasa para sa pagsasara ng mga dropdown na menu sa antas ng application, kaya magandang ideya na palaging gamitin ito.

Sa mga touch-enabled na device, ang pagbubukas ng dropdown ay nagdaragdag ng mga walang laman na ( $.noop) mouseoverna humahawak sa mga agarang anak ng <body>elemento. Ang tinatanggap na pangit na hack na ito ay kinakailangan upang malutas ang isang quirk sa pagtatalaga ng kaganapan ng iOS , na kung hindi man ay mapipigilan ang pag-tap saanman sa labas ng dropdown mula sa pagti-trigger ng code na nagsasara ng dropdown. Kapag naisara na ang dropdown, mouseoveraalisin ang mga karagdagang walang laman na handler na ito.

Sa pamamagitan ng mga katangian ng data

Idagdag data-toggle="dropdown"sa isang link o button upang i-toggle ang isang 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>

Sa pamamagitan ng JavaScript

Tawagan ang mga dropdown sa pamamagitan ng JavaScript:

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

`data-toggle="dropdown"`kailangan pa rin

Hindi alintana kung tawagan mo ang iyong dropdown sa pamamagitan ng JavaScript o sa halip ay gumamit ng data-api, data-toggle="dropdown"palaging kinakailangang naroroon sa elemento ng trigger ng dropdown.

Mga pagpipilian

Maaaring ipasa ang mga opsyon sa pamamagitan ng mga katangian ng data o JavaScript. Para sa mga katangian ng data, idagdag ang pangalan ng opsyon sa data-, tulad ng sa data-offset="".

Pangalan	Uri	Default	Paglalarawan
offset	numero \| string \| function	0	Offset ng dropdown na nauugnay sa target nito. Para sa higit pang impormasyon sumangguni sa mga offset na doc ng Popper.js .
pitik	boolean	totoo	Payagan ang Dropdown na mag-flip kung sakaling magkaroon ng overlapping sa reference na elemento. Para sa higit pang impormasyon sumangguni sa mga flip doc ng Popper.js .
hangganan	string \| elemento	'scrollParent'	Overflow constraint hangganan ng dropdown na menu. Tumatanggap ng mga value ng `'viewport'`, `'window'`, `'scrollParent'`, o isang HTMLElement reference (JavaScript lang). Para sa higit pang impormasyon sumangguni sa preventOverflow docs ng Popper.js .
sanggunian	string \| elemento	'toggle'	Sanggunian na elemento ng dropdown na menu. Tumatanggap ng mga halaga ng `'toggle'`, `'parent'`, o isang HTMLElement reference. Para sa higit pang impormasyon sumangguni sa Popper.js's referenceObject docs .
display	string	'dynamic'	Bilang default, ginagamit namin ang Popper.js para sa dynamic na pagpoposisyon. Huwag paganahin ito gamit ang `static`.

Tandaan kung kailan boundarynakatakda sa anumang halaga maliban sa , inilalapat 'scrollParent'ang istilo sa lalagyan.position: static.dropdown

Paraan

Pamamaraan	Paglalarawan
`$().dropdown('toggle')`	I-toggle ang dropdown na menu ng isang naibigay na navbar o naka-tab na navigation.
`$().dropdown('update')`	Ina-update ang posisyon ng dropdown ng isang elemento.
`$().dropdown('dispose')`	Sinisira ang dropdown ng isang elemento.

Mga kaganapan

Ang lahat ng dropdown na event ay pinapagana sa .dropdown-menuparent element ng 's at may relatedTargetproperty, na ang value ay ang toggling anchor element. hide.bs.dropdownat hidden.bs.dropdownang mga event ay may clickEventproperty (lamang kapag ang orihinal na uri ng event ay click) na naglalaman ng Event Object para sa click na event.

Kaganapan	Paglalarawan
`show.bs.dropdown`	Agad na gagana ang kaganapang ito kapag tinawag ang paraan ng show instance.
`shown.bs.dropdown`	Ang kaganapang ito ay pinapagana kapag ang dropdown ay ginawang nakikita ng user (maghihintay para sa mga transition ng CSS, upang makumpleto).
`hide.bs.dropdown`	Ang kaganapang ito ay agad na pinapagana kapag ang paraan ng pagtatago ng halimbawa ay tinawag.
`hidden.bs.dropdown`	Ang kaganapang ito ay gagana kapag ang dropdown ay tapos nang itago mula sa user (maghihintay para sa mga transition ng CSS, upang makumpleto).

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

Mga dropdown

Pangkalahatang-ideya

Accessibility

Mga halimbawa

Isang pindutan

Split button

Pagsusukat

Mga direksyon

Dropup

Dropright

Patak sa kaliwa

Mga item sa menu

Aktibo

Hindi pinagana

Pag-align ng menu

Nilalaman ng menu

Mga header

Mga divider

Text

Mga porma

Paggamit

Sa pamamagitan ng mga katangian ng data

Sa pamamagitan ng JavaScript

`data-toggle="dropdown"`kailangan pa rin

Mga pagpipilian

Paraan

Mga kaganapan

Mga dropdown

Pangkalahatang-ideya

Accessibility

Mga halimbawa

Isang pindutan

Split button

Pagsusukat

Mga direksyon

Dropup

Dropright

Patak sa kaliwa

Mga item sa menu

Aktibo

Hindi pinagana

Pag-align ng menu

Nilalaman ng menu

Mga header

Dropdown na header

Mga divider

Text

Mga porma

Mga pagpipilian sa dropdown

Paggamit

Sa pamamagitan ng mga katangian ng data

Sa pamamagitan ng JavaScript

data-toggle="dropdown"kailangan pa rin

Mga pagpipilian

Paraan

Mga kaganapan

`data-toggle="dropdown"`kailangan pa rin