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 eta guztiz ere, Bootstrap-ek teklatuaren menu-interakzio estandar gehienetarako euskarria gehitzen du, hala nola, .dropdown-itemelementu indibidualetan zehar mugitzeko gaitasuna kurtsore-teklak erabiliz eta menua teklaz 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 bakarreko goitibeherakoak

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

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

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

Klase gehigarri hau kartaren paddingbi 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>

Dropup aldakuntza

.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-eskubidearen aldakuntza

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

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

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>

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>

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>

Jarri inprimaki bat goitibeherako menu batean, edo egin goitibeherako menu batean, eta erabili marjinak edo betegarrizko 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>

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>

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>

Erabilera

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

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, bestela, goitibeherako goitibehetik kanpoko edozein tokitan sakatu 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

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

Aukerak

Aukerak datu-atributuen 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 .

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.

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

Zatitu botoien goitibehurrak

Tamaina

Dropup aldakuntza

Drop-eskubidearen aldakuntza

Dropleft aldakuntza

Menuko elementuak

Menuen lerrokatzea

Menuen goiburuak

Menu banatzaileak

Menu-inprimakiak

Menuko elementu aktiboak

Menu-elementuak desgaituta

Erabilera

Datu-atributuen bidez

JavaScript bidez

`data-toggle="dropdown"`oraindik beharrezkoa

Aukerak

Metodoak

Gertaerak

Goitibeherak

Ikuspegi orokorra

Irisgarritasuna

Adibideak

Botoi bakarreko goitibeherakoak

Zatitu botoien goitibehurrak

Tamaina

Dropup aldakuntza

Drop-eskubidearen aldakuntza

Dropleft aldakuntza

Menuko elementuak

Menuen lerrokatzea

Menuen goiburuak

Goitibeherako goiburua

Menu banatzaileak

Menu-inprimakiak

Menuko elementu aktiboak

Menu-elementuak desgaituta

Erabilera

Datu-atributuen bidez

JavaScript bidez

data-toggle="dropdown"oraindik beharrezkoa

Aukerak

Metodoak

Gertaerak

`data-toggle="dropdown"`oraindik beharrezkoa