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 , zeinak kokapen dinamikoa eta ikuspegia hautematea eskaintzen du. Ziurtatu popper.min.js sartzen duzula Bootstrap-en JavaScript baino lehen edo Popper duen bootstrap.bundle.min.js
/ erabili. bootstrap.bundle.js
Popper ez da erabiltzen goitibehurrak nabigazio-barran kokatzeko, baina kokapen dinamikoa ez baita beharrezkoa.
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 role
diren 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-item
elementu 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>
Hemen erakusten diren adibideek <ul>
elementu semantikoak erabiltzen dituzte egokia denean, baina marka pertsonalizatua onartzen da.
Botoi bakarra
Edozein single .btn
goitibeherako 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="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown button
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</div>
Eta <a>
elementuekin:
<div class="dropdown">
<a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown link
</a>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</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-bs-toggle="dropdown" aria-expanded="false">
Action
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</div>
Zatitu botoia
Era berean, sortu zatitutako botoien goitibeherako botoi bakarreko goitibeherako ia marka berdinarekin, baina .dropdown-toggle-split
goitibeherako ikurraren inguruan tarte egokia gehituta.
Klase gehigarri hau kartaren padding
bi aldeetako horizontala % 25 murrizteko eta margin-left
ohiko 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-bs-toggle="dropdown" aria-expanded="false">
<span class="visually-hidden">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</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-bs-toggle="dropdown" aria-expanded="false">
Large button
</button>
<ul class="dropdown-menu">
...
</ul>
</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-bs-toggle="dropdown" aria-expanded="false">
<span class="visually-hidden">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
...
</ul>
</div>
<div class="btn-group">
<button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
Small button
</button>
<ul class="dropdown-menu">
...
</ul>
</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-bs-toggle="dropdown" aria-expanded="false">
<span class="visually-hidden">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
...
</ul>
</div>
Goitibehitz ilunak
Aukeratu goitibehitz ilunagoak nabigazio-barra ilunarekin edo estilo pertsonalizatuarekin bat etortzeko .dropdown-menu-dark
lehendik dagoen batean gehituz .dropdown-menu
. Ez da aldaketarik behar goitibeherako elementuetan.
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton2" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown button
</button>
<ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="dropdownMenuButton2">
<li><a class="dropdown-item active" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</div>
Eta nabigazio-barra batean erabiltzeko:
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDarkDropdown" aria-controls="navbarNavDarkDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDarkDropdown">
<ul class="navbar-nav">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDarkDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</a>
<ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="navbarDarkDropdownMenuLink">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
Norabideak
RTL
Jarraibideak ispilu egiten dira Bootstrap RTL-n erabiltzean, hau .dropstart
da, eskuineko aldean agertuko da.
Jaitsiera
.dropup
Aktibatu 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-bs-toggle="dropdown" aria-expanded="false">
Dropup
</button>
<ul class="dropdown-menu">
<!-- Dropdown menu links -->
</ul>
</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-bs-toggle="dropdown" aria-expanded="false">
<span class="visually-hidden">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<!-- Dropdown menu links -->
</ul>
</div>
Drop-eskubidea
.dropend
Aktibatu elementuen eskuineko goitibeherako menuak elementu nagusiari gehituz .
<!-- Default dropend button -->
<div class="btn-group dropend">
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
Dropright
</button>
<ul class="dropdown-menu">
<!-- Dropdown menu links -->
</ul>
</div>
<!-- Split dropend button -->
<div class="btn-group dropend">
<button type="button" class="btn btn-secondary">
Split dropend
</button>
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
<span class="visually-hidden">Toggle Dropright</span>
</button>
<ul class="dropdown-menu">
<!-- Dropdown menu links -->
</ul>
</div>
Dropleft
.dropstart
Aktibatu elementuen ezkerreko goitibeherako menuak elementu nagusiari gehituz .
<!-- Default dropstart button -->
<div class="btn-group dropstart">
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
Dropstart
</button>
<ul class="dropdown-menu">
<!-- Dropdown menu links -->
</ul>
</div>
<!-- Split dropstart button -->
<div class="btn-group">
<div class="btn-group dropstart" role="group">
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
<span class="visually-hidden">Toggle Dropstart</span>
</button>
<ul class="dropdown-menu">
<!-- Dropdown menu links -->
</ul>
</div>
<button type="button" class="btn btn-secondary">
Split dropstart
</button>
</div>
Menuko elementuak
<a>
edo <button>
elementuak goitibeherako elementu gisa erabil ditzakezu .
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
<li><button class="dropdown-item" type="button">Action</button></li>
<li><button class="dropdown-item" type="button">Another action</button></li>
<li><button class="dropdown-item" type="button">Something else here</button></li>
</ul>
</div>
Goitibeherako elementu ez-interaktiboak ere sor ditzakezu .dropdown-item-text
. Anima zaitez gehiago estiloa CSS edo testu-utilitate pertsonalizatuekin.
<ul class="dropdown-menu">
<li><span class="dropdown-item-text">Dropdown item text</span></li>
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
Aktiboa
Gehitu .active
goitibeherako elementuei aktibo gisa estiloa jartzeko . Egoera aktiboa laguntza-teknologietara helarazteko, erabili aria-current
atributua — page
uneko orriaren balioa edo true
multzo bateko uneko elementua erabiliz.
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Regular link</a></li>
<li><a class="dropdown-item active" href="#" aria-current="true">Active link</a></li>
<li><a class="dropdown-item" href="#">Another link</a></li>
</ul>
Desgaituta
Gehitu .disabled
goitibeherako elementuei desgaitu gisa estiloa jartzeko .
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Regular link</a></li>
<li><a class="dropdown-item disabled">Disabled link</a></li>
<li><a class="dropdown-item" href="#">Another link</a></li>
</ul>
Menuen lerrokatzea
Lehenespenez, goitibeherako menu bat automatikoki kokatzen da % 100ean bere gurasoaren goiko eta ezkerreko aldean. Hau norabide- .drop*
klaseekin alda dezakezu, baina modifikatzaile-klase gehigarriekin ere kontrola ditzakezu.
Gehitu .dropdown-menu-end
a .dropdown-menu
eskuinera lerrokatu goitibeherako menua. Jarraibideak ispilu egiten dira Bootstrap RTL-n erabiltzean, hau .dropdown-menu-end
da, ezkerreko aldean agertuko da.
<div class="btn-group">
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
Right-aligned menu example
</button>
<ul class="dropdown-menu dropdown-menu-end">
<li><button class="dropdown-item" type="button">Action</button></li>
<li><button class="dropdown-item" type="button">Another action</button></li>
<li><button class="dropdown-item" type="button">Something else here</button></li>
</ul>
</div>
Lerrokadura erantzunkorra
Lerrokatze sentikorra erabili nahi baduzu, desgaitu kokapen dinamikoa data-bs-display="static"
atributua gehituz eta erabili aldakuntza klasikoak.
Goitibeherako menua eten puntuarekin edo handiagoarekin eskuinera lerrokatzeko , gehitu .dropdown-menu{-sm|-md|-lg|-xl|-xxl}-end
.
<div class="btn-group">
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
Left-aligned but right aligned when large screen
</button>
<ul class="dropdown-menu dropdown-menu-lg-end">
<li><button class="dropdown-item" type="button">Action</button></li>
<li><button class="dropdown-item" type="button">Another action</button></li>
<li><button class="dropdown-item" type="button">Something else here</button></li>
</ul>
</div>
Goitibeherako menua ezkerreko eten puntuarekin edo handiagoarekin lerrokatzeko , gehitu .dropdown-menu-end
eta .dropdown-menu{-sm|-md|-lg|-xl|-xxl}-start
.
<div class="btn-group">
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
Right-aligned but left aligned when large screen
</button>
<ul class="dropdown-menu dropdown-menu-end dropdown-menu-lg-start">
<li><button class="dropdown-item" type="button">Action</button></li>
<li><button class="dropdown-item" type="button">Another action</button></li>
<li><button class="dropdown-item" type="button">Something else here</button></li>
</ul>
</div>
Kontuan izan ez duzula data-bs-display="static"
atributurik gehitu behar goitibeherako botoietan nabigazio-barren, Popper ez baita erabiltzen nabigazio-barren.
Lerrokatzeko aukerak
Goian erakusten diren aukera gehienak hartuta, hona hemen goitibeherako lerrokatze-aukera ezberdinen sukaldeko harraska txikiaren demo bat leku bakarrean.
<div class="btn-group">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
</ul>
</div>
<div class="btn-group">
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
Right-aligned menu
</button>
<ul class="dropdown-menu dropdown-menu-end">
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
</ul>
</div>
<div class="btn-group">
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
Left-aligned, right-aligned lg
</button>
<ul class="dropdown-menu dropdown-menu-lg-end">
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
</ul>
</div>
<div class="btn-group">
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
Right-aligned, left-aligned lg
</button>
<ul class="dropdown-menu dropdown-menu-end dropdown-menu-lg-start">
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
</ul>
</div>
<div class="btn-group dropstart">
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
Dropstart
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
</ul>
</div>
<div class="btn-group dropend">
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
Dropend
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
</ul>
</div>
<div class="btn-group dropup">
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
Dropup
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
</ul>
</div>
Menuaren edukia
Goiburuak
Gehitu goiburu bat ekintzen atalak etiketatzeko edozein goitibeherako menutan.
<ul class="dropdown-menu">
<li><h6 class="dropdown-header">Dropdown header</h6></li>
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
</ul>
Banatzaileak
Bereizi erlazionatutako menuko elementuen taldeak banatzaile batekin.
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
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 marjinak edo betegarrizko utilitateak behar duzun espazio negatiboa emateko.
<div class="dropdown-menu">
<form class="px-4 py-3">
<div class="mb-3">
<label for="exampleDropdownFormEmail1" class="form-label">Email address</label>
<input type="email" class="form-control" id="exampleDropdownFormEmail1" placeholder="[email protected]">
</div>
<div class="mb-3">
<label for="exampleDropdownFormPassword1" class="form-label">Password</label>
<input type="password" class="form-control" id="exampleDropdownFormPassword1" placeholder="Password">
</div>
<div class="mb-3">
<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="mb-3">
<label for="exampleDropdownFormEmail2" class="form-label">Email address</label>
<input type="email" class="form-control" id="exampleDropdownFormEmail2" placeholder="[email protected]">
</div>
<div class="mb-3">
<label for="exampleDropdownFormPassword2" class="form-label">Password</label>
<input type="password" class="form-control" id="exampleDropdownFormPassword2" placeholder="Password">
</div>
<div class="mb-3">
<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>
Goitibeherako aukerak
Erabili data-bs-offset
edo data-bs-reference
goitibeherako kokapena aldatzeko.
<div class="d-flex">
<div class="dropdown me-1">
<button type="button" class="btn btn-secondary dropdown-toggle" id="dropdownMenuOffset" data-bs-toggle="dropdown" aria-expanded="false" data-bs-offset="10,20">
Offset
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuOffset">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</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-bs-toggle="dropdown" aria-expanded="false" data-bs-reference="parent">
<span class="visually-hidden">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuReference">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</div>
</div>
Automatikoki ixteko portaera
Lehenespenez, goitibeherako menua itxi egiten da goitibeherako menuaren barruan edo kanpoan klik egitean. autoClose
Goitibeherako portaera hori aldatzeko aukera erabil dezakezu .
<div class="btn-group">
<button class="btn btn-secondary dropdown-toggle" type="button" id="defaultDropdown" data-bs-toggle="dropdown" data-bs-auto-close="true" aria-expanded="false">
Default dropdown
</button>
<ul class="dropdown-menu" aria-labelledby="defaultDropdown">
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
</ul>
</div>
<div class="btn-group">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuClickableOutside" data-bs-toggle="dropdown" data-bs-auto-close="inside" aria-expanded="false">
Clickable outside
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuClickableOutside">
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
</ul>
</div>
<div class="btn-group">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuClickableInside" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
Clickable inside
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuClickableInside">
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
</ul>
</div>
<div class="btn-group">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuClickable" data-bs-toggle="dropdown" data-bs-auto-close="false" aria-expanded="false">
Manual close
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuClickable">
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
</ul>
</div>
Sass
Aldagaiak
Goitibeherako aldagaiak:
$dropdown-min-width: 10rem;
$dropdown-padding-x: 0;
$dropdown-padding-y: .5rem;
$dropdown-spacer: .125rem;
$dropdown-font-size: $font-size-base;
$dropdown-color: $body-color;
$dropdown-bg: $white;
$dropdown-border-color: rgba($black, .15);
$dropdown-border-radius: $border-radius;
$dropdown-border-width: $border-width;
$dropdown-inner-border-radius: subtract($dropdown-border-radius, $dropdown-border-width);
$dropdown-divider-bg: $dropdown-border-color;
$dropdown-divider-margin-y: $spacer * .5;
$dropdown-box-shadow: $box-shadow;
$dropdown-link-color: $gray-900;
$dropdown-link-hover-color: shade-color($dropdown-link-color, 10%);
$dropdown-link-hover-bg: $gray-200;
$dropdown-link-active-color: $component-active-color;
$dropdown-link-active-bg: $component-active-bg;
$dropdown-link-disabled-color: $gray-500;
$dropdown-item-padding-y: $spacer * .25;
$dropdown-item-padding-x: $spacer;
$dropdown-header-color: $gray-600;
$dropdown-header-padding: $dropdown-padding-y $dropdown-item-padding-x;
Goitibeherako iluneko aldagaiak :
$dropdown-dark-color: $gray-300;
$dropdown-dark-bg: $gray-800;
$dropdown-dark-border-color: $dropdown-border-color;
$dropdown-dark-divider-bg: $dropdown-divider-bg;
$dropdown-dark-box-shadow: null;
$dropdown-dark-link-color: $dropdown-dark-color;
$dropdown-dark-link-hover-color: $white;
$dropdown-dark-link-hover-bg: rgba($white, .15);
$dropdown-dark-link-active-color: $dropdown-link-active-color;
$dropdown-dark-link-active-bg: $dropdown-link-active-bg;
$dropdown-dark-link-disabled-color: $gray-500;
$dropdown-dark-header-color: $gray-500;
Goitibeherako interaktibitatea adierazten duten CSS-n oinarritutako kartsuetarako aldagaiak:
$caret-width: .3em;
$caret-vertical-align: $caret-width * .85;
$caret-spacing: $caret-width * .85;
Mixinak
Mixins CSS-n oinarritutako kartsak sortzeko erabiltzen dira eta scss/mixins/_caret.scss
.
@mixin caret-down {
border-top: $caret-width solid;
border-right: $caret-width solid transparent;
border-bottom: 0;
border-left: $caret-width solid transparent;
}
@mixin caret-up {
border-top: 0;
border-right: $caret-width solid transparent;
border-bottom: $caret-width solid;
border-left: $caret-width solid transparent;
}
@mixin caret-end {
border-top: $caret-width solid transparent;
border-right: 0;
border-bottom: $caret-width solid transparent;
border-left: $caret-width solid;
}
@mixin caret-start {
border-top: $caret-width solid transparent;
border-right: $caret-width solid;
border-bottom: $caret-width solid transparent;
}
@mixin caret($direction: down) {
@if $enable-caret {
&::after {
display: inline-block;
margin-left: $caret-spacing;
vertical-align: $caret-vertical-align;
content: "";
@if $direction == down {
@include caret-down();
} @else if $direction == up {
@include caret-up();
} @else if $direction == end {
@include caret-end();
}
}
@if $direction == start {
&::after {
display: none;
}
&::before {
display: inline-block;
margin-right: $caret-spacing;
vertical-align: $caret-vertical-align;
content: "";
@include caret-start();
}
}
&:empty::after {
margin-left: 0;
}
}
}
Erabilera
Datu-atributuen edo JavaScript-en bidez, goitibeherako pluginak ezkutuko edukia (menuak goitibeherako menuak) aldatzen du, .show
klasea gurasoan aldatuz .dropdown-menu
. Atributua aplikazio mailan goitibeherako menuak ixteko oinarritzen da , data-bs-toggle="dropdown"
beraz, beti erabiltzea komeni da.
mouseover
berehalako 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,
mouseover
kudeatzaile huts gehigarri hauek kentzen dira.
Datu-atributuen bidez
Gehitu data-bs-toggle="dropdown"
esteka edo botoi bati goitibeherako aukera aldatzeko.
<div class="dropdown">
<button id="dLabel" type="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown trigger
</button>
<ul class="dropdown-menu" aria-labelledby="dLabel">
...
</ul>
</div>
JavaScript bidez
Deitu goitibehetara JavaScript bidez:
var dropdownElementList = [].slice.call(document.querySelectorAll('.dropdown-toggle'))
var dropdownList = dropdownElementList.map(function (dropdownToggleEl) {
return new bootstrap.Dropdown(dropdownToggleEl)
})
data-bs-toggle="dropdown"
oraindik beharrezkoa
Goitibehera JavaScript bidez deitzen duzun edo datu-api-a erabiltzen duzun ala ez, data-bs-toggle="dropdown"
beti beharrezkoa da goitibeherako elementuaren abiarazlean egotea.
Aukerak
Aukerak datu-atributuen edo JavaScript bidez pasa daitezke. Datu-atributuetarako, erantsi aukera-izena data-bs-
, hemen bezala data-bs-offset=""
. Ziurtatu aukera-izena kamelCase-tik kebab-case-ra aldatzen duzula aukerak datu-atributuen bidez aukerak pasatzean. Adibidez, erabili beharrean data-bs-autoClose="false"
, erabili data-bs-auto-close="false"
.
Izena | Mota | Lehenetsia | Deskribapena |
---|---|---|---|
boundary |
katea | elementua | 'clippingParents' |
Goitibeherako menuaren gainezka-murriztapenaren muga (Popper-en preventOverflow modifikatzaileari soilik aplikatzen zaio). Lehenespenez, 'clippingParents' HTMLElement erreferentzia bat da eta onartu dezake (JavaScript bidez soilik). Informazio gehiagorako, ikusi Popper-en detectOverflow docs . |
reference |
katea | elementua | objektua | 'toggle' |
Goitibeherako menuko erreferentzia-elementua. 'toggle' , 'parent' , HTMLElement erreferentzia edo objektu baten balioak onartzen ditu getBoundingClientRect . Informazio gehiago lortzeko, ikusi Popperren konstruktorearen dokumentuak eta elementu birtualen dokumentuak . |
display |
katea | 'dynamic' |
Berez, Popper erabiltzen dugu kokapen dinamikorako. Desgaitu hau erabiliz static . |
offset |
array | katea | funtzioa | [0, 2] |
Goitibeherako desplazamendua bere xedearekiko. Datu-atributuetan kate bat pasa dezakezu komaz bereizitako balioekin: Desplazamendua zehazteko funtzio bat erabiltzen denean, lehen argumentu gisa popper-aren kokapena, erreferentzia eta popper zuzenak dituen objektu batekin deitzen da. DOM nodo abiarazteko elementua bigarren argumentu gisa pasatzen da. Funtzioak bi zenbaki dituen array bat itzuli behar du: . Informazio gehiago lortzeko, ikusi Popper-en offset docs . |
autoClose |
boolearra | katea | true |
Konfiguratu goitibeherako itxiera automatikoko portaera:
|
popperConfig |
nulua | objektua | funtzioa | null |
Bootstrap-en Popper konfigurazio lehenetsia aldatzeko, ikusi Popper-en konfigurazioa . Popper konfigurazioa sortzeko funtzio bat erabiltzen denean, Bootstrap-en Popper konfigurazio lehenetsia duen objektu batekin deitzen da. Lehenetsia zure konfigurazioarekin erabiltzen eta batzen laguntzen dizu. Funtzioak konfigurazio-objektu bat itzuli behar du Popperrentzat. |
Funtzioa erabilizpopperConfig
var dropdown = new bootstrap.Dropdown(element, {
popperConfig: function (defaultBsPopperConfig) {
// var newPopperConfig = {...}
// use defaultBsPopperConfig if needed...
// return newPopperConfig
}
})
Metodoak
Metodoa | Deskribapena |
---|---|
toggle |
Nabigazio-barra edo fitxen nabigazio baten goitibeherako menua aldatzen du. |
show |
Nabigazio-barra edo fitxen nabigazio baten goitibeherako menua erakusten du. |
hide |
Nabigazio-barra edo fitxen nabigazio baten goitibeherako menua ezkutatzen du. |
update |
Elementu baten goitibeherako posizioa eguneratzen du. |
dispose |
Elementu baten goitibeherako zerrenda suntsitzen du. (DOM elementuan gordetako datuak kentzen ditu) |
getInstance |
DOM elementu bati lotutako goitibeherako instantzia lortzeko aukera ematen duen metodo estatikoa, honela erabil dezakezu:bootstrap.Dropdown.getInstance(element) |
getOrCreateInstance |
Metodo estatikoa DOM elementu bati lotutako goitibeherako instantzia bat itzultzen duena edo berri bat sortzen duena, hasieratu ez bazen. Honela erabil dezakezu:bootstrap.Dropdown.getOrCreateInstance(element) |
Gertaerak
Goitibeherako gertaera guztiak txandakatzeko elementuan abiarazten dira eta gero burbuila egiten dira. Beraz, gertaeren entzuleak ere gehi ditzakezu .dropdown-menu
' ren elementu nagusian. hide.bs.dropdown
eta hidden.bs.dropdown
gertaerek klik-gertaeraren Gertaera Objektu bat daukan clickEvent
propietate bat dute (jatorrizko Gertaera mota denean bakarrik ).click
Metodoa | Deskribapena |
---|---|
show.bs.dropdown |
Berehala pizten da show instance metodoa deitzen denean. |
shown.bs.dropdown |
Erabiltzaileak goitibehitza ikusgai jarri duenean eta CSS trantsizioak amaitu direnean abiarazi da. |
hide.bs.dropdown |
Ezkutatzeko instantzia metodoa deitzen denean berehala piztuko da. |
hidden.bs.dropdown |
Goitibehitza erabiltzaileari ezkutatzen amaitzean eta CSS trantsizioak amaitu direnean piztu da. |
var myDropdown = document.getElementById('myDropdown')
myDropdown.addEventListener('show.bs.dropdown', function () {
// do something...
})