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.

Mga dropdown ng solong button

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:

Action Another action Something else here 
<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:

Action Another action Something else here 
<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>

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

Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link 
<!-- 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>

Mga split button na dropdown

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.

Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link 
<!-- 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>

Pag-iiba ng dropup

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

Action Another action Something else here
Separated link
Action Another action Something else here
Separated link 
<!-- 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>

Pagkakaiba-iba ng dropright

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

Action Another action Something else here
Separated link
Action Another action Something else here
Separated link 
<!-- 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-patak na pagkakaiba-iba

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

Action Another action Something else here
Separated link
Action Another action Something else here
Separated link 
<!-- 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>

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>

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

Dropdown na header
Aksyon Isa pang aksyon 
<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>

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

Aksyon Isa pang aksyon Iba dito
Pinaghiwalay na link 
<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>

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.

Bago dito? Mag-sign up Nakalimutan ang password? 
<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>

Mga aktibong item sa menu

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

Regular na link Aktibong link Isa pang link 
<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 ang mga item sa menu

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

Regular na link Hindi pinagana ang link Isa pang link 
<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>

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 .

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.

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…
})