ჩამოსაშლელები
გადართეთ კონტექსტური გადაფარვები ბმულების სიების საჩვენებლად და სხვა Bootstrap ჩამოსაშლელი მოდულით.
მიმოხილვა
ჩამოსაშლელები არის გადართვადი, კონტექსტური გადაფარვები ბმულების სიების საჩვენებლად და სხვა. ისინი ინტერაქტიულია ჩართული Bootstrap ჩამოსაშლელი JavaScript მოდულით. მათი გადართვა ხდება დაწკაპუნებით და არა მატრიცით; ეს არის მიზანმიმართული დიზაინის გადაწყვეტილება .
ჩამოსაშლელი ფაილები აგებულია მესამე მხარის ბიბლიოთეკაზე, Popper- ზე , რომელიც უზრუნველყოფს დინამიურ პოზიციონირებას და ხედის ამოცნობას. დარწმუნდით, რომ ჩართეთ popper.min.js Bootstrap-ის JavaScript-მდე ან გამოიყენეთ bootstrap.bundle.min.js
/ bootstrap.bundle.js
რომელიც შეიცავს Popper-ს. პოპერი არ გამოიყენება ნავი ზოლებში ჩამოსაშლელი ჩანართების განსათავსებლად, თუმცა დინამიური პოზიციონირება არ არის საჭირო.
ხელმისაწვდომობა
WAI ARIA სტანდარტი განსაზღვრავს რეალურ role="menu"
ვიჯეტს , მაგრამ ეს სპეციფიკურია აპლიკაციის მსგავსი მენიუებისთვის, რომლებიც ახდენენ მოქმედებებს ან ფუნქციებს. ARIA მენიუები შეიძლება შეიცავდეს მხოლოდ მენიუს ელემენტებს, მონიშვნის ველის მენიუს ელემენტებს, რადიო ღილაკების მენიუს ელემენტებს, რადიოს ღილაკების ჯგუფებს და ქვემენიუებს.
მეორეს მხრივ, Bootstrap-ის ჩამოსაშლელი ფაილები შექმნილია როგორც ზოგადი და გამოსაყენებელი სხვადასხვა სიტუაციებისა და მარკირების სტრუქტურებისთვის. მაგალითად, შესაძლებელია ჩამოსაშლელი ფანჯრების შექმნა, რომლებიც შეიცავენ დამატებით შენატანს და ფორმის კონტროლს, როგორიცაა საძიებო ველები ან შესვლის ფორმები. ამ მიზეზით, Bootstrap არ მოელის (არც ავტომატურად დაამატებს) რომელიმე ატრიბუტს role
, aria-
რომელიც საჭიროა ნამდვილი 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
ჩასაშლელი კარტის ირგვლივ სათანადო ინტერვალის დამატებით.
ჩვენ ვიყენებთ ამ დამატებით კლასს, რათა შევამციროთ ჰორიზონტალური padding
ზოლის ორივე მხარეს 25%-ით და წავშალოთ ის, 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">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"
ატრიბუტის დამატება ჩამოსაშლელი ღილაკებისთვის navbar-ებში, რადგან Popper არ გამოიყენება ნავი ზოლებში.
გასწორების ვარიანტები
ზემოთ ნაჩვენები ვარიანტების უმეტესობის გათვალისწინებით, აქ არის პატარა სამზარეულოს ნიჟარის დემო ვერსია სხვადასხვა ჩამოსაშლელი გასწორების ვარიანტების ერთ ადგილას.
<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>
ფორმები
განათავსეთ ფორმა ჩამოსაშლელ მენიუში, ან გადააქციეთ ის ჩამოსაშლელ მენიუში და გამოიყენეთ ზღვრული ან padding უტილიტები , რომ მისცეთ მას თქვენთვის საჭირო უარყოფითი სივრცე.
<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($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;
ცვლადები მუქი ჩამოსაშლელი მენიუსთვის :
$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-ის საშუალებით, თუ სანაცვლოდ იყენებთ data-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' |
ჩამოსაშლელი მენიუს Overflow შეზღუდვის საზღვარი (გამოიყენება მხოლოდ Popper-ის preventOverflow მოდიფიკატორზე). ნაგულისხმევად ის არის 'clippingParents' და შეუძლია მიიღოს HTMLElement მითითება (მხოლოდ JavaScript-ის საშუალებით). დამატებითი ინფორმაციისთვის იხილეთ Popper's detectOverflow docs . |
reference |
სიმებიანი | ელემენტი | ობიექტი | 'toggle' |
ჩამოსაშლელი მენიუს საცნობარო ელემენტი. იღებს 'toggle' , 'parent' , HTMLElement მითითების ან ობიექტის მნიშვნელობებს getBoundingClientRect . დამატებითი ინფორმაციისთვის იხილეთ პოპერის კონსტრუქტორის დოკუმენტები და ვირტუალური ელემენტების დოკუმენტები . |
display |
სიმებიანი | 'dynamic' |
ნაგულისხმევად, ჩვენ ვიყენებთ Popper-ს დინამიური პოზიციონირებისთვის. გამორთეთ ეს static . |
offset |
მასივი | სიმებიანი | ფუნქცია | [0, 2] |
ჩამოსაშლელი ჩანაწერის ოფსეტური მიზანთან შედარებით. თქვენ შეგიძლიათ გადასცეთ სტრიქონი მონაცემთა ატრიბუტებში მძიმით გამოყოფილი მნიშვნელობებით, როგორიცაა: როდესაც ფუნქცია გამოიყენება ოფსეტის დასადგენად, ის გამოიძახება ობიექტით, რომელიც შეიცავს პოპერის განლაგებას, მითითებას და პოპერის რექტს, როგორც მის პირველ არგუმენტს. გამომწვევი ელემენტი DOM კვანძი გადაეცემა მეორე არგუმენტად. ფუნქციამ უნდა დააბრუნოს მასივი ორი რიცხვით: . დამატებითი ინფორმაციისთვის იხილეთ პოპერის ოფსეტური დოკუმენტები . |
autoClose |
ლოგიკური | სიმებიანი | true |
ჩამოსაშლელი მენიუს ავტომატური დახურვის ქცევის კონფიგურაცია:
|
popperConfig |
null | ობიექტი | ფუნქცია | null |
Bootstrap-ის ნაგულისხმევი Popper კონფიგურაციის შესაცვლელად იხილეთ Popper-ის კონფიგურაცია . როდესაც ფუნქცია გამოიყენება Popper-ის კონფიგურაციის შესაქმნელად, მას უწოდებენ ობიექტს, რომელიც შეიცავს Bootstrap-ის ნაგულისხმევ პოპერის კონფიგურაციას. ის გეხმარებათ გამოიყენოთ და შეაერთოთ ნაგულისხმევი კონფიგურაცია. ფუნქციამ უნდა დააბრუნოს 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
მშობლის ელემენტზე. 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...
})