Dropdowns

Aktivite kontèks superpositions pou montre lis lyen ak plis ankò ak plugin Bootstrap dropdown la.

Apèsi sou lekòl la

Dropdowns yo ka chanje, superpozisyon kontèks pou montre lis lyen ak plis ankò. Yo ap fè entèaktif ak enkli ladan li Bootstrap dropdown JavaScript plugin. Yo ap aktive pa klike, pa pa elikopte; sa a se yon desizyon konsepsyon entansyonèl .

Dropdowns yo bati sou yon bibliyotèk twazyèm pati, Popper.js , ki bay pwezante dinamik ak deteksyon Viewport. Asire ou ke ou mete popper.min.js anvan JavaScript Bootstrap la oswa itilize bootstrap.bundle.min.js/ bootstrap.bundle.jski gen Popper.js. Popper.js pa itilize pou pozisyon dropdowns nan navbars menm si kòm pwezante dinamik pa obligatwa.

Si w ap konstwi JavaScript nou an soti nan sous, li mande pouutil.js .

Aksesiblite

Estanda WAI ARIA role="menu" defini yon widje aktyèl , men sa a se espesifik nan meni tankou aplikasyon ki deklanche aksyon oswa fonksyon. Meni ARIA kapab genyen sèlman atik meni, atik meni kaz, atik meni bouton radyo, gwoup bouton radyo, ak sou-meni.

Dropdowns Bootstrap yo, nan lòt men an, yo fèt yo dwe jenerik ak aplikab nan yon varyete sitiyasyon ak estrikti maketing. Pa egzanp, li posib pou kreye dropdowns ki genyen lòt entrées ak kontwòl fòm, tankou jaden rechèch oswa fòm konekte. Pou rezon sa a, Bootstrap pa atann (ni otomatikman ajoute) nenpòt nan roleak aria-atribi ki nesesè pou meni ARIA vre. Otè yo pral gen ladan yo atribi pi espesifik sa yo tèt yo.

Sepandan, Bootstrap ajoute sipò entegre pou pifò entèraksyon estanda klavye meni, tankou kapasite pou deplase nan .dropdown-itemeleman endividyèl yo lè l sèvi avèk kle kurseur yo epi fèmen meni an ak ESCkle a.

Egzanp yo

Anvlope bouton dewoulman an (bouton ou oswa lyen ou) ak meni deroule a nan .dropdown, oswa yon lòt eleman ki deklare position: relative;. Dropdowns yo ka deklanche soti nan <a>oswa <button>eleman yo pi byen anfòm bezwen potansyèl ou yo.

Bouton sèl

Nenpòt sèl .btnka tounen yon deroulan ak kèk chanjman maketing. Men ki jan ou ka mete yo nan travay ak nenpòt <button>eleman:

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

Ak <a>eleman:

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

Pi bon pati a se ou ka fè sa ak nenpòt variant bouton tou:

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

Menm jan an tou, kreye dewoulman bouton fann ak nòmalman maketing la menm jan ak dropdown bouton sèl, men ak adisyon a .dropdown-toggle-splitpou bon espas alantou deroulan a.

Nou itilize klas siplemantè sa a pou redwi orizontal la paddingsou chak bò priz la pa 25% epi retire sa margin-leftki te ajoute pou dewoulman bouton regilye yo. Chanjman siplemantè sa yo kenbe caret la santre nan bouton fann an epi bay yon zòn frape ki pi apwopriye akote bouton prensipal la.

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

Dimansyon

Bouton dropdowns travay ak bouton nan tout gwosè, ki gen ladan bouton deroule default ak divize.

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

Direksyon

Dropup

Deklanche meni deroulan anlè eleman yo lè w ajoute .dropupnan eleman paran an.

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

Deklanche meni dewoulan adwat eleman yo lè w ajoute .droprightnan eleman paran an.

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

Dropleft

Deklanche meni dewoulman nan bò gòch eleman yo lè w ajoute .dropleftnan eleman paran an.

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

Istorikman kontni meni yo te dwe lyen, men sa a pa ka a ankò ak v4. Koulye a, ou ka opsyonèlman itilize <button>eleman nan dropdowns ou olye pou yo jis <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>

Ou kapab tou kreye atik dropdown ki pa entèaktif ak .dropdown-item-text. Ezite style pi lwen ak CSS koutim oswa sèvis piblik tèks.

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

Aktif

Ajoute .activenan atik ki nan deroule a pou style yo kòm aktif .

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

Andikape

Ajoute .disablednan atik ki nan deroule a pou style yo kòm andikape .

<div class="dropdown-menu">
  <a class="dropdown-item" href="#">Regular link</a>
  <a class="dropdown-item disabled" href="#" tabindex="-1" aria-disabled="true">Disabled link</a>
  <a class="dropdown-item" href="#">Another link</a>
</div>

Pa default, yon meni deroulant otomatikman pozisyone 100% soti nan tèt la ak sou bò gòch la nan paran li. Ajoute .dropdown-menu-rightyon .dropdown-menua dwat aliman meni an deroulant.

Tèt leve! Dropdowns yo pozisyone gras a Popper.js (eksepte lè yo genyen nan yon 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>

Aliyman reponn

Si ou vle sèvi ak aliyman reponn, enfim pwezante dinamik lè w ajoute data-display="static"atribi a epi sèvi ak klas varyasyon ki reponn yo.

Pou fè aliman dwat meni deroule a ak pwen rupture yo bay la oswa pi gwo, ajoute .dropdown-menu{-sm|-md|-lg|-xl}-right.

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" data-display="static" aria-haspopup="true" aria-expanded="false">
    Left-aligned but right aligned when large screen
  </button>
  <div class="dropdown-menu dropdown-menu-lg-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>

Pou fè aliman bò gòch meni deroule a ak pwen rupture yo bay la oswa pi gwo, ajoute .dropdown-menu-rightak .dropdown-menu{-sm|-md|-lg|-xl}-left.

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" data-display="static" aria-haspopup="true" aria-expanded="false">
    Right-aligned but left aligned when large screen
  </button>
  <div class="dropdown-menu dropdown-menu-right dropdown-menu-lg-left">
    <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>

Remake byen ke ou pa bezwen ajoute yon data-display="static"atribi nan bouton dropdown nan navbars, paske Popper.js pa itilize nan navbars.

Tèt

Ajoute yon header pou make seksyon aksyon yo nan nenpòt meni deroulant.

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

Divizeur

Separe gwoup atik meni ki gen rapò ak yon divizyon.

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

Tèks

Mete nenpòt tèks fòm lib nan yon meni ki gen tèks epi sèvi ak sèvis piblik espas . Remake byen ke ou pral gen anpil chans bezwen estil gwosè adisyonèl pou limite lajè meni an.

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

Fòm

Mete yon fòm nan yon meni deroulant, oswa fè li nan yon meni deroulant, epi sèvi ak maj oswa sèvis piblik padding pou ba li espas negatif ou bezwen an.

<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-group">
      <div class="form-check">
        <input type="checkbox" class="form-check-input" id="dropdownCheck">
        <label class="form-check-label" for="dropdownCheck">
          Remember me
        </label>
      </div>
    </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-group">
    <div class="form-check">
      <input type="checkbox" class="form-check-input" id="dropdownCheck2">
      <label class="form-check-label" for="dropdownCheck2">
        Remember me
      </label>
    </div>
  </div>
  <button type="submit" class="btn btn-primary">Sign in</button>
</form>

Sèvi ak data-offsetoswa data-referencepou chanje kote dropdown la.

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

Itilizasyon

Atravè atribi done oswa JavaScript, Plugin deroule a chanje kontni kache (meni deroulant) lè w chanje .showklas la sou atik lis paran an. Se data-toggle="dropdown"atribi a konte sou pou fèmen meni deroulan nan yon nivo aplikasyon, kidonk li se yon bon lide pou toujou sèvi ak li.

Sou aparèy manyen pèmèt, louvri yon dropdown ajoute moun k ap okipe ( $.noop) vid mouseovernan pitit imedya <body>eleman an. Sa a se vreman lèd Hack nesesè yo travay alantou yon kirk nan delegasyon evènman iOS ' , ki ta otreman anpeche yon tiyo nenpòt kote andeyò deroule a soti nan deklanche kòd la ki fèmen dropdown la. Yon fwa ke dropdown la fèmen, moun kap okipe lòt vid sa mouseoveryo retire.

Via atribi done yo

Ajoute data-toggle="dropdown"nan yon lyen oswa bouton pou aktive yon deroulan.

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

Via JavaScript

Rele dropdowns yo atravè JavaScript:

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

`data-toggle="dropdown"`toujou obligatwa

Kèlkeswa si wi ou non ou rele dropdown ou atravè JavaScript oswa olye de itilize done-api a, data-toggle="dropdown"se toujou oblije prezan sou eleman deklanche dropdown la.

Opsyon

Opsyon yo ka pase atravè atribi done oswa JavaScript. Pou atribi done, ajoute non opsyon a nan data-, tankou nan data-offset="".

Non	Kalite	Default	Deskripsyon
konpanse	nimewo \| fisèl \| fonksyon	0	Konsantrasyon deroule a parapò ak sib li yo. Lè yo itilize yon fonksyon pou detèmine konpanse a, yo rele l ak yon objè ki gen done konpanse a kòm premye agiman li. Fonksyon an dwe retounen yon objè ki gen menm estrikti a. Se eleman deklanche ne DOM la pase kòm dezyèm agiman an. Pou plis enfòmasyon, gade nan dokiman konpanse Popper.js la .
baskile	booleyen	vre	Pèmèt Dropdown baskile nan ka ta gen yon sipèpoze sou eleman referans la. Pou plis enfòmasyon, al gade nan docs baskile Popper.js .
fwontyè	fisèl \| eleman	'scrollParent'	Limit kontrent debòde nan meni an deroulant. Aksepte valè `'viewport'`, `'window'`, `'scrollParent'`, oswa yon referans HTMLElement (JavaScript sèlman). Pou plis enfòmasyon, gade nan docs preventOverflow Popper.js .
referans	fisèl \| eleman	'bale'	Eleman referans nan meni an deroulant. Aksepte valè `'toggle'`, `'parent'`, oswa yon referans HTMLElement. Pou plis enfòmasyon, al gade nan docs referenceObject Popper.js .
ekspozisyon	fisèl	'dinamik'	Pa default, nou itilize Popper.js pou pwezante dinamik. Enfim sa a ak `static`.
popperConfig	nil \| objè	nil	Pou chanje konfigirasyon Bootstrap Popper.js default, gade konfigirasyon Popper.js la

Remake byen lè boundaryyo mete nan nenpòt valè ki pa 'scrollParent', style position: staticla aplike nan .dropdownveso a.

Metòd

Metòd	Deskripsyon
`$().dropdown('toggle')`	Aktive meni dewoulman yon ba nav oswa navigasyon onglet yo bay.
`$().dropdown('show')`	Montre meni dewoulman yon navbar oswa navigasyon onglet yo bay.
`$().dropdown('hide')`	Kache meni dewoulman yon ba nav oswa navigasyon onglet yo bay.
`$().dropdown('update')`	Mete ajou pozisyon deroule yon eleman.
`$().dropdown('dispose')`	Detwi deroule yon eleman.

Evènman

Tout evènman dropdown yo tire nan .dropdown-menueleman paran yo epi yo gen yon relatedTargetpwopriyete, ki gen valè se eleman jete lank baskile. hide.bs.dropdownak hidden.bs.dropdownevènman yo gen yon clickEventpwopriyete (sèlman lè kalite evènman orijinal la se click) ki gen yon Objè Evènman pou evènman an klike sou.

Evènman	Deskripsyon
`show.bs.dropdown`	Evènman sa a dife imedyatman lè yo rele metòd montre egzanp lan.
`shown.bs.dropdown`	Evènman sa a te revoke lè deroule a te fè vizib itilizatè a (ap tann tranzisyon CSS, pou konplete).
`hide.bs.dropdown`	Evènman sa a revoke imedyatman lè yo te rele metòd egzanp kache.
`hidden.bs.dropdown`	Evènman sa a revoke lè dropdown la fini kache pou itilizatè a (ap tann tranzisyon CSS, pou konplete).

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

Dropdowns

Apèsi sou lekòl la

Aksesiblite

Egzanp yo

Bouton sèl

Split bouton

Dimansyon

Direksyon

Dropup

Dropright

Dropleft

Atik meni yo

Aktif

Andikape

Aliyman meni

Aliyman reponn

Kontni meni an

Tèt

Divizeur

Tèks

Fòm

Itilizasyon

Via atribi done yo

Via JavaScript

`data-toggle="dropdown"`toujou obligatwa

Opsyon

Metòd

Evènman

Dropdowns

Apèsi sou lekòl la

Aksesiblite

Egzanp yo

Bouton sèl

Split bouton

Dimansyon

Direksyon

Dropup

Dropright

Dropleft

Atik meni yo

Aktif

Andikape

Aliyman meni

Aliyman reponn

Kontni meni an

Tèt

Dropdown header

Divizeur

Tèks

Fòm

Opsyon dropdown

Itilizasyon

Via atribi done yo

Via JavaScript

data-toggle="dropdown"toujou obligatwa

Opsyon

Metòd

Evènman

`data-toggle="dropdown"`toujou obligatwa