Goitibeherak

Aldatu testuinguru-gainjartzeak esteken zerrendak eta gehiago bistaratzeko Bootstrap goitibeherako pluginarekin.

Ikuspegi orokorra

Goitibeherak txandaka daitezke, esteken zerrendak eta gehiago bistaratzeko testuinguruko gainjartzeak. Elkarreragile egiten dira sartutako Bootstrap goitibeherako JavaScript pluginarekin. Klik eginez txandakatzen dira, ez pasatzean; hau nahita diseinatutako erabakia da.

Goitibeherak hirugarrenen liburutegi batean eraikitzen dira, Popper.js , zeinak kokapen dinamikoa eta ikusleihoen detekzioa eskaintzen du. Ziurtatu popper.min.js sartzen duzula Bootstrap-en JavaScript baino lehen edo Popper.js duen bootstrap.bundle.min.js/ erabili. bootstrap.bundle.jsPopper.js ez da erabiltzen goitibehurrak nabigazio-barretan kokatzeko, baina kokapen dinamikoa ez baita beharrezkoa.

Gure JavaScript iturburutik eraikitzen ari bazara, beharrezkoautil.js da .

Irisgarritasuna

WAI ARIA estandarrak benetako role="menu"widget bat definitzen du, baina hau ekintzak edo funtzioak abiarazten dituzten aplikazio moduko menuetan espezifikoa da. ARIA menuek menu-elementuak, kontrol-laukiaren menu-elementuak, irrati-botoien menu-elementuak, irrati-botoien taldeak eta azpi-menuak izan ditzakete.

Bootstrap-en goitibehurrak, berriz, generikoak izan daitezen eta hainbat egoera eta marka-egituretarako aplikagarriak dira. Esate baterako, posible da sarrera gehigarriak eta inprimaki-kontrolak dituzten goitibehurrak sortzea, hala nola bilaketa-eremuak edo saioa hasteko inprimakiak. Hori dela eta, Bootstrap-ek ez du espero (ezta automatikoki gehitzen) benetako ARIA menuetarako beharrezkoak rolediren atributuetarik. Egileek beraiek sartu beharko dituzte atributu zehatzago horiek.aria-

Hala ere, Bootstrap-ek teklatuaren menuko interakzio estandar gehienetarako euskarria gehitzen du, hala nola, .dropdown-itemelementu indibidualetan zehar mugitzeko gaitasuna kurtsore-teklak erabiliz eta menua teklarekin ixteko aukera ESC.

Adibideak

Itzulbiratu goitibeherako hautagailua (zure botoia edo esteka) eta goitibeherako menua .dropdown, edo deklaratzen duen beste elementu batean position: relative;. Goitibeherak zure beharretara hobeto egokitzeko elementuetatik abiarazi <a>daitezke .<button>

Botoi bakarra

Edozein single .btngoitibeherako hautagailu bihur daiteke marka-aldaketa batzuekin. Hona hemen bi elementuekin nola jar ditzakezun lanean <button>:

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

Eta <a>elementuekin:

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

Alderik onena hau edozein botoi aldaerarekin ere egin dezakezula da:

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

Zatitu botoia

Era berean, sortu zatitutako botoien goitibeherako botoi bakarreko goitibeherako ia marka berdinarekin, baina .dropdown-toggle-splitgoitibeherako ikurraren inguruan tarte egokia gehituta.

paddingKlase gehigarri hau kartilaren bi aldeetako horizontala % 25 murrizteko eta margin-leftohiko botoien goitibehetarako gehitzen dena kentzeko erabiltzen dugu. Aldaketa gehigarri horiek ikurra zatitutako botoian erdiratuta mantentzen dute eta botoi nagusiaren ondoan tamaina egokiagoko sakatu-eremua eskaintzen dute.

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

Tamaina

Botoien goitibeharrek tamaina guztietako botoiekin funtzionatzen dute, lehenetsitako eta zatitutako goitibeherako botoiak barne.

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

Norabideak

Jaitsiera

.dropupAktibatu goitibeherako menuak elementuen gainean elementu nagusiari gehituz .

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

Drop-eskubidea

.droprightAktibatu elementuen eskuineko goitibeherako menuak elementu nagusiari gehituz .

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

.dropleftAktibatu elementuen ezkerreko goitibeherako menuak elementu nagusiari gehituz .

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

Historikoki goitibeherako menuaren edukiak estekak izan behar ziren, baina hori ez da jada v4-rekin gertatzen. <button>Orain, aukeran , zure goitibehetako elementuak erabil ditzakezu <a>s-en ordez.

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

Goitibeherako elementu ez-interaktiboak ere sor ditzakezu .dropdown-item-text. Ez zaitez lasai gehiago estilo CSS edo testu-utilitate pertsonalizatuekin.

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

Aktiboa

Gehitu .activegoitibeherako elementuei aktibo gisa estiloa jartzeko .

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

Desgaituta

Gehitu .disabledgoitibeherako elementuei desgaitu gisa estiloa jartzeko .

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

Lehenespenez, goitibeherako menu bat automatikoki kokatzen da % 100ean bere gurasoaren goiko eta ezkerreko aldean. Gehitu .dropdown-menu-righta .dropdown-menueskuinera lerrokatu goitibeherako menua.

Buruak gora! Goitibeherak Popper.js-i esker kokatzen dira (nabigazio-barra batean daudenean izan ezik).

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

Goiburuak

Gehitu goiburu bat ekintzen atalak etiketatzeko edozein goitibeherako menutan.

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

Banatzaileak

Bereizi erlazionatutako menuko elementuen taldeak banatzaile batekin.

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

Testua

Jarri forma libreko edozein testu goitibeherako menu batean testuarekin eta erabili tartekatzeko utilitateak . Kontuan izan ziurrenik tamaina-estilo gehigarriak beharko dituzula menuaren zabalera mugatzeko.

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

Formak

Jarri inprimaki bat goitibeherako menu batean, edo egin goitibeherako menu batean, eta erabili marjina edo betegarri-utilitateak behar duzun espazio negatiboa emateko.

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

Erabili data-offsetedo data-referencegoitibeherako kokapena aldatzeko.

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

Erabilera

Datu-atributuen edo JavaScript-en bidez, goitibeherako pluginak ezkutuko edukia (goigabeko menuak) aldatzen du .showklasea gurasoen zerrendako elementuan aldatuz. Atributua aplikazio mailan goitibeherako menuak ixteko fidatzen da , data-toggle="dropdown"beraz, komeni da beti erabiltzea.

Ukimenerako gaitutako gailuetan, goitibeherako goitibehitza irekitzeak ( $.noop) kudeatzaile hutsak gehitzen ditu elementuaren mouseoverberehalako seme-alabei . <body>Truke itsusi hau beharrezkoa da iOS-en gertaeraren delegazioan bitxikeriaren inguruan lan egiteko , eta horrek bestela goitibeherako goitibehetik kanpoko edozein tokitan sakatze batek goitibeherako aukera ixten duen kodea abiarazteko eragotziko luke. Goitibehitza itxi ondoren, mouseoverkudeatzaile huts gehigarri hauek kentzen dira.

Datu-atributuen bidez

Gehitu data-toggle="dropdown"esteka edo botoi bati goitibeherako aukera aldatzeko.

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

JavaScript bidez

Deitu goitibehetara JavaScript bidez:

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

`data-toggle="dropdown"`oraindik beharrezkoa

Zure goitibehera JavaScript bidez deitzen duzun edo datu-api-a erabiltzen duzun ala ez, data-toggle="dropdown"beti beharrezkoa da goitibeherako elementu abiarazlean egotea.

Aukerak

Aukerak datu-atributuen bidez edo JavaScript bidez pasa daitezke. Datu-atributuetarako, erantsi aukera-izena data-, hemen bezala data-offset="".

Izena	Mota	Lehenetsia	Deskribapena
desplazamendu	zenbakia \| katea \| funtzioa	0	Goitibeherako desplazamendua bere xedearekiko. Informazio gehiagorako, ikusi Popper.js-en offset docs .
irauli	boolearra	egia	Baimendu Goitibehera iraultzea erreferentziako elementuan gainjartzen bada. Informazio gehiagorako, ikusi Popper.js-en flip docs .
muga	katea \| elementua	'ScrollParent'	Goitibeherako menuaren gainezka-murriztapenaren muga. `'viewport'`, `'window'`, `'scrollParent'`, edo HTMLElement erreferentzia baten balioak onartzen ditu (JavaScript soilik). Informazio gehiago lortzeko, ikusi Popper.js-en preventOverflow docs .
erreferentzia	katea \| elementua	'aldatu'	Goitibeherako menuko erreferentzia-elementua. `'toggle'`, `'parent'`, edo HTMLElement erreferentzia baten balioak onartzen ditu . Informazio gehiago lortzeko, jo Popper.js-en referenceObject docs .
bistaratzea	katea	'dinamikoa'	Berez, Popper.js erabiltzen dugu kokapen dinamikorako. Desgaitu hau erabiliz `static`.

Kontuan izan , ez boundaryden beste balio batean ezartzen denean 'scrollParent', estiloa edukiontziari position: staticaplikatzen zaiola..dropdown

Metodoak

Metodoa	Deskribapena
`$().dropdown('toggle')`	Nabigazio-barra edo fitxen nabigazio baten goitibeherako menua aldatzen du.
`$().dropdown('update')`	Elementu baten goitibeherako posizioa eguneratzen du.
`$().dropdown('dispose')`	Elementu baten goitibeherako zerrenda suntsitzen du.

Gertaerak

Goitibeherako gertaera guztiak .dropdown-menu' ren elementu nagusian abiarazten dira eta relatedTargetpropietate bat dute, zeinaren balioa txandakatzeko aingura-elementua den. hide.bs.dropdowneta hidden.bs.dropdowngertaerek klik-gertaeraren Gertaera Objektu bat daukan clickEventpropietate bat dute (jatorrizko gertaera mota denean soilik ).click

Gertaera	Deskribapena
`show.bs.dropdown`	Gertaera hau berehala abiarazten da show instance metodoa deitzen denean.
`shown.bs.dropdown`	Gertaera hau goitibehitza erabiltzailearentzat ikusgai jartzen denean abiarazten da (CSS trantsizioen zain egongo da osatzeko).
`hide.bs.dropdown`	Gertaera hau berehala abiarazten da ezkutatzeko instantzia metodoa deitzen denean.
`hidden.bs.dropdown`	Gertaera hau goitibeherako zerrenda erabiltzaileari ezkutatzen amaitzen denean abiarazten da (CSS trantsizioen zain egongo da amaitzeko).

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

Goitibeherak

Ikuspegi orokorra

Irisgarritasuna

Adibideak

Botoi bakarra

Zatitu botoia

Tamaina

Norabideak

Jaitsiera

Drop-eskubidea

Dropleft

Menuko elementuak

Aktiboa

Desgaituta

Menuen lerrokatzea

Menuaren edukia

Goiburuak

Banatzaileak

Testua

Formak

Erabilera

Datu-atributuen bidez

JavaScript bidez

`data-toggle="dropdown"`oraindik beharrezkoa

Aukerak

Metodoak

Gertaerak

Goitibeherak

Ikuspegi orokorra

Irisgarritasuna

Adibideak

Botoi bakarra

Zatitu botoia

Tamaina

Norabideak

Jaitsiera

Drop-eskubidea

Dropleft

Menuko elementuak

Aktiboa

Desgaituta

Menuen lerrokatzea

Menuaren edukia

Goiburuak

Goitibeherako goiburua

Banatzaileak

Testua

Formak

Goitibeherako aukerak

Erabilera

Datu-atributuen bidez

JavaScript bidez

data-toggle="dropdown"oraindik beharrezkoa

Aukerak

Metodoak

Gertaerak

`data-toggle="dropdown"`oraindik beharrezkoa