Source

Dagiti dropdown

I-toggle dagiti konteksto a panagikapet para iti panangiparang kadagiti listaan ​​dagiti silpo ken dadduma pay babaen ti Bootstrap dropdown plugin.

Panangkita iti pakabuklan

Dagiti dropdown ket mabalin a mabaliwan, dagiti konteksto a panagikapet para iti panangiparang kadagiti listaan ​​dagiti silpo ken dadduma pay. Naaramid dagitoy nga interaktibo babaen ti nairaman a Bootstrap dropdown JavaScript plugin. Ma-toggle dagitoy babaen ti panag-click, saan a babaen ti panag-hover; daytoy ket inggagara a pangngeddeng iti disenio.

Dagiti dropdown ket naibangon iti maysa a maikatlo a partido a biblioteka, ti Popper.js , a mangipaay ti dinamiko a panagposision ken panagduktal ti viewport. Siguraduen nga iraman ti popper.min.js sakbay ti JavaScript ti Bootstrap wenno usaren ti bootstrap.bundle.min.js/ bootstrap.bundle.jsa naglaon iti Popper.js. Ti Popper.js ket saan a maus-usar a mangiposision kadagiti dropdown kadagiti navbar nupay kasta a kas ti dinamiko a panagposision ket saan a kasapulan.

No mangbangbangonka iti JavaScript-mi manipud iti gubuayan, kasapulanna tiutil.js .

Ti pannakagun-od

Ti pagalagadan ti WAI ARIA ket mangikeddeng ti aktual a role="menu"widget , ngem daytoy ket espesipiko kadagiti kasla aplikasion a menu a mangtignay kadagiti panagtignay wenno dagiti panagandar. Dagiti menu ti ARIA ket mabalin laeng nga aglaon kadagiti banag ti menu, dagiti banag ti menu ti kahon ti tsek, dagiti banag ti menu ti buton ti radio, dagiti grupo ti buton ti radio, ken dagiti sub-menu.

Iti sabali a bangir, dagiti dropdown ti Bootstrap ket nadisenio a sapasap ken maipakat kadagiti nadumaduma a kasasaad ken dagiti estruktura ti markup. Kas pagarigan, mabalin ti mangpartuat kadagiti dropdown a naglaon kadagiti kanayonan nga input ken dagiti kontrol ti porma, a kas dagiti tay-ak ti panagbiruk wenno dagiti porma ti panagserrek. Gapu iti daytoy a rason, ti Bootstrap ket saan a mangnamnama (wenno automatiko a manginayon) ti ania man kadagiti roleken dagiti aria-kababalin a kasapulan para kadagiti pudno nga ARIA a menu. Masapul nga iraman dagiti autor dagitoy nga ad-adda nga espesipiko a kababalin a mismo.

Nupay kasta, ti Bootstrap ket mangnayon ti naibangon a suporta para kadagiti kaaduan a pagalagadan a panagtitinnulong ti menu ti teklado, a kas ti abilidad nga aggaraw kadagiti indibidual .dropdown-itemnga elemento babaen ti panagusar kadagiti tulbek ti kursor ken mangiserra ti menu babaen ti ESCtulbek.

Dagiti pagarigan

Balkoten ti toggle ti dropdown (ti buton wenno silpomo) ken ti dropdown menu iti uneg ti .dropdown, wenno sabali nga elemento a mangideklara position: relative;iti . Mabalin a mai-trigger dagiti dropdown manipud <a>wenno <button>dagiti elemento tapno nasaysayaat a maibagay kadagiti mabalin a kasapulam.

Agmaymaysa a buton dagiti dropdown

Ania man a single .btnket mabalin a pagbalinen a dropdown toggle nga addaan kadagiti sumagmamano a panagbalbaliw ti markup. Adtoy no kasano a mabalinmo nga ikabil dagitoy nga agtrabaho kadagiti asinoman <button>nga 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>

Ket addaan kadagiti <a>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>

Ti kasayaatan a paset ket mabalinmo nga aramiden daytoy iti ania man a buton a variant, met:

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 dagiti dropdown ti buton

Kasta met, mangpartuat kadagiti nabingay a buton a dropdown nga addaan iti gangani a kapada a marka a kas dagiti agmaymaysa a buton a dropdown, ngem addaan ti pannakainayon ti .dropdown-toggle-splitpara iti umno a panagsisina iti aglawlaw ti dropdown a caret.

Usarenmi daytoy nga ekstra a klase tapno mapabassit ti horizontal paddingiti agsumbangir a sikigan ti caret iti 25% ken ikkaten ti margin-leftthat's added para kadagiti regular a button dropdown. Dagita nga ekstra a panagbalbaliw pagtalinaedenda a naisentro ti caret iti split button ken mangipaay iti ad-adda a maitutop ti kadakkelna a lugar a maidungpar iti abay ti kangrunaan a buton.

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>

Panag-sizing

Dagiti buton a dropdown ket agtrabaho kadagiti buton ti amin a kadakkel, a mairaman dagiti default ken split a dropdown a 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>

Panagdumaduma ti dropup

Mangtignay kadagiti dropdown a menu iti ngato dagiti elemento babaen ti pananginayon .dropupiti nagannak nga 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>

Panagdumaduma ti dropright

Mangtignay kadagiti dropdown a menu iti kannawan dagiti elemento babaen ti pananginayon .droprightiti nagannak nga 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>

Panagdumaduma ti dropleft

Mangtignay kadagiti dropdown a menu iti kannigid dagiti elemento babaen ti pananginayon .dropleftiti nagannak nga 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>

Iti pakasaritaan dagiti linaon ti dropdown a menu ket masapul a dagiti silpo, ngem saanen a kasta ti kaso ti v4. Ita mabalinmo nga opsional nga usaren <button>dagiti elemento kadagiti dropdown-mo imbes a ti laeng <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>

Babaen ti default, ti maysa a dropdown a menu ket automatiko a naiposision iti 100% manipud iti ngato ken iti kannigid a sikigan ti nagannakna. Inayon .dropdown-menu-rightiti a .dropdown-menuagingga iti kannawan nga i-align ti dropdown menu.

Ulo nga agpangato! Dagiti dropdown ket naiposision gapu ti Popper.js (malaksid no dagitoy ket linaon ti maysa a 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>

Manginayon ti ulo a mangimarka kadagiti benneg dagiti tignay iti ania man a dropdown a menu.

Dropdown nga ulo
Aksion Sabali pay nga aramid 
<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>

Pagsisinaen dagiti grupo dagiti mainaig a banag ti menu babaen ti divider.

Aksion Sabali pay nga aramid Sabali pay ditoy
Naisina a silpo 
<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>

Mangikabilka iti porma iti uneg ti dropdown menu, wenno aramidem dayta a dropdown menu, ken agusarka kadagiti margin wenno padding utilities tapno maitedmo iti negatibo nga espasio a kasapulam.

Baro iti aglawlaw ditoy? Agpirma Nalipatan mo ti 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 a banag ti menu

Inayon .activekadagiti banag iti dropdown tapno estilo dagitoy a kas aktibo .

Regular nga link Aktibo nga link Sabali pay a silpo 
<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>

Nabaldado dagiti banag iti menu

Inayon .disabledkadagiti banag iti dropdown tapno estilo dagitoy a kas baldado .

Regular nga link Nabaldado ti silpo Sabali pay a silpo 
<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>

Panagusar

Babaen dagiti kabileg ti datos wenno JavaScript, ti dropdown a plugin ket mangbalbaliw ti nailemmeng a linaon (dagiti dropdown a menu) babaen ti panangi-toggle ti .showklase iti banag ti listaan ​​dagiti nagannak. Ti data-toggle="dropdown"attribute ket agpannuray para iti panagserra kadagiti dropdown a menu iti maysa a lebel ti aplikasion, isu a nasayaat nga ideya a kanayon nga usaren daytoy.

Kadagiti touch-enabled nga alikamen, ti pananglukat iti dropdown ket manginayon kadagiti empty ( $.noop) mouseoverhandler kadagiti dagus nga annak ti <body>elemento. Daytoy nga aminen a naalas a hack ket kasapulan tapno agtrabaho iti aglawlaw ti maysa a quirk iti iOS’ event delegation , a no saan ket manglapped iti maysa a tap iti sadinoman iti ruar ti dropdown manipud iti panangtignay iti kodigo a mangiserra iti dropdown. Apaman a naserraan ti dropdown, mouseovermaikkat dagitoy a kanayonan nga empty handler.

Babaen kadagiti attribute ti datos

Inayon data-toggle="dropdown"iti link wenno buton tapno mai-toggle ti 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>

Babaen ti JavaScript

Tawagan dagiti dropdown babaen ti JavaScript:

$('.dropdown-toggle').dropdown()
data-toggle="dropdown"kasapulan pay laeng

Uray no awagam ti dropdownmo babaen ti JavaScript wenno imbes ketdi usarem ti data-api, data-toggle="dropdown"ket kanayon a kasapulan nga adda iti trigger element ti dropdown.

Dagiti Pagpilian

Dagiti pagpilian ket mabalin a maipasa babaen dagiti attribute ti datos wenno JavaScript. Para kadagiti kababalin ti datos, inayon ti nagan ti pagpilian iti data-, a kas iti data-offset="".

Nagan Tipo Default Panangiladawan
offset nga numero | kuerdas nga | amad 0 nga Offset ti dropdown relatibo iti targetna. Para iti ad-adu pay nga impormasion kitaen dagiti offset docs ti Popper.js .
ibaliktad boolean nga agpayso Bay-an ti Dropdown nga ag-flip no adda panagtuon iti reperensia nga elemento. Para iti ad-adu pay nga impormasion kitaen dagiti flip docs ti Popper.js .
beddeng ti pagbeddengan kuerdas nga | elemento 'ag-scrollParent'. Beddeng ti limitasion ti panaglablabes ti dropdown a menu. Awaten dagiti pateg ti 'viewport', 'window', 'scrollParent', wenno ti reperensia ti HTMLElement (JavaScript laeng). Para iti ad-adu pay nga impormasion kitaen ti preventOverflow docs ti Popper.js .

Imutektekanyo no boundarynaikeddeng iti ania man a pateg malaksid ti 'scrollParent', ti estilo position: staticket maipakat iti .dropdownpagkargaan.

Dagiti Pamay-an

Wagas Panangiladawan
$().dropdown('toggle') I-toggle ti dropdown menu ti naited a navbar wenno tabbed navigation.
$().dropdown('update') Ipabaro ti posision ti dropdown ti maysa nga elemento.
$().dropdown('dispose') Dadaelenna ti dropdown ti maysa nga elemento.

Dagiti Pasamak

Amin a dropdown a pasamak ket maipaputok iti .dropdown-menunagannak nga elemento ti ' ken addaan iti relatedTargettagikua, a ti pategna ket ti agbalbaliw nga elemento ti angkla.

Pasamak Panangiladawan
show.bs.dropdown Daytoy a pasamak ket agputok a dagus no ti pamay-an ti show instance ket maawagan.
shown.bs.dropdown Daytoy a pasamak ket mapaputok no ti dropdown ket naaramiden a makita ti agar-aramat (urayenna dagiti panagbalbaliw ti CSS, tapno makompleto).
hide.bs.dropdown Daytoy a pasamak ket dagus a mapaputok no ti pamay-an ti panaglemmeng ti pagarigan ket naawagan.
hidden.bs.dropdown Daytoy a pasamak ket mapaputok no ti dropdown ket nalpas a nailemmeng manipud iti agar-aramat (urayenna dagiti panagbalbaliw ti CSS, tapno makompleto). 
$('#myDropdown').on('show.bs.dropdown', function () {
  // do something…
})