ಡ್ರಾಪ್ಡೌನ್ಗಳು
ಬೂಟ್ಸ್ಟ್ರ್ಯಾಪ್ ಡ್ರಾಪ್ಡೌನ್ ಪ್ಲಗಿನ್ನೊಂದಿಗೆ ಲಿಂಕ್ಗಳ ಪಟ್ಟಿಗಳು ಮತ್ತು ಹೆಚ್ಚಿನದನ್ನು ಪ್ರದರ್ಶಿಸಲು ಸಂದರ್ಭೋಚಿತ ಓವರ್ಲೇಗಳನ್ನು ಟಾಗಲ್ ಮಾಡಿ.
ಅವಲೋಕನ
ಡ್ರಾಪ್ಡೌನ್ಗಳು ಟಾಗಲ್ ಮಾಡಬಹುದಾದ, ಲಿಂಕ್ಗಳ ಪಟ್ಟಿಗಳನ್ನು ಮತ್ತು ಹೆಚ್ಚಿನದನ್ನು ಪ್ರದರ್ಶಿಸಲು ಸಂದರ್ಭೋಚಿತ ಓವರ್ಲೇಗಳು. ಒಳಗೊಂಡಿರುವ ಬೂಟ್ಸ್ಟ್ರ್ಯಾಪ್ ಡ್ರಾಪ್ಡೌನ್ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಪ್ಲಗಿನ್ನೊಂದಿಗೆ ಅವುಗಳನ್ನು ಸಂವಾದಾತ್ಮಕವಾಗಿ ಮಾಡಲಾಗಿದೆ. ಅವುಗಳನ್ನು ಕ್ಲಿಕ್ ಮಾಡುವ ಮೂಲಕ ಟಾಗಲ್ ಮಾಡಲಾಗುತ್ತದೆ, ಸುಳಿದಾಡುವ ಮೂಲಕ ಅಲ್ಲ; ಇದು ಉದ್ದೇಶಪೂರ್ವಕ ವಿನ್ಯಾಸ ನಿರ್ಧಾರವಾಗಿದೆ .
ಡ್ರಾಪ್ಡೌನ್ಗಳನ್ನು ಥರ್ಡ್ ಪಾರ್ಟಿ ಲೈಬ್ರರಿ, ಪಾಪ್ಪರ್ನಲ್ಲಿ ನಿರ್ಮಿಸಲಾಗಿದೆ , ಇದು ಡೈನಾಮಿಕ್ ಪೊಸಿಷನಿಂಗ್ ಮತ್ತು ವ್ಯೂಪೋರ್ಟ್ ಡಿಟೆಕ್ಷನ್ ಅನ್ನು ಒದಗಿಸುತ್ತದೆ. ಬೂಟ್ಸ್ಟ್ರ್ಯಾಪ್ನ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ನ ಮೊದಲು popper.min.js ಅನ್ನು ಸೇರಿಸಲು ಮರೆಯದಿರಿ ಅಥವಾ ಪಾಪ್ಪರ್ ಅನ್ನು ಒಳಗೊಂಡಿರುವ bootstrap.bundle.min.js
/ ಅನ್ನು ಬಳಸಿ. bootstrap.bundle.js
ಡೈನಾಮಿಕ್ ಪೊಸಿಷನಿಂಗ್ ಅಗತ್ಯವಿಲ್ಲದಿದ್ದರೂ ನ್ಯಾವ್ಬಾರ್ಗಳಲ್ಲಿ ಡ್ರಾಪ್ಡೌನ್ಗಳನ್ನು ಇರಿಸಲು ಪಾಪ್ಪರ್ ಅನ್ನು ಬಳಸಲಾಗುವುದಿಲ್ಲ.
ಪ್ರವೇಶಿಸುವಿಕೆ
WAI ARIA ಮಾನದಂಡವು ನಿಜವಾದ role="menu"
ವಿಜೆಟ್ ಅನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುತ್ತದೆ , ಆದರೆ ಇದು ಕ್ರಿಯೆಗಳು ಅಥವಾ ಕಾರ್ಯಗಳನ್ನು ಪ್ರಚೋದಿಸುವ ಅಪ್ಲಿಕೇಶನ್-ರೀತಿಯ ಮೆನುಗಳಿಗೆ ನಿರ್ದಿಷ್ಟವಾಗಿದೆ. ARIA ಮೆನುಗಳು ಮೆನು ಐಟಂಗಳು, ಚೆಕ್ಬಾಕ್ಸ್ ಮೆನು ಐಟಂಗಳು, ರೇಡಿಯೋ ಬಟನ್ ಮೆನು ಐಟಂಗಳು, ರೇಡಿಯೋ ಬಟನ್ ಗುಂಪುಗಳು ಮತ್ತು ಉಪ-ಮೆನುಗಳನ್ನು ಮಾತ್ರ ಒಳಗೊಂಡಿರಬಹುದು.
ಮತ್ತೊಂದೆಡೆ, ಬೂಟ್ಸ್ಟ್ರ್ಯಾಪ್ನ ಡ್ರಾಪ್ಡೌನ್ಗಳನ್ನು ಜೆನೆರಿಕ್ ಆಗಿ ವಿನ್ಯಾಸಗೊಳಿಸಲಾಗಿದೆ ಮತ್ತು ವಿವಿಧ ಸನ್ನಿವೇಶಗಳು ಮತ್ತು ಮಾರ್ಕ್ಅಪ್ ರಚನೆಗಳಿಗೆ ಅನ್ವಯಿಸುತ್ತದೆ. ಉದಾಹರಣೆಗೆ, ಹುಡುಕಾಟ ಕ್ಷೇತ್ರಗಳು ಅಥವಾ ಲಾಗಿನ್ ಫಾರ್ಮ್ಗಳಂತಹ ಹೆಚ್ಚುವರಿ ಇನ್ಪುಟ್ಗಳು ಮತ್ತು ಫಾರ್ಮ್ ನಿಯಂತ್ರಣಗಳನ್ನು ಒಳಗೊಂಡಿರುವ ಡ್ರಾಪ್ಡೌನ್ಗಳನ್ನು ರಚಿಸಲು ಸಾಧ್ಯವಿದೆ. ಈ ಕಾರಣಕ್ಕಾಗಿ, ನಿಜವಾದ ARIA ಮೆನುಗಳಿಗೆ ಅಗತ್ಯವಿರುವ ಯಾವುದೇ role
ಮತ್ತು ಗುಣಲಕ್ಷಣಗಳನ್ನು Bootstrap ನಿರೀಕ್ಷಿಸುವುದಿಲ್ಲ (ಅಥವಾ ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಸೇರಿಸುವುದಿಲ್ಲ) . ಲೇಖಕರು ಈ ಹೆಚ್ಚು ನಿರ್ದಿಷ್ಟ ಗುಣಲಕ್ಷಣಗಳನ್ನು ಸ್ವತಃ ಸೇರಿಸಿಕೊಳ್ಳಬೇಕು.aria-
ಆದಾಗ್ಯೂ, ಬೂಟ್ಸ್ಟ್ರ್ಯಾಪ್ ಹೆಚ್ಚಿನ ಪ್ರಮಾಣಿತ ಕೀಬೋರ್ಡ್ ಮೆನು ಸಂವಹನಗಳಿಗೆ ಅಂತರ್ನಿರ್ಮಿತ ಬೆಂಬಲವನ್ನು ಸೇರಿಸುತ್ತದೆ, ಉದಾಹರಣೆಗೆ .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>
ಮತ್ತು ಅದನ್ನು ನ್ಯಾವ್ಬಾರ್ನಲ್ಲಿ ಬಳಸಲು:
<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 ನಲ್ಲಿ ಬೂಟ್ಸ್ಟ್ರ್ಯಾಪ್ ಬಳಸುವಾಗ ದಿಕ್ಕುಗಳನ್ನು ಪ್ರತಿಬಿಂಬಿಸಲಾಗುತ್ತದೆ, ಅರ್ಥವು .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>
ಡ್ರಾಪ್ಲೆಫ್ಟ್
.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 ನಲ್ಲಿ ಬೂಟ್ಸ್ಟ್ರ್ಯಾಪ್ ಬಳಸುವಾಗ ದಿಕ್ಕುಗಳನ್ನು ಪ್ರತಿಬಿಂಬಿಸಲಾಗುತ್ತದೆ, ಅರ್ಥವು .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"
ನ್ಯಾವ್ಬಾರ್ಗಳಲ್ಲಿ ಪಾಪ್ಪರ್ ಅನ್ನು ಬಳಸದ ಕಾರಣ ನೀವು ನ್ಯಾವ್ಬಾರ್ಗಳಲ್ಲಿ ಡ್ರಾಪ್ಡೌನ್ ಬಟನ್ಗಳಿಗೆ ಗುಣಲಕ್ಷಣವನ್ನು ಸೇರಿಸುವ ಅಗತ್ಯವಿಲ್ಲ ಎಂಬುದನ್ನು ಗಮನಿಸಿ .
ಜೋಡಣೆ ಆಯ್ಕೆಗಳು
ಮೇಲೆ ತೋರಿಸಿರುವ ಹೆಚ್ಚಿನ ಆಯ್ಕೆಗಳನ್ನು ತೆಗೆದುಕೊಂಡರೆ, ಒಂದೇ ಸ್ಥಳದಲ್ಲಿ ವಿವಿಧ ಡ್ರಾಪ್ಡೌನ್ ಜೋಡಣೆ ಆಯ್ಕೆಗಳ ಸಣ್ಣ ಕಿಚನ್ ಸಿಂಕ್ ಡೆಮೊ ಇಲ್ಲಿದೆ.
<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($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;
}
}
}
ಬಳಕೆ
.show
ಡೇಟಾ ಗುಣಲಕ್ಷಣಗಳು ಅಥವಾ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಮೂಲಕ , ಪೋಷಕರ ಮೇಲೆ ವರ್ಗವನ್ನು ಟಾಗಲ್ ಮಾಡುವ ಮೂಲಕ ಡ್ರಾಪ್ಡೌನ್ ಪ್ಲಗಿನ್ ಗುಪ್ತ ವಿಷಯವನ್ನು (ಡ್ರಾಪ್ಡೌನ್ ಮೆನುಗಳು) ಟಾಗಲ್ ಮಾಡುತ್ತದೆ .dropdown-menu
. ಅಪ್ಲಿಕೇಶನ್ ಮಟ್ಟದಲ್ಲಿ ಡ್ರಾಪ್ಡೌನ್ ಮೆನುಗಳನ್ನು ಮುಚ್ಚಲು ಗುಣಲಕ್ಷಣವನ್ನು ಅವಲಂಬಿಸಿದೆ, ಆದ್ದರಿಂದ data-bs-toggle="dropdown"
ಯಾವಾಗಲೂ ಅದನ್ನು ಬಳಸುವುದು ಒಳ್ಳೆಯದು.
mouseover
ತಕ್ಷಣದ ಮಕ್ಕಳಿಗೆ
ಖಾಲಿ ಹ್ಯಾಂಡ್ಲರ್ಗಳನ್ನು ಸೇರಿಸುತ್ತದೆ
. ಐಒಎಸ್ ಈವೆಂಟ್ ನಿಯೋಗದಲ್ಲಿನ ಚಮತ್ಕಾರದ<body>
ಸುತ್ತಲೂ ಕೆಲಸ ಮಾಡಲು ಈ ಕೊಳಕು ಹ್ಯಾಕ್ ಅಗತ್ಯವಾಗಿದೆ
, ಇದು ಡ್ರಾಪ್ಡೌನ್ನ ಹೊರಗೆ ಎಲ್ಲಿಯಾದರೂ ಟ್ಯಾಪ್ ಮಾಡುವುದನ್ನು ಡ್ರಾಪ್ಡೌನ್ ಅನ್ನು ಮುಚ್ಚುವ ಕೋಡ್ ಅನ್ನು ಪ್ರಚೋದಿಸುವುದನ್ನು ತಡೆಯುತ್ತದೆ. ಡ್ರಾಪ್ಡೌನ್ ಮುಚ್ಚಿದ ನಂತರ, ಈ ಹೆಚ್ಚುವರಿ ಖಾಲಿ
ಹ್ಯಾಂಡ್ಲರ್ಗಳನ್ನು ತೆಗೆದುಹಾಕಲಾಗುತ್ತದೆ.
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>
ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಮೂಲಕ
ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಮೂಲಕ ಡ್ರಾಪ್ಡೌನ್ಗಳನ್ನು ಕರೆ ಮಾಡಿ:
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-bs-toggle="dropdown"
, ಡ್ರಾಪ್ಡೌನ್ನ ಪ್ರಚೋದಕ ಅಂಶದಲ್ಲಿ ಯಾವಾಗಲೂ ಇರಬೇಕಾಗುತ್ತದೆ.
ಆಯ್ಕೆಗಳು
ಡೇಟಾ ಗುಣಲಕ್ಷಣಗಳು ಅಥವಾ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಮೂಲಕ ಆಯ್ಕೆಗಳನ್ನು ರವಾನಿಸಬಹುದು. ಡೇಟಾ ಗುಣಲಕ್ಷಣಗಳಿಗಾಗಿ, ಆಯ್ಕೆಯ ಹೆಸರನ್ನು ಸೇರಿಸಿ data-bs-
, data-bs-offset=""
. ಡೇಟಾ ಗುಣಲಕ್ಷಣಗಳ ಮೂಲಕ ಆಯ್ಕೆಗಳನ್ನು ರವಾನಿಸುವಾಗ ಆಯ್ಕೆಯ ಹೆಸರಿನ ಕೇಸ್ ಪ್ರಕಾರವನ್ನು ಕ್ಯಾಮೆಲ್ಕೇಸ್ನಿಂದ ಕಬಾಬ್-ಕೇಸ್ಗೆ ಬದಲಾಯಿಸುವುದನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ. ಉದಾಹರಣೆಗೆ, ಬಳಸುವ ಬದಲು , data-bs-autoClose="false"
ಬಳಸಿ data-bs-auto-close="false"
.
ಹೆಸರು | ಮಾದರಿ | ಡೀಫಾಲ್ಟ್ | ವಿವರಣೆ |
---|---|---|---|
boundary |
ದಾರ | ಅಂಶ | 'clippingParents' |
ಡ್ರಾಪ್ಡೌನ್ ಮೆನುವಿನ ಓವರ್ಫ್ಲೋ ನಿರ್ಬಂಧದ ಗಡಿ (ಪಾಪರ್ನ ಪ್ರಿವೆಂಟ್ಓವರ್ಫ್ಲೋ ಮಾರ್ಪಾಡುಗೆ ಮಾತ್ರ ಅನ್ವಯಿಸುತ್ತದೆ). ಪೂರ್ವನಿಯೋಜಿತವಾಗಿ ಇದು 'clippingParents' HTML ಎಲಿಮೆಂಟ್ ಉಲ್ಲೇಖವನ್ನು ಸ್ವೀಕರಿಸಬಹುದು (ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಮೂಲಕ ಮಾತ್ರ). ಹೆಚ್ಚಿನ ಮಾಹಿತಿಗಾಗಿ ಪಾಪ್ಪರ್ನ ಡಿಟೆಕ್ಟ್ಓವರ್ಫ್ಲೋ ಡಾಕ್ಸ್ ಅನ್ನು ನೋಡಿ . |
reference |
ದಾರ | ಅಂಶ | ವಸ್ತು | 'toggle' |
ಡ್ರಾಪ್ಡೌನ್ ಮೆನುವಿನ ಉಲ್ಲೇಖ ಅಂಶ. 'toggle' , 'parent' , ಒಂದು HTML ಎಲಿಮೆಂಟ್ ಉಲ್ಲೇಖ ಅಥವಾ ಒದಗಿಸುವ ವಸ್ತುವಿನ ಮೌಲ್ಯಗಳನ್ನು ಸ್ವೀಕರಿಸುತ್ತದೆ getBoundingClientRect . ಹೆಚ್ಚಿನ ಮಾಹಿತಿಗಾಗಿ ಪಾಪ್ಪರ್ನ ಕನ್ಸ್ಟ್ರಕ್ಟರ್ ಡಾಕ್ಸ್ ಮತ್ತು ವರ್ಚುವಲ್ ಎಲಿಮೆಂಟ್ ಡಾಕ್ಸ್ ಅನ್ನು ನೋಡಿ . |
display |
ಸ್ಟ್ರಿಂಗ್ | 'dynamic' |
ಪೂರ್ವನಿಯೋಜಿತವಾಗಿ, ಡೈನಾಮಿಕ್ ಸ್ಥಾನೀಕರಣಕ್ಕಾಗಿ ನಾವು ಪಾಪ್ಪರ್ ಅನ್ನು ಬಳಸುತ್ತೇವೆ. ಇದನ್ನು ನಿಷ್ಕ್ರಿಯಗೊಳಿಸಿ static . |
offset |
ವ್ಯೂಹ | ದಾರ | ಕಾರ್ಯ | [0, 2] |
ಅದರ ಗುರಿಗೆ ಸಂಬಂಧಿಸಿದಂತೆ ಡ್ರಾಪ್ಡೌನ್ನ ಆಫ್ಸೆಟ್. ಅಲ್ಪವಿರಾಮದಿಂದ ಬೇರ್ಪಡಿಸಿದ ಮೌಲ್ಯಗಳೊಂದಿಗೆ ಡೇಟಾ ಗುಣಲಕ್ಷಣಗಳಲ್ಲಿ ನೀವು ಸ್ಟ್ರಿಂಗ್ ಅನ್ನು ರವಾನಿಸಬಹುದು: ಆಫ್ಸೆಟ್ ಅನ್ನು ನಿರ್ಧರಿಸಲು ಫಂಕ್ಷನ್ ಅನ್ನು ಬಳಸಿದಾಗ, ಪಾಪ್ಪರ್ ಪ್ಲೇಸ್ಮೆಂಟ್, ರೆಫರೆನ್ಸ್ ಮತ್ತು ಪಾಪ್ಪರ್ ರೆಕ್ಟ್ಗಳನ್ನು ಅದರ ಮೊದಲ ಆರ್ಗ್ಯುಮೆಂಟ್ ಅನ್ನು ಹೊಂದಿರುವ ವಸ್ತುವಿನೊಂದಿಗೆ ಕರೆಯಲಾಗುತ್ತದೆ. ಪ್ರಚೋದಿಸುವ ಅಂಶ DOM ನೋಡ್ ಅನ್ನು ಎರಡನೇ ಆರ್ಗ್ಯುಮೆಂಟ್ ಆಗಿ ರವಾನಿಸಲಾಗಿದೆ. ಕಾರ್ಯವು ಎರಡು ಸಂಖ್ಯೆಗಳೊಂದಿಗೆ ಸರಣಿಯನ್ನು ಹಿಂತಿರುಗಿಸಬೇಕು: . ಹೆಚ್ಚಿನ ಮಾಹಿತಿಗಾಗಿ ಪಾಪ್ಪರ್ನ ಆಫ್ಸೆಟ್ ಡಾಕ್ಸ್ ಅನ್ನು ನೋಡಿ . |
autoClose |
ಬೂಲಿಯನ್ | ಸ್ಟ್ರಿಂಗ್ | true |
ಡ್ರಾಪ್ಡೌನ್ನ ಸ್ವಯಂ ಮುಚ್ಚುವಿಕೆಯ ನಡವಳಿಕೆಯನ್ನು ಕಾನ್ಫಿಗರ್ ಮಾಡಿ:
|
popperConfig |
ಶೂನ್ಯ | ವಸ್ತು | ಕಾರ್ಯ | null |
ಬೂಟ್ಸ್ಟ್ರ್ಯಾಪ್ನ ಡೀಫಾಲ್ಟ್ ಪಾಪ್ಪರ್ ಸಂರಚನೆಯನ್ನು ಬದಲಾಯಿಸಲು, ಪಾಪ್ಪರ್ನ ಕಾನ್ಫಿಗರೇಶನ್ ಅನ್ನು ನೋಡಿ . ಪಾಪ್ಪರ್ ಕಾನ್ಫಿಗರೇಶನ್ ಅನ್ನು ರಚಿಸಲು ಕಾರ್ಯವನ್ನು ಬಳಸಿದಾಗ, ಅದನ್ನು ಬೂಟ್ಸ್ಟ್ರ್ಯಾಪ್ನ ಡೀಫಾಲ್ಟ್ ಪಾಪ್ಪರ್ ಕಾನ್ಫಿಗರೇಶನ್ ಹೊಂದಿರುವ ವಸ್ತುವಿನೊಂದಿಗೆ ಕರೆಯಲಾಗುತ್ತದೆ. ನಿಮ್ಮ ಸ್ವಂತ ಕಾನ್ಫಿಗರೇಶನ್ನೊಂದಿಗೆ ಡೀಫಾಲ್ಟ್ ಅನ್ನು ಬಳಸಲು ಮತ್ತು ವಿಲೀನಗೊಳಿಸಲು ಇದು ನಿಮಗೆ ಸಹಾಯ ಮಾಡುತ್ತದೆ. ಕಾರ್ಯವು ಪಾಪ್ಪರ್ಗಾಗಿ ಕಾನ್ಫಿಗರೇಶನ್ ಆಬ್ಜೆಕ್ಟ್ ಅನ್ನು ಹಿಂತಿರುಗಿಸಬೇಕು. |
ಇದರೊಂದಿಗೆ ಕಾರ್ಯವನ್ನು ಬಳಸುವುದು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...
})