Nneɛma a wɔde gu fam
Toggle contextual overlays ma ɛkyerɛ links a wɔahyehyɛ ne nea ɛkeka ho denam Bootstrap dropdown plugin no so.
Nsɛm a Wɔaka abom
Dropdowns yɛ toggleable, nsɛm a ɛfa ho a wɔde kata so a wɔde kyerɛ link ahorow a wɔahyehyɛ ne nea ɛkeka ho. Wɔde Bootstrap dropdown JavaScript plugin a ɛka ho no ayɛ nkitahodi. Wɔnam klik so na ɛsakra wɔn, na ɛnyɛ sɛ wɔde wɔn ho to so; eyi yɛ gyinaesi a wɔahyɛ da ayɛ wɔ nhyehyɛe ho .
Wɔasi dropdowns wɔ nhomakorabea a ɛto so abiɛsa, Popper , a ɛma gyinabea a ɛyɛ nnam ne viewport detection. Hwɛ sɛ wode popper.min.js bɛka ho ansa na Bootstrap JavaScript no aba anaa fa bootstrap.bundle.min.js
/ bootstrap.bundle.js
a Popper wom di dwuma. Popper nnyɛ mfa nsi dropdowns wɔ navbars ɛwom sɛ sɛnea dynamic positioning nhia.
Nneɛma a wotumi nya
WAI ARIA gyinapɛn no kyerɛkyerɛ widget ankasa mu role="menu"
, nanso eyi yɛ pɔtee ma application-te sɛ menus a ɛkanyan nneyɛe anaa dwumadi ahorow. ARIA menu ahorow no betumi akura menu nneɛma, checkbox menu nneɛma, radio bɔtn menu nneɛma, radio bɔtn akuw, ne menu nketewa nkutoo.
Nanso, wɔayɛ Bootstrap dropdowns no sɛnea ɛbɛyɛ a ɛbɛyɛ nea ɛfa biribiara ho na ɛyɛ adwuma wɔ tebea horow ne agyiraehyɛde nhyehyɛe ahorow mu. Sɛ nhwɛso no, wobetumi ayɛ dropdowns a ɛwɔ inputs foforo ne form controls, te sɛ search fields anaa login forms. Esiane eyi nti, Bootstrap nhwɛ kwan (anaasɛ ɛde bɛka ho ankasa) role
ne aria-
su ahorow a ɛho hia ma nokware ARIA menu ahorow no mu biara. Ɛsɛ sɛ akyerɛwfo ankasa de saa su ahorow a ɛyɛ pɔtee kɛse yi ka ho.
Nanso, Bootstrap de mmoa a wɔasisi mu ka ho ma keyboard menu nkitahodi dodow no ara a ɛyɛ gyinapɛn, te sɛ tumi a wode bɛfa nneɛma ankorankoro .dropdown-item
mu denam cursor safoa no so na wode safoa no ato menu no mu ESC.
Nhwɛso ahorow
Fa dropdown no toggle (wo button anaa link) ne dropdown menu no kyekyere .dropdown
, anaa element foforo a ɛpae mu ka position: relative;
. Wobetumi akanyan dropdowns afi <a>
anaa <button>
elements mu ma ɛne w’ahiade ahorow a ebetumi aba no ahyia yiye. Nhwɛsoɔ a wɔakyerɛ wɔ ha no de semantic <ul>
elements di dwuma wɔ baabi a ɛfata, nanso wɔboa custom markup.
Bɔton biako pɛ
.btn
Wobetumi adan single biara ayɛ no dropdown toggle a markup nsakrae ahorow bi wom. Sɛnea wubetumi de wɔn ayɛ adwuma ne <button>
elements abien no mu biara ni:
<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>
Na ɛne <a>
element ahorow:
<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>
Ɔfã a eye sen biara ne sɛ wubetumi ayɛ eyi ne button variant biara, nso:
<!-- 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>
Split button no mu
Saa ara nso na yɛ split button dropdowns a ɛkame ayɛ sɛ markup koro no ara sɛ button dropdowns biako, nanso fa ka ho .dropdown-toggle-split
ma kwan a ɛfata twa dropdown caret no ho hyia.
Yɛde saa adesua foforo yi di dwuma de tew horizontal padding
a ɛwɔ caret no afã abien no nyinaa so 25% na yɛayi nea margin-left
wɔde aka ho ama daa button dropdowns no. Saa nsakrae afoforo no ma caret no kɔ mfinimfini wɔ split button no mu na ɛma hit area a ne kɛse fata kɛse wɔ button titiriw no nkyɛn.
<!-- 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>
Sizing a wɔde yɛ nneɛma
Button dropdowns ne buttons a ne kɛse nyinaa yɛ adwuma, a default ne split dropdown buttons ka ho.
<!-- 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>
Esum mu nsɛm a ɛtɔ gu fam
Paw kɔ dropdowns a ɛyɛ sum mu ma ɛne navbar a ɛyɛ sum anaa custom style hyia denam nea wode bɛka ho .dropdown-menu-dark
wɔ nea ɛwɔ hɔ dedaw .dropdown-menu
no so. Ɛho nhia sɛ wɔyɛ nsakrae biara wɔ nneɛma a ɛwɔ ase hɔ no mu.
<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>
Na sɛ wode bedi dwuma wɔ navbar mu a:
<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>
Akwankyerɛ ahorow
RTL
Akwankyerɛ no yɛ ahwehwɛ bere a wode Bootstrap redi dwuma wɔ RTL mu no, ɛkyerɛ .dropstart
sɛ ɛbɛda adi wɔ nifa so.
Dropup a ɛwɔ hɔ
Trigger dropdown menus a ɛwɔ element ahorow no atifi denam .dropup
awofo element no a wode bɛka ho no so.
<!-- 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>
Dropright a ɛwɔ hɔ
Trigger dropdown menus wɔ elements no nifa so denam .dropend
awofo element no a wode bɛka ho no so.
<!-- 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>
Nsu a ɛtɔ gu fam
Trigger dropdown menus wɔ elements no benkum so denam .dropstart
awofo element no a wode bɛka ho no so.
<!-- 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>
Menu mu nneɛma
Wubetumi de <a>
anaa <button>
elements adi dwuma sɛ nneɛma a ɛwɔ ase.
<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>
Wubetumi nso de .dropdown-item-text
. Fa ahofadi de CSS anaa nsɛm a wɔde di dwuma a wɔahyɛ da ayɛ no kyerɛw kɔ akyiri.
<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>
Asɔ
Fa ka .active
nneɛma a ɛwɔ dropdown no ho na fa style no sɛ active . Sɛ wopɛ sɛ wode tebea a ɛyɛ adwuma no kɔ mfiridwuma a ɛboa mu a, fa aria-current
su no di dwuma — fa bo a page
ɛsom ma krataafa a ɛwɔ hɔ mprempren no di dwuma, anaasɛ true
ade a ɛwɔ hɔ mprempren wɔ nhyehyɛe bi mu.
<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>
Dɛmdie
Fa ka .disabled
nneɛma a ɛwɔ dropdown no mu ho na fa style no sɛ disabled .
<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>
Menu a wɔde hyɛ mu
Sɛnea wɔahyɛ no, wɔde menu a ɛba fam no si hɔ ankasa 100% fi soro ne ne wofo no benkum so. Wubetumi de akwankyerɛ .drop*
adesua ahorow no asesa eyi, nanso wubetumi nso de modifier adesua ahorow foforo adi so.
Fa ka .dropdown-menu-end
a ho .dropdown-menu
kɔ nifa so hyɛ dropdown menu no mu. Akwankyerɛ no yɛ ahwehwɛ bere a wode Bootstrap redi dwuma wɔ RTL mu no, ɛkyerɛ .dropdown-menu-end
sɛ ɛbɛda adi wɔ benkum so.
<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>
Mmuae a wɔde hyɛ mu
Sɛ wopɛ sɛ wode responsive alignment di dwuma a, ma dynamic positioning no nyɛ adwuma denam data-bs-display="static"
attribute no a wode bɛka ho no so na fa responsive variation classes no di dwuma.
Sɛ wopɛ sɛ wode dropdown menu no ne breakpoint a wɔde ama no hyia anaa nea ɛsõ sen saa a, fa ka ho .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>
Sɛ wopɛ sɛ wode benkum so menu a ɛwɔ ase no ne breakpoint a wɔde ama no anaa nea ɛsõ sen saa no hyia a, fa ka ho .dropdown-menu-end
ne .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>
Hyɛ no nsow sɛ enhia sɛ wode data-bs-display="static"
attribute bi bɛka dropdown buttons ho wɔ navbars mu, efisɛ wɔmfa Popper nni dwuma wɔ navbars mu.
Alignment a wobetumi apaw
Fa dodow no ara a wɔakyerɛ wɔ atifi hɔ no, ɛha na ɛyɛ ketewaa bi adididan mu sink demo a ɛsono dropdown alignment options wɔ beae biako.
<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>
Menu mu nsɛm
Nsɛmti a wɔde kyerɛw nsɛm
Fa asɛmti bi ka ho na fa nkyerɛwde afã horow a ɛfa nneyɛe ho wɔ dropdown menu biara mu.
<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>
Nneɛma a wɔkyekyɛ mu
Fa divider yiyi nneɛma a ɛfa ho a ɛwɔ menu mu no mu akuw mu.
<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>
Atwerɛ
Fa freeform text biara gu dropdown menu a nsɛm wom mu na fa spacing utilities di dwuma . Hyɛ no nsow sɛ ɛda adi sɛ wubehia sizing styles foforo de asiw menu no trɛw ano.
<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>
Nkyerɛwee ahorow
Fa kratasin bi hyɛ dropdown menu mu, anaa yɛ no dropdown menu, na fa margin anaa padding utilities di dwuma ma no negative space a wopɛ.
<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>
Nneɛma a wobetumi apaw wɔ dropdown so
Fa data-bs-offset
anaa data-bs-reference
sesa beae a ɛwɔ dropdown no.
<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>
Auto close suban
Sɛnea wɔahyɛ no, wɔbɛto dropdown menu no mu bere a woabɔ dropdown menu no mu anaa akyi no. Wubetumi de ɔkwan a autoClose
wobɛpaw no asesa saa suban yi a ɛwɔ dropdown no mu.
<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
Nneɛma a Ɛsakra
Nsakraeɛ a ɛwɔ dropdowns nyinaa mu:
$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;
Variables ma esum dropdown no : .
$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;
Nsakraeɛ ma CSS-gyina carets a ɛkyerɛ dropdown no nkitahodiɛ:
$caret-width: .3em;
$caret-vertical-align: $caret-width * .85;
$caret-spacing: $caret-width * .85;
Nneɛma a wɔde frafra
Wɔde mixins di dwuma de yɛ carets a egyina CSS so no na wobetumi ahu wɔ 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;
}
}
}
Sɛnea wɔde di dwuma
Ɛnam data attributes anaa JavaScript so no, dropdown plugin no dannan nneɛma a ahintaw (dropdown menus) denam .show
adesuakuw no a ɛdannan wɔ ɔwofo no .dropdown-menu
so . Wɔde data-bs-toggle="dropdown"
wɔn ho to su no so de to dropdown menus mu wɔ application level bi so, enti ɛyɛ adwene pa sɛ wode bedi dwuma bere nyinaa.
mouseover
no mma a wɔbɛn wɔn pɛɛ no
ho. <body>
This admittedly ugly hack is necessary to work around a
quirk in iOS’ event delegation , a anka ɛbɛma tap biara a ɛwɔ dropdown no akyi a ɛbɛkanyan code a ɛto dropdown no. Sɛ wɔto dropdown no mu wie a, woyi saa
mouseover
handlers foforo a hwee nni mu yi fi hɔ.
Via data su ahorow so
Fa ka data-bs-toggle="dropdown"
link anaa button bi ho na dannan dropdown bi.
<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>
Ɛdenam JavaScript so
Frɛ nsɛm a ɛwɔ ase hɔ no denam JavaScript so:
var dropdownElementList = [].slice.call(document.querySelectorAll('.dropdown-toggle'))
var dropdownList = dropdownElementList.map(function (dropdownToggleEl) {
return new bootstrap.Dropdown(dropdownToggleEl)
})
data-bs-toggle="dropdown"
wɔda so ara hwehwɛ
Ɛmfa ho sɛ ebia wobɛfrɛ wo dropdown no denam JavaScript so anaasɛ wode data-api no bedi dwuma mmom no, data-bs-toggle="dropdown"
ɛhwehwɛ sɛ ɛwɔ hɔ bere nyinaa wɔ dropdown no trigger element no so.
Nneɛma a wubetumi apaw
Wobetumi afa data attributes anaa JavaScript so de nneɛma a wobɛpaw no akɔ. Sɛ wopɛ data su ahorow a, fa option din no ka ho data-bs-
, sɛnea ɛwɔ data-bs-offset=""
. Hwɛ sɛ wobɛsesa case type a ɛwɔ option din no mu afi camelCase akɔ kebab-case bere a wode options no nam data attributes so retwam no. Sɛ nhwɛso no, sɛ́ anka wode bedi dwuma data-bs-autoClose="false"
no, fa data-bs-auto-close="false"
.
Din | Korɔ | Mfiaseɛ | Nkyerɛmu |
---|---|---|---|
boundary |
ahama | adeɛ | 'clippingParents' |
Overflow anohyeto hye a ɛwɔ dropdown menu no mu (ɛfa Popper preventOverflow modifier no nkutoo ho). Sɛnea wɔahyɛ no ɛyɛ 'clippingParents' na ebetumi agye HTMLElement nkyerɛkyerɛmu (ɛnam JavaScript nkutoo so). Sɛ wopɛ nsɛm pii a hwɛ Popper detectOverflow docs . |
reference |
ahama | element | adeɛ | 'toggle' |
Nkyerɛkyerɛmu element a ɛwɔ dropdown menu no mu. Gye 'toggle' , 'parent' , HTMLElement nkyerɛkyerɛmu anaa ade a ɛde ma no botae ahorow tom getBoundingClientRect . Sɛ wopɛ nsɛm pii a hwɛ Popper's constructor docs ne virtual element docs . |
display |
ahoma | 'dynamic' |
Sɛnea wɔahyɛ no, yɛde Popper di dwuma ma gyinabea a ɛyɛ nnam. Ma eyi nyɛ adwuma wɔ static . |
offset |
nhyehyeɛ | ahama | dwumadie | [0, 2] |
Offset a ɛfa dropdown no ho a ɛfa ne botae ho. Wubetumi de ahama bi akɔ data su ahorow mu a ɛwɔ botae ahorow a wɔatew mu wɔ koma mu te sɛ: Sɛ wɔde dwumadie bi di dwuma de kyerɛ offset no a, wɔde adeɛ bi a ɛwɔ popper placement, reference, ne popper rects sɛ ne argument a ɛdi kan no frɛ no. Wɔde triggering element DOM node no twam sɛ akyinnyegye a ɛto so abien. Ɛsɛ sɛ dwumadie no san de array a ɛwɔ nɔma mmienu ba: . Sɛ wopɛ nsɛm pii a hwɛ Popper's offset docs . |
autoClose |
boolean a ɛwɔ hɔ | ahoma | true |
Hyehyɛ auto close suban a ɛwɔ dropdown no mu:
|
popperConfig |
null | ade | dwumadie | null |
Sɛ wopɛ sɛ wosakra Bootstrap no Popper nhyehyɛe a ɛwɔ hɔ dedaw no a, hwɛ Popper nhyehyɛe . Sɛ wɔde dwumadie bi di dwuma de yɛ Popper nhyehyeɛ no a, wɔde adeɛ bi a ɛwɔ Bootstrap no Popper nhyehyeɛ a ɛwɔ hɔ dedaw no frɛ no. Ɛboa wo ma wode default no di dwuma na wode bom ne w’ankasa nhyehyɛe. Ɛsɛ sɛ dwumadie no san de nhyehyɛɛ adeɛ bi ba ma Popper. |
Dwumadi a wɔde di dwuma nepopperConfig
var dropdown = new bootstrap.Dropdown(element, {
popperConfig: function (defaultBsPopperConfig) {
// var newPopperConfig = {...}
// use defaultBsPopperConfig if needed...
// return newPopperConfig
}
})
Akwan a wɔfa so yɛ
Ɔkwan | Nkyerɛmu |
---|---|
toggle |
Toggles dropdown menu a ɛwɔ navbar anaa tabbed navigation a wɔde ama no mu. |
show |
Kyerɛ dropdown menu a ɛwɔ navbar anaa tabbed navigation a wɔde ama no mu. |
hide |
Hide dropdown menu a ɛwɔ navbar anaa tabbed navigation a wɔde ama no mu. |
update |
Ɔyɛ element bi a ɛwɔ dropdown no gyinabea foforo. |
dispose |
Ɔsɛe element bi a ɛwɔ dropdown no. (Eyi data a wɔde asie wɔ DOM element no so) |
getInstance |
Static kwan a ɛma wo kwan ma wonya dropdown instance a ɛbata DOM element bi ho no, wubetumi de adi dwuma sɛnea eyi te:bootstrap.Dropdown.getInstance(element) |
getOrCreateInstance |
Static kwan a ɛsan de dropdown instance a ɛbata DOM element bi ho anaasɛ ɛbɔ foforo sɛ ɛba sɛ wɔanhyɛ aseɛ a. Wubetumi de adi dwuma sɛnea ɛte yi:bootstrap.Dropdown.getOrCreateInstance(element) |
Nsɛm a esisi
Wɔde dropdown nsɛm a esisi nyinaa tow toggling element no so na afei wɔde bubbled up. Enti wubetumi nso de event listeners aka ho wɔ .dropdown-menu
's parent element no so. hide.bs.dropdown
na hidden.bs.dropdown
nsɛm a esisi no wɔ clickEvent
agyapade (bere a Event type a edi kan no yɛ click
) a ɛwɔ Event Object ma click event no nkutoo.
Ɔkwan | Nkyerɛmu |
---|---|
show.bs.dropdown |
Ogya ntɛm ara bere a wɔafrɛ show instance kwan no. |
shown.bs.dropdown |
Wɔtow no bere a wɔayɛ dropdown no ahu nea ɔde di dwuma no na CSS nsakrae ahorow no awie. |
hide.bs.dropdown |
Ogya ntɛm ara bere a wɔafrɛ hide instance kwan no. |
hidden.bs.dropdown |
Fired bere a dropdown no awie sɛ wɔde asie afiri ɔdefoɔ no na CSS nsakraeɛ no awie. |
var myDropdown = document.getElementById('myDropdown')
myDropdown.addEventListener('show.bs.dropdown', function () {
// do something...
})