Zazzagewa

Juyawa mai rufin mahallin mahallin don nuna jerin hanyoyin haɗin gwiwa da ƙari tare da kayan aikin saukar da Bootstrap.

Dubawa

Zazzage-zazzage ana iya jujjuyawa, mai rufin mahallin don nuna jerin hanyoyin haɗin kai da ƙari. An yi su da ma'amala tare da abubuwan da aka haɗa Bootstrap dropdown JavaScript plugin. Ana kunna su ta dannawa, ba ta shawagi ba; wannan yanke shawara ne da gangan.

An gina abubuwan saukarwa akan ɗakin karatu na ɓangare na uku, Popper.js , wanda ke ba da matsayi mai ƙarfi da gano wurin kallo. Tabbatar kun haɗa popper.min.js kafin Bootstrap's JavaScript ko amfani bootstrap.bundle.min.js/ bootstrap.bundle.jswanda ya ƙunshi Popper.js. Ba a amfani da Popper.js don sanya jerin abubuwan da aka saukar a cikin navbars kodayake ba a buƙatar matsayi mai ƙarfi.

Idan kuna gina JavaScript ɗin mu daga tushe, yana buƙatarutil.js .

Dama

Ma'auni na WAI ARIA yana bayyana ainihin role="menu"widget din , amma wannan ya keɓance ga menus-kamar aikace-aikace waɗanda ke haifar da ayyuka ko ayyuka. Menu na ARIA zai iya ƙunsar abubuwan menu kawai, abubuwan menu na akwati, abubuwan menu na maɓallin rediyo, ƙungiyoyin maɓallin rediyo, da ƙananan menus.

Bootstrap's dropdowns, a gefe guda, an ƙirƙira su don zama na yau da kullun kuma ana amfani da su ga yanayi iri-iri da tsarin saɓani. Misali, yana yiwuwa a ƙirƙiri zazzagewa waɗanda ke ƙunshe da ƙarin bayanai da sarrafawa, kamar filayen bincike ko fom ɗin shiga. Saboda wannan dalili, Bootstrap baya tsammanin (ko ƙara ta atomatik) kowane ɗayan roleda aria-halayen da ake buƙata don menu na ARIA na gaskiya. Marubuta dole ne su haɗa waɗannan ƙarin takamaiman halaye da kansu.

Koyaya, Bootstrap yana ƙara ginanniyar goyon baya don yawancin ma'amalar menu na maɓalli na yau da kullun, kamar ikon motsawa ta hanyar .dropdown-itemabubuwa ɗaya ta amfani da maɓallan siginan kwamfuta kuma rufe menu tare da ESCmaɓalli.

Misalai

Kunna maɓallin zazzagewa (maɓallin ku ko hanyar haɗin yanar gizonku) da menu na zaɓuka a cikin .dropdown, ko wani abin da ke bayyana position: relative;. Za a iya jawo saukar saukarwa daga <a>ko <button>abubuwa don dacewa da yuwuwar bukatun ku.

Maɓalli guda ɗaya

.btnAna iya jujjuya kowane guda ɗaya zuwa juzu'in zazzagewa tare da wasu canje-canje masu alama. Ga yadda zaku iya sanya su aiki tare da kowane <button>abu:

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

Kuma tare da <a>abubuwa:

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

Mafi kyawun sashi shine zaku iya yin wannan tare da kowane bambance-bambancen maɓalli, kuma:

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

Maɓallin Raba

Hakazalika, ƙirƙiri maballin tsagawa tare da kusan alama iri ɗaya kamar maɓalli guda ɗaya, amma tare da ƙari .dropdown-toggle-splitdon tazarar da ta dace a kusa da wurin zaɓuka.

Muna amfani da wannan ƙarin ajin don rage kwance paddinga kowane gefe na kulawa da kashi 25% kuma cire margin-leftabin da aka ƙara don maɓalli na yau da kullun. Waɗannan ƙarin canje-canje suna kiyaye kulawar a tsakiya a cikin maɓallin tsaga kuma suna ba da mafi girman yanki mai girman da ya dace kusa da babban maɓallin.

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

Girman girma

Maɓallin zazzagewa yana aiki tare da maɓallai na kowane girma, gami da tsoho da maɓallan zaɓuka masu tsaga.

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

Hanyoyi

Juyawa

Fara menu na zazzage sama da abubuwa ta ƙara .dropupzuwa kashi na iyaye.

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

Fara menu na zazzage a dama na abubuwan ta ƙara .droprightzuwa kashi na iyaye.

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

Sauke

Fara menu na zazzage a hagu na abubuwan ta ƙara .dropleftzuwa kashi na iyaye.

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

Abubuwan menu na zaɓuka na tarihi dole ne su zama hanyoyin haɗin gwiwa, amma wannan ba haka yake ba tare da v4. Yanzu zaku iya amfani <button>da abubuwan da aka zaɓa a cikin jerin abubuwan da kuke so maimakon kawai <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>

Hakanan zaka iya ƙirƙirar abubuwan zazzage abubuwan da ba sa hulɗa tare da .dropdown-item-text. Jin kyauta don ƙara salo tare da CSS na al'ada ko kayan aikin rubutu.

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

Mai aiki

Ƙara .activezuwa abubuwa a cikin zazzage don sanya su a matsayin masu aiki .

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

An kashe

Ƙara .disabledabubuwa a cikin zazzage don yin salo da su azaman nakasassu .

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

Ta hanyar tsoho, menu na zaɓuka ana sanya shi ta atomatik 100% daga sama da gefen hagu na iyayensa. Ƙara .dropdown-menu-rightzuwa .dropdown-menudama a daidaita menu na zazzagewa.

A kula! Ana ajiye saukar saukar da godiya ga Popper.js (sai dai lokacin da suke cikin 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>

Shugabanni

Ƙara taken zuwa lakabin sassan ayyuka a kowane menu na zazzagewa.

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

Masu rarrabawa

Ƙungiyoyi daban na abubuwan menu masu alaƙa tare da mai rarrabawa.

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

Rubutu

Sanya kowane rubutu na kyauta a cikin menu na zazzage tare da rubutu kuma yi amfani da abubuwan amfani tazara . Lura cewa ƙila za ku buƙaci ƙarin salon ƙima don takura faɗin 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>

Siffofin

Saka fom a cikin menu na zazzage, ko sanya shi cikin menu na zaɓuka, kuma yi amfani da gefe ko abubuwan amfani don ba shi mummunan sarari da kuke buƙata.

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

Yi amfani data-offsetko data-referencedon canza wurin zazzagewar.

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

Amfani

Ta hanyar sifofin bayanai ko JavaScript, zazzage plugin ɗin yana jujjuya abun ciki na ɓoye (menun zazzagewa) ta hanyar jujjuya .showaji akan abin jerin iyaye. An data-toggle="dropdown"dogara da sifa don rufe menu na zazzagewa a matakin aikace-aikace, don haka yana da kyau a yi amfani da shi koyaushe.

A kan na'urorin da aka kunna taɓawa, buɗe zazzagewa yana ƙara masu amfani da komai ( $.noop) mouseoverzuwa ga yaran abubuwan nan kusa <body>. Wannan admittedly mummuna hack wajibi ne don aiki a kusa da wani quirk a iOS' taron wakilan , wanda in ba haka ba zai hana wani famfo a ko'ina a waje da dropdown daga jawo da code cewa rufe jerin zaɓuka. Da zarar an rufe mouseoverzazzagewar, ana cire waɗannan ƙarin masu sarrafa fanko.

Ta hanyar bayanan halayen

Ƙara data-toggle="dropdown"zuwa hanyar haɗi ko maɓalli don kunna zazzagewa.

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

Ta hanyar JavaScript

Kira zazzagewar ta hanyar JavaScript:

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

`data-toggle="dropdown"`har yanzu ake bukata

Ko da kun kira zazzagewar ku ta JavaScript ko kuma a maimakon haka amfani da data-api, data-toggle="dropdown"ana buƙatar koyaushe don kasancewa akan abubuwan faɗakarwa.

Zabuka

Za a iya wucewa ta hanyar sifofin bayanai ko JavaScript. Don halayen bayanai, saka sunan zaɓin zuwa data-, kamar a cikin data-offset="".

Suna	Nau'in	Default	Bayani
biya diyya	lamba \| zaren \| aiki	0	Matsakaicin zazzagewa dangane da manufar sa. Don ƙarin bayani koma zuwa Popper.js's offset docs .
juya	boolean	gaskiya	Ba da izinin saukarwa don jujjuya idan akwai abin da ya faru a kan abin da ake tunani. Don ƙarin bayani koma zuwa Popper.js's lip docs .
iyaka	zaren \| kashi	' gungurawaParent'	Matsakaicin ƙaƙƙarfan ƙayyadaddun iyaka na menu na zazzagewa. Yana karɓar ƙimar `'viewport'`, `'window'`, `'scrollParent'`, ko ma'anar HTMLElement (JavaScript kawai). Don ƙarin bayani koma zuwa Popper.js's preventoverflow docs .
tunani	zaren \| kashi	'juyawa'	Abubuwan da ake bi na menu na zazzagewa. Yana yarda da ƙimar `'toggle'`, `'parent'`, ko bayanin HTMLElement. Don ƙarin bayani koma zuwa Popper.js's referenceObject docs .
nuni	kirtani	'tsari mai ƙarfi'	Ta hanyar tsoho, muna amfani da Popper.js don matsayi mai ƙarfi. Kashe wannan tare da `static`.

Lura lokacin da boundaryaka saita zuwa kowace ƙima banda 'scrollParent', position: staticana amfani da salon a cikin .dropdownakwati.

Hanyoyin

Hanya	Bayani
`$().dropdown('toggle')`	Yana jujjuya menu na zaɓuka na mashigar kewayawa da aka bayar ko kewayawa da aka buga.
`$().dropdown('update')`	Yana sabunta matsayin zazzagewar kashi.
`$().dropdown('dispose')`	Yana lalata abubuwan zazzagewa.

Abubuwan da suka faru

Duk abubuwan da suka faru na zazzage ana harba su ne a .dropdown-menuɓangaren mahaifa kuma suna da relatedTargetkadarori, wanda ƙimar sa shine juzu'in anka. hide.bs.dropdownkuma hidden.bs.dropdownabubuwan da suka faru suna da clickEventdukiya (kawai lokacin da ainihin nau'in taron shine click) wanda ya ƙunshi Abun Abubuwan da ke faruwa don taron dannawa.

Lamarin	Bayani
`show.bs.dropdown`	Wannan taron yana gobara nan da nan lokacin da aka kira hanyar misalin nuni.
`shown.bs.dropdown`	Ana korar wannan taron lokacin da aka bayyana zazzagewa ga mai amfani (zai jira canjin CSS, don kammala).
`hide.bs.dropdown`	Ana korar wannan taron nan da nan lokacin da aka kira hanyar misalin ɓoye.
`hidden.bs.dropdown`	Ana korar wannan taron lokacin da jerin abubuwan da aka gama ɓoye daga mai amfani (zai jira canjin CSS, don kammala).

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

Zazzagewa

Dubawa

Dama

Misalai

Maɓalli guda ɗaya

Maɓallin Raba

Girman girma

Hanyoyi

Juyawa

Dropright

Sauke

Abubuwan menu

Mai aiki

An kashe

Daidaita menu

Menu abun ciki

Shugabanni

Masu rarrabawa

Rubutu

Siffofin

Amfani

Ta hanyar bayanan halayen

Ta hanyar JavaScript

`data-toggle="dropdown"`har yanzu ake bukata

Zabuka

Hanyoyin

Abubuwan da suka faru

Zazzagewa

Dubawa

Dama

Misalai

Maɓalli guda ɗaya

Maɓallin Raba

Girman girma

Hanyoyi

Juyawa

Dropright

Sauke

Abubuwan menu

Mai aiki

An kashe

Daidaita menu

Menu abun ciki

Shugabanni

Jigon saukarwa

Masu rarrabawa

Rubutu

Siffofin

Zaɓuɓɓukan saukarwa

Amfani

Ta hanyar bayanan halayen

Ta hanyar JavaScript

data-toggle="dropdown"har yanzu ake bukata

Zabuka

Hanyoyin

Abubuwan da suka faru

`data-toggle="dropdown"`har yanzu ake bukata