Source

Mga dropdown

I-toggle ang mga overlay sa konteksto para sa pagpakita sa mga lista sa mga link ug uban pa gamit ang Bootstrap dropdown plugin.

Overview

Ang mga dropdown kay ma-toggle, contextual overlay para sa pagpakita sa mga lista sa mga link ug uban pa. Gihimo sila nga interactive sa gilakip nga Bootstrap dropdown JavaScript plugin. Gibalhin sila pinaagi sa pag-klik, dili pinaagi sa pag-hover; kini usa ka tinuyo nga desisyon sa disenyo.

Ang mga dropdown gitukod sa usa ka ikatulo nga partido nga librarya, Popper.js , nga naghatag ug dinamikong posisyon ug pagtan-aw sa viewport. Siguroha nga iapil ang popper.min.js sa dili pa ang JavaScript sa Bootstrap o gamiton bootstrap.bundle.min.js/ bootstrap.bundle.jsnga adunay Popper.js. Ang Popper.js wala gigamit sa pagpahimutang sa mga dropdown sa mga navbar bisan kung dili kinahanglan ang dinamikong pagpoposisyon.

Kung nagtukod ka sa among JavaScript gikan sa gigikanan, kinahanglan kiniutil.js .

Accessibility

Ang WAI ARIA nga sumbanan naghubit sa usa ka aktuwal nga role="menu"widget , apan kini espesipiko sa mga menu nga sama sa aplikasyon nga nagpalihok sa mga aksyon o gimbuhaton. Ang mga menu sa ARIA mahimo ra nga adunay mga butang sa menu, mga butang sa menu sa checkbox, mga butang sa menu sa radio button, mga grupo sa radio button, ug mga sub-menu.

Ang mga dropdown sa Bootstrap, sa laing bahin, gidisenyo nga mahimong generic ug magamit sa lain-laing mga sitwasyon ug markup structures. Pananglitan, posible nga maghimo mga dropdown nga adunay dugang nga mga input ug mga kontrol sa porma, sama sa mga natad sa pagpangita o mga porma sa pag-login. Tungod niini nga rason, ang Bootstrap wala magdahom (ni awtomatik nga makadugang) sa bisan unsa roleug mga aria-hiyas nga gikinahanglan para sa tinuod nga ARIA nga mga menu. Kinahanglang ilakip sa mga tagsulat kining mas espesipikong mga hiyas sa ilang kaugalingon.

Bisan pa, ang Bootstrap nagdugang sa built-in nga suporta alang sa kadaghanan sa mga standard nga keyboard nga mga interaksyon sa menu, sama sa abilidad sa paglihok sa indibidwal .dropdown-itemnga mga elemento gamit ang mga yawe sa cursor ug isira ang menu gamit ang ESCyawe.

Mga pananglitan

I-wrap ang toggle sa dropdown (imong buton o link) ug ang dropdown menu sulod sa .dropdown, o laing elemento nga nagpahayag position: relative;. Ang mga dropdown mahimong ma-trigger gikan sa <a>o <button>mga elemento aron mas mohaum sa imong potensyal nga mga panginahanglan.

Usa ka butones nga dropdown

Ang bisan unsang single .btnmahimo nga usa ka dropdown toggle nga adunay pipila nga mga pagbag-o sa markup. Ania kung giunsa nimo kini magamit sa bisan unsang <button>mga 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>

Ug uban sa <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 labing kaayo nga bahin mao nga mahimo nimo kini sa bisan unsang variant sa buton, usab:

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>

Split button dropdowns

Sa susama, paghimo og split button dropdowns nga adunay halos parehas nga markup sa single button nga dropdowns, apan uban ang pagdugang sa .dropdown-toggle-splitpara sa saktong spacing sa palibot sa dropdown caret.

Gigamit namo kini nga dugang nga klase aron makunhuran ang pinahigda paddingsa bisan asa nga kilid sa caret sa 25% ug tangtangon ang margin-leftgidugang alang sa regular nga mga dropdown sa buton. Kadtong dugang nga mga pagbag-o nagpadayon sa caret nga nakasentro sa split button ug naghatag usa ka mas tukma nga gidak-on nga hit nga lugar sunod sa main 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>

Pagsukod

Ang mga dropdown sa buton nagtrabaho sa mga buton sa tanan nga gidak-on, lakip ang default ug split dropdown nga mga buton.

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

Pagkalainlain sa paghulog

I-trigger ang mga dropdown menu sa ibabaw sa mga elemento pinaagi sa pagdugang .dropupsa elemento sa ginikanan.

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>

Pagkalainlain sa dropright

I-trigger ang mga dropdown menu sa tuo sa mga elemento pinaagi sa pagdugang .droprightsa elemento sa ginikanan.

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>

Pagkalainlain sa dropleft

I-trigger ang mga dropdown menu sa wala sa mga elemento pinaagi sa pagdugang .dropleftsa elemento sa ginikanan.

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 sulud sa dropdown menu sa kasaysayan kinahanglan nga mga link, apan dili na kana ang kaso sa v4. Karon mahimo nimong gamiton ang <button>mga elemento sa imong mga dropdown imbis nga <a>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>

Sa kasagaran, ang usa ka dropdown menu awtomatik nga gipahimutang 100% gikan sa ibabaw ug ubay sa wala nga bahin sa ginikanan niini. Idugang .dropdown-menu-rightsa usa .dropdown-menungadto sa tuo nga i-align ang dropdown menu.

Taas ang ulo! Gipahimutang ang mga dropdown salamat sa Popper.js (gawas kung kini anaa sa usa ka 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>

Pagdugang og usa ka header sa pag-label sa mga seksyon sa mga aksyon sa bisan unsang dropdown menu.

Dropdown nga ulohan
Aksyon Laing 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>

Pagbulag sa mga grupo sa mga may kalabutan nga mga butang sa menu nga adunay usa ka divider.

Aksyon Laing aksyon Laing butang dinhi
Gibulag nga sumpay 
<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>

Ibutang ang usa ka porma sulod sa dropdown menu, o himoa kini nga dropdown menu, ug gamita ang margin o padding utilities aron mahatagan kini og negatibong luna nga imong gikinahanglan.

Bag-o dinhi? Sign up Nakalimot sa 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>

Aktibo nga mga butang sa menu

Idugang .activesa mga aytem sa dropdown aron i- estilo kini nga aktibo .

Regular nga link Aktibo nga link Laing sumpay 
<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>

Gibalda ang mga butang sa menu

Idugang .disabledsa mga aytem sa dropdown aron i- estilo kini isip disabled .

Regular nga link Na-disable nga link Laing sumpay 
<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

Pinaagi sa data attributes o JavaScript, ang dropdown plugin mo-toggle sa tinago nga content (dropdown menus) pinaagi sa pag-toggle sa .showklase sa parent list item. Ang data-toggle="dropdown"hiyas gisaligan alang sa pagsira sa mga dropdown menu sa lebel sa aplikasyon, mao nga maayong ideya nga gamiton kini kanunay.

Sa touch-enabled nga mga device, ang pag-abli sa dropdown magdugang og walay sulod ( $.noop) mouseovernga mga tigdumala sa mga anak sa <body>elemento. Kini nga giangkon nga mangil-ad nga hack gikinahanglan aron masulbad ang usa ka quirk sa delegasyon sa panghitabo sa iOS , nga kung dili makapugong sa usa ka gripo bisan asa sa gawas sa dropdown gikan sa pag-trigger sa code nga nagsira sa dropdown. Kung sirado na ang dropdown, kining mga dugang nga walay sulod nga mouseovermga handler kuhaon.

Pinaagi sa data attributes

Idugang data-toggle="dropdown"sa usa ka link o buton aron i-toggle ang 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>

Pinaagi sa JavaScript

Tawga ang mga dropdown pinaagi sa JavaScript:

$('.dropdown-toggle').dropdown()
data-toggle="dropdown"gikinahanglan pa

Dili igsapayan kung imong tawagan ang imong dropdown pinaagi sa JavaScript o sa baylo nga gamiton ang data-api, data-toggle="dropdown"kinahanglan kanunay nga naa sa elemento sa pag-trigger sa dropdown.

Mga kapilian

Ang mga kapilian mahimong ipasa pinaagi sa mga hiyas sa datos o JavaScript. Para sa data attributes, idugang ang opsyon nga ngalan sa data-, sama sa data-offset="".

Ngalan Matang Default Deskripsyon
offset numero | hilo | function 0 Offset sa dropdown kalabot sa target niini. Alang sa dugang nga impormasyon tan-awa ang Popper.js's offset docs .
paltik boolean tinuod Tugoti ang Dropdown nga mag-flip kung adunay nagsapaw sa reference nga elemento. Alang sa dugang nga impormasyon tan-awa ang Popper.js's flip docs .
utlanan hilo | elemento 'scrollParent' Ang pag-awas sa limitasyon sa dropdown menu. Gidawat ang mga kantidad sa 'viewport', 'window', 'scrollParent', o usa ka HTMLElement reference (JavaScript lang). Alang sa dugang nga impormasyon tan-awa ang Popper.js's preventOverflow docs .

Timan-i kung kanus boundary-a gibutang sa bisan unsang kantidad gawas sa 'scrollParent', ang istilo position: staticgipadapat sa .dropdownsulud.

Pamaagi

Pamaagi Deskripsyon
$().dropdown('toggle') I-toggle ang dropdown menu sa gihatag nga navbar o tabbed navigation.
$().dropdown('update') Gi-update ang posisyon sa dropdown sa usa ka elemento.
$().dropdown('dispose') Giguba ang dropdown sa usa ka elemento.

Mga panghitabo

Ang tanan nga dropdown nga mga panghitabo gipabuthan sa .dropdown-menuginikanan nga elemento ug adunay usa ka relatedTargetkabtangan, kansang bili mao ang toggling anchor nga elemento.

Panghitabo Deskripsyon
show.bs.dropdown Kini nga panghitabo modilaab dayon kung ang paagi sa pagpakita nga pananglitan gitawag.
shown.bs.dropdown Kini nga panghitabo gipabuto kung ang dropdown nahimo nga makita sa tiggamit (maghulat alang sa mga transisyon sa CSS, aron makompleto).
hide.bs.dropdown Kini nga panghitabo gipabuto dayon kung ang paagi sa pagtago sa pananglitan gitawag na.
hidden.bs.dropdown Kini nga panghitabo gipabuto kung ang dropdown nahuman na nga gitago gikan sa user (maghulat sa mga transisyon sa CSS, aron makompleto). 
$('#myDropdown').on('show.bs.dropdown', function () {
  // do something…
})