Բացվող պատուհաններ
Փոխարկեք համատեքստային ծածկույթները՝ հղումների ցուցակները և ավելին ցուցադրելու համար Bootstrap բացվող հավելվածի միջոցով:
Ընդհանուր ակնարկ
Բացվող պատուհանները փոխարկվող, համատեքստային ծածկույթներ են՝ հղումների ցուցակները և ավելին ցուցադրելու համար: Դրանք ինտերակտիվ են ընդգրկված Bootstrap բացվող JavaScript հավելվածի հետ: Դրանք փոխվում են սեղմելով, ոչ թե սավառնելով. սա միտումնավոր նախագծային որոշում է :
Բացվող պատուհանները կառուցված են երրորդ կողմի գրադարանի՝ Popper- ի վրա, որն ապահովում է դինամիկ դիրքավորում և տեսադաշտի հայտնաբերում: Համոզվեք, որ ներառեք popper.min.js-ը Bootstrap-ի JavaScript-ից առաջ կամ օգտագործեք bootstrap.bundle.min.js
/ bootstrap.bundle.js
որը պարունակում է Popper: Popper-ը չի օգտագործվում navbars-ում բացվող ցանկերը տեղադրելու համար, թեև դինամիկ դիրքավորումը չի պահանջվում:
Մատչելիություն
WAI ARIA ստանդարտը սահմանում է իրական վիջեթ role="menu"
, բայց սա հատուկ է հավելվածի նման մենյուներին, որոնք գործարկում են գործողություններ կամ գործառույթներ: ARIA ընտրացանկերը կարող են պարունակել միայն ընտրացանկի տարրեր, վանդակի ընտրացանկի տարրեր, ռադիոկոճակի ընտրացանկի տարրեր, ռադիոկոճակների խմբեր և ենթամենյուներ:
Մյուս կողմից, Bootstrap-ի բացվող ցանկերը նախատեսված են որպես ընդհանուր և կիրառելի տարբեր իրավիճակների և նշագրման կառուցվածքների համար: Օրինակ, հնարավոր է ստեղծել բացվող պատուհաններ, որոնք պարունակում են լրացուցիչ մուտքեր և ձևերի վերահսկում, ինչպիսիք են որոնման դաշտերը կամ մուտքի ձևերը: Այս պատճառով, Bootstrap-ը չի ակնկալում (ոչ ինքնաբերաբար ավելացնում) ARIA մենյուների համար պահանջվող որևէ ատրիբուտ role
և ատրիբուտ: Հեղինակներն իրենք պետք է ներառեն այս ավելի կոնկրետ հատկանիշները:aria-
Այնուամենայնիվ, Bootstrap-ը ներկառուցված աջակցություն է ավելացնում ստեղնաշարի մենյուի ստանդարտ փոխազդեցությունների մեծ մասի համար, ինչպես օրինակ .dropdown-item
՝ կուրսորային ստեղների միջոցով առանձին տարրերով շարժվելու և մենյուը ESCստեղնով փակելու հնարավորությունը:
Օրինակներ
Փաթեթավորեք բացվող ընտրացանկը (ձեր կոճակը կամ հղումը) և բացվող ընտրացանկը .dropdown
կամ մեկ այլ տարր, որը հայտարարում է position: relative;
: Բացվող ցանկերը կարող են գործարկվել <a>
կամ <button>
տարրերից, որոնք ավելի լավ են համապատասխանում ձեր հնարավոր կարիքներին: Այստեղ ցուցադրված օրինակներն օգտագործում են իմաստային <ul>
տարրեր, որտեղ հարմար է, բայց մաքսային նշումը աջակցվում է:
Մեկ կոճակ
Ցանկացած սինգլ .btn
կարող է վերածվել բացվող անջատիչի՝ որոշ նշագծման փոփոխություններով: Ահա, թե ինչպես կարող եք դրանք աշխատել երկու <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>
Եվ <a>
տարրերով.
<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>
Լավագույնն այն է, որ դուք կարող եք դա անել ցանկացած կոճակի տարբերակով, ինչպես նաև.
<!-- 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>
Պառակտման կոճակ
Նմանապես, ստեղծեք պառակտված կոճակների բացվող պատուհաններ գրեթե նույն նշագծումով, ինչ մեկ կոճակի բացվող պատուհանները, բայց .dropdown-toggle-split
բացվող տուփի շուրջ պատշաճ տարածության համար ավելացնելով:
Մենք օգտագործում ենք այս հավելյալ դասը՝ 25%-ով կրճատելու padding
երեսպատման երկու կողմերում գտնվող հորիզոնականը և հեռացնելու այն margin-left
, որն ավելացվել է կոճակների սովորական բացման համար: Այդ հավելյալ փոփոխությունները պահում են խցիկը կենտրոնացած պառակտման կոճակի վրա և ապահովում են ավելի համապատասխան չափի հարվածային տարածք հիմնական կոճակի կողքին:
<!-- 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>
Չափսերը
Կոճակների բացվող կոճակները աշխատում են բոլոր չափերի կոճակների հետ, ներառյալ լռելյայն և բաժանված բացվող կոճակները:
<!-- 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>
Մութ անկումներ
Ընտրեք ավելի մուգ բացվող պատուհանները՝ մուգ նավագոտու կամ հատուկ ոճին համապատասխանելու համար՝ ավելացնելով .dropdown-menu-dark
գոյություն ունեցողի վրա .dropdown-menu
: Բացվող տարրերում փոփոխություններ չեն պահանջվում:
<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>
Եվ այն օգտագործելու համար navbar-ում.
<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>
Ուղղություններ
RTL
RTL-ում Bootstrap-ն օգտագործելիս ուղղությունները արտացոլվում են, ինչը նշանակում է, .dropstart
որ կհայտնվի աջ կողմում:
Բացվող
Գործարկեք բացվող ընտրացանկերը տարրերի վերևում՝ ավելացնելով .dropup
մայր տարրին:
<!-- 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>
Կաթիլային իրավունք
Գործարկեք բացվող ընտրացանկերը տարրերի աջ կողմում՝ ավելացնելով .dropend
մայր տարրին:
<!-- 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
մայր տարրին:
<!-- 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>
Ցանկի տարրեր
Դուք կարող եք օգտագործել <a>
կամ <button>
տարրերը որպես բացվող տարրեր:
<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>
Դուք կարող եք նաև ստեղծել ոչ ինտերակտիվ բացվող տարրեր .dropdown-item-text
. Ազատ զգալ ոճավորել հատուկ CSS կամ տեքստային կոմունալ ծառայություններ:
<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>
Ակտիվ
Ավելացրե՛ք .active
տարրերին իջնող ցանկում՝ դրանք որպես ակտիվ ոճավորելու համար : Ակտիվ վիճակը օժանդակ տեխնոլոգիաներին փոխանցելու համար օգտագործեք aria-current
հատկանիշը — օգտագործելով page
արժեքը ընթացիկ էջի կամ true
ընթացիկ տարրի համար մի շարքում:
<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>
Անաշխատունակ
Ավելացրե՛ք .disabled
տարրերին բացվող ցանկում՝ դրանք որպես անջատված ոճավորելու համար :
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Regular link</a></li>
<li><a class="dropdown-item disabled" href="#" tabindex="-1" aria-disabled="true">Disabled link</a></li>
<li><a class="dropdown-item" href="#">Another link</a></li>
</ul>
Մենյուի հավասարեցում
Լռելյայնորեն, բացվող ընտրացանկը ավտոմատ կերպով տեղադրվում է 100% վերևից և իր ծնողի ձախ կողմում: Դուք կարող եք դա փոխել ուղղորդված .drop*
դասերի միջոցով, բայց կարող եք նաև կառավարել դրանք լրացուցիչ փոփոխիչների դասերի միջոցով:
Ավելացնել .dropdown-menu-end
a-ին .dropdown-menu
դեպի աջ հարթեցնել բացվող ընտրացանկը: RTL-ում Bootstrap-ն օգտագործելիս ուղղությունները արտացոլվում են, ինչը նշանակում է, .dropdown-menu-end
որ կհայտնվի ձախ կողմում:
<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>
Պատասխանատու հավասարեցում
Եթե ցանկանում եք օգտագործել արձագանքող հավասարեցում, անջատեք դինամիկ դիրքավորումը՝ ավելացնելով data-bs-display="static"
հատկանիշը և օգտագործեք արձագանքող տատանումների դասերը:
Բացվող ընտրացանկը տրված կամ ավելի մեծ կետի հետ հավասարեցնելու համար.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>
Ձախ բացվող ընտրացանկը տվյալ բեկման կետի կամ ավելի մեծ կետի հետ հավասարեցնելու համար ավելացրեք .dropdown-menu-end
և .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>
Նկատի ունեցեք, որ ձեզ հարկավոր չէ data-bs-display="static"
ատրիբուտ ավելացնել նավագոտի բացվող կոճակներին, քանի որ Popper-ը չի օգտագործվում navbars-ում:
Հարթեցման ընտրանքներ
Հաշվի առնելով վերևում ներկայացված տարբերակների մեծ մասը, ահա փոքրիկ խոհանոցի լվացարանի ցուցադրությունը՝ տարբեր բացվող դասավորության տարբերակների մեկ տեղում:
<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>
Ցանկի բովանդակությունը
Վերնագրեր
Ցանկացած բացվող ընտրացանկում գործողությունների բաժինները պիտակավորելու համար ավելացրեք վերնագիր:
<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>
Բաժանարարներ
Առանձնացրեք ընտրացանկի հարակից տարրերի խմբերը բաժանարարով:
<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 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>
Ձևաթղթեր
Ձևը դրեք բացվող մենյուի մեջ կամ դարձրեք այն բացվող ընտրացանկի մեջ և օգտագործեք լուսանցքի կամ լիցքավորման կոմունալ ծառայություններ ՝ ձեզ անհրաժեշտ բացասական տարածք տրամադրելու համար:
<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>
Բացվող ընտրանքներ
Օգտագործեք data-bs-offset
կամ data-bs-reference
փոխեք բացվող ցանկի գտնվելու վայրը:
<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>
Ավտոմատ փակման պահվածք
Լռելյայնորեն, բացվող ընտրացանկը փակ է, երբ սեղմում եք բացվող ցանկի ներսում կամ դրսում: Դուք կարող եք օգտագործել autoClose
բացվող ցանկի այս վարքագիծը փոխելու տարբերակը:
<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>
Սաս
Փոփոխականներ
Փոփոխականներ բոլոր բացվող ցանկերի համար.
$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($gray-900, 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;
Փոփոխականներ մութ բացվող ցանկի համար .
$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;
Փոփոխականներ CSS-ի վրա հիմնված կարետների համար, որոնք ցույց են տալիս բացվող ցանկի ինտերակտիվությունը.
$caret-width: .3em;
$caret-vertical-align: $caret-width * .85;
$caret-spacing: $caret-width * .85;
Միքսիններ
Միքսիններն օգտագործվում են CSS-ի վրա հիմնված կարեթներ ստեղծելու համար և կարելի է գտնել 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;
}
}
}
Օգտագործումը
Տվյալների ատրիբուտների կամ JavaScript-ի միջոցով բացվող հավելվածը փոխում է թաքնված բովանդակությունը (բացվող ընտրացանկերը)՝ փոխարկելով .show
դասը ծնողի վրա .dropdown-menu
: Հատկանիշը data-bs-toggle="dropdown"
հիմնվում է հավելվածի մակարդակով բացվող ընտրացանկերը փակելու համար, ուստի լավ գաղափար է միշտ օգտագործել այն:
mouseover
անմիջական երեխաներին
: <body>
Այս, անկասկած, տգեղ հաքերն անհրաժեշտ է
iOS-ի իրադարձությունների պատվիրակության տարօրինակությունը լուծելու համար , որը հակառակ դեպքում կկանխի բացվող ցանկից դուրս ցանկացած վայրում հպումը գործարկելու այն կոդը, որը փակում է բացվող ցանկը: Երբ բացվող ցանկը փակվի, այս լրացուցիչ դատարկ
mouseover
մշակիչները հեռացվում են:
Տվյալների ատրիբուտների միջոցով
Ավելացրեք data-bs-toggle="dropdown"
հղմանը կամ կոճակին՝ բացվող ցանկը փոխարկելու համար:
<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-ի միջոցով
Զանգահարեք բացվող ցանկերը JavaScript-ի միջոցով.
var dropdownElementList = [].slice.call(document.querySelectorAll('.dropdown-toggle'))
var dropdownList = dropdownElementList.map(function (dropdownToggleEl) {
return new bootstrap.Dropdown(dropdownToggleEl)
})
data-bs-toggle="dropdown"
դեռ պահանջվում է
Անկախ նրանից՝ դուք կանչում եք ձեր բացվող ցանկը JavaScript-ի միջոցով, թե փոխարենը օգտագործում եք տվյալների api-ն, data-bs-toggle="dropdown"
միշտ պահանջվում է ներկա լինել բացվող ցանկի գործարկման տարրում:
Ընտրանքներ
Ընտրանքները կարող են փոխանցվել տվյալների ատրիբուտների կամ JavaScript-ի միջոցով: Տվյալների ատրիբուտների համար ավելացրեք տարբերակի անունը data-bs-
, ինչպես data-bs-offset=""
. Համոզվեք, որ փոխել եք ընտրանքի անվանման պատյանների տեսակը camelCase-ից դեպի kebab-case՝ ընտրանքները տվյալների ատրիբուտների միջոցով փոխանցելիս: Օրինակ՝ օգտագործելու փոխարեն data-bs-autoClose="false"
օգտագործեք data-bs-auto-close="false"
.
Անուն | Տիպ | Կանխադրված | Նկարագրություն |
---|---|---|---|
boundary |
լարային | տարր | 'clippingParents' |
Բացվող ընտրացանկի գերհոսքի սահմանափակման սահմանը (կիրառվում է միայն Popper-ի preventOverflow փոփոխիչի համար): Լռելյայն այն է 'clippingParents' և կարող է ընդունել HTMLElement հղում (միայն JavaScript-ի միջոցով): Լրացուցիչ տեղեկությունների համար տես Popper's detectOverflow փաստաթղթերը : |
reference |
լարային | տարր | օբյեկտ | 'toggle' |
Բացվող ընտրացանկի տեղեկատու տարր: Ընդունում է 'toggle' , 'parent' , HTMLElement հղումի կամ տրամադրող օբյեկտի արժեքները getBoundingClientRect : Լրացուցիչ տեղեկությունների համար դիմեք Popper-ի կառուցողական փաստաթղթերին և վիրտուալ տարրերի փաստաթղթերին : |
display |
լար | 'dynamic' |
Լռելյայն, մենք օգտագործում ենք Popper-ը դինամիկ դիրքավորման համար: Անջատեք սա static . |
offset |
զանգված | լարային | ֆունկցիան | [0, 2] |
Բացվող ցանկի օֆսեթ՝ իր թիրախի համեմատ: Դուք կարող եք տող փոխանցել տվյալների ատրիբուտներում ստորակետերով առանձնացված արժեքներով, ինչպիսիք են. Երբ ֆունկցիան օգտագործվում է օֆսեթը որոշելու համար, այն կանչվում է՝ որպես իր առաջին արգումենտ պարունակող popper-ի տեղադրումը, հղումը և popper-ի ուղղումները: Գործարկող տարրը DOM հանգույցը փոխանցվում է որպես երկրորդ արգումենտ: Ֆունկցիան պետք է վերադարձնի երկու թվերով զանգված՝ . Լրացուցիչ տեղեկությունների համար տես Պոպերի օֆսեթ փաստաթղթերը : |
autoClose |
բուլյան | լար | true |
Կարգավորեք բացվող ցանկի ավտոմատ փակման պահվածքը.
|
popperConfig |
զրոյական | օբյեկտ | ֆունկցիան | null |
Bootstrap-ի լռելյայն Popper կոնֆիգուրացիան փոխելու համար տե՛ս Popper-ի կոնֆիգուրացիան : Երբ ֆունկցիան օգտագործվում է Popper կոնֆիգուրացիան ստեղծելու համար, այն կանչվում է օբյեկտի հետ, որը պարունակում է Bootstrap-ի լռելյայն Popper կոնֆիգուրացիան: Այն օգնում է ձեզ օգտագործել և միաձուլել կանխադրվածը ձեր սեփական կազմաձևի հետ: Ֆունկցիան պետք է վերադարձնի Popper-ի կազմաձևման օբյեկտ: |
Օգտագործելով գործառույթըpopperConfig
var dropdown = new bootstrap.Dropdown(element, {
popperConfig: function (defaultBsPopperConfig) {
// var newPopperConfig = {...}
// use defaultBsPopperConfig if needed...
// return newPopperConfig
}
})
Մեթոդներ
Մեթոդ | Նկարագրություն |
---|---|
toggle |
Անջատում է տվյալ նավագոտու կամ ներդիրներով նավիգացիայի բացվող ընտրացանկը: |
show |
Ցույց է տալիս տվյալ նավագոտու կամ ներդիրներով նավիգացիայի բացվող ընտրացանկը: |
hide |
Թաքցնում է տվյալ նավագոտու կամ ներդիրներով նավիգացիայի բացվող ընտրացանկը: |
update |
Թարմացնում է տարրի բացվող ցանկի դիրքը: |
dispose |
Ոչնչացնում է տարրի բացվող ցանկը: (Հեռացնում է DOM տարրի վրա պահված տվյալները) |
getInstance |
Ստատիկ մեթոդ, որը թույլ է տալիս ստանալ DOM տարրի հետ կապված բացվող օրինակը, կարող եք օգտագործել այն այսպես.bootstrap.Dropdown.getInstance(element) |
getOrCreateInstance |
Ստատիկ մեթոդ, որը վերադարձնում է DOM տարրի հետ կապված բացվող օրինակ կամ ստեղծում է նորը, եթե այն նախաստորագրված չէ: Դուք կարող եք օգտագործել այն այսպես.bootstrap.Dropdown.getOrCreateInstance(element) |
Իրադարձություններ
Բոլոր բացվող իրադարձությունները գործարկվում են փոխարկվող տարրի վրա, այնուհետև փրփրվում են: Այսպիսով, դուք կարող եք նաև իրադարձությունների ունկնդիրներ ավելացնել .dropdown-menu
's մայր տարրի վրա: hide.bs.dropdown
և hidden.bs.dropdown
իրադարձություններն ունեն clickEvent
հատկություն (միայն այն դեպքում, երբ սկզբնական Իրադարձության տեսակն է click
), որը պարունակում է Իրադարձության օբյեկտ սեղմման իրադարձության համար:
Մեթոդ | Նկարագրություն |
---|---|
show.bs.dropdown |
Հրդեհվում է անմիջապես, երբ կանչվում է շոուի օրինակի մեթոդը: |
shown.bs.dropdown |
Գործարկվել է, երբ բացվող ցանկը տեսանելի է դարձել օգտատիրոջը, և CSS-ի անցումներն ավարտվել են: |
hide.bs.dropdown |
Հրդեհվում է անմիջապես, երբ կանչվում է թաքցնել օրինակի մեթոդը: |
hidden.bs.dropdown |
Գործարկվել է, երբ բացվող ցանկն ավարտվել է օգտագործողից թաքցնելու և CSS-ի անցումներն ավարտվել են: |
var myDropdown = document.getElementById('myDropdown')
myDropdown.addEventListener('show.bs.dropdown', function () {
// do something...
})