පතනයන්
බූට්ස්ට්‍රැප් පතන ප්ලගිනය සමඟ සබැඳි සහ තවත් බොහෝ දේ ප්‍රදර්ශනය කිරීම සඳහා සන්දර්භීය ආවරණ ටොගල් කරන්න.
දළ විශ්ලේෂණය
පතනයන් යනු ටොගල් කළ හැකි, සබැඳි ලැයිස්තු සහ තවත් දේ සංදර්ශන කිරීම සඳහා සන්දර්භීය උඩැතිරි වේ. ඒවා ඇතුලත් කර ඇති Bootstrap dropdown JavaScript ප්ලගිනය සමඟ අන්තර්ක්‍රියාකාරී කර ඇත. ඒවා ටොගල් කරන්නේ ක්ලික් කිරීමෙන් මිස සැරිසැරීමෙන් නොවේ; මෙය හිතාමතා සැලසුම් කිරීමේ තීරණයකි.
ඩ්‍රොප් ඩවුන් ගොඩනගා ඇත්තේ ගතික ස්ථානගත කිරීම සහ දර්ශන තොට හඳුනාගැනීම සපයන තෙවන පාර්ශවීය පුස්තකාලයක් වන Popper.js මත ය. Bootstrap හි JavaScript වලට පෙර popper.min.js ඇතුළත් කිරීමට හෝ Popper.js අඩංගු bootstrap.bundle.min.js/ භාවිතා කිරීමට වග බලා ගන්න . bootstrap.bundle.jsගතික ස්ථානගත කිරීම අවශ්‍ය නොවන බැවින්, navbar වල පතන ස්ථානගත කිරීමට Popper.js භාවිතා නොවේ.
ඔබ අපගේ ජාවාස්ක්‍රිප්ට් නිර්මාණය කරන්නේ මූලාශ්‍රයෙන් නම්, එයට අවශ්‍ය වේutil.js .
ප්රවේශ
WAI ARIA ප්‍රමිතිය සත්‍ය role="menu"විජට් එකක් නිර්වචනය කරයි , නමුත් මෙය ක්‍රියා හෝ ක්‍රියාකාරකම් අවුලුවන යෙදුම් වැනි මෙනු සඳහා විශේෂිත වේ . ARIA මෙනු වල අඩංගු විය හැක්කේ මෙනු අයිතම, පිරික්සුම් පෙට්ටි මෙනු අයිතම, රේඩියෝ බොත්තම් මෙනු අයිතම, රේඩියෝ බොත්තම් කණ්ඩායම් සහ උප මෙනු පමණි.
අනෙක් අතට, Bootstrap හි පහත වැටීම් සාමාන්‍ය සහ විවිධ අවස්ථා සහ සලකුණු ව්‍යුහයන්ට අදාළ වන පරිදි නිර්මාණය කර ඇත. උදාහරණයක් ලෙස, සෙවුම් ක්ෂේත්‍ර හෝ පිවිසුම් පෝරම වැනි අමතර යෙදවුම් සහ පෝරම පාලන අඩංගු dropdowns සෑදිය හැක. මෙම හේතුව නිසා, Bootstrap සත්‍ය ARIA මෙනු සඳහා අවශ්‍ය roleසහ aria-ගුණාංග කිසිවක් අපේක්ෂා නොකරයි (හෝ ස්වයංක්‍රීයව එකතු නොකරයි) . කතුවරුන්ට මෙම වඩාත් නිශ්චිත ගුණාංග ඇතුළත් කිරීමට සිදුවනු ඇත.
කෙසේ වෙතත්, Bootstrap බොහෝ සම්මත යතුරුපුවරු මෙනු අන්තර්ක්‍රියා සඳහා බිල්ට් සහය එක් කරයි, .dropdown-itemඑනම් කර්සර යතුරු භාවිතයෙන් තනි මූලද්රව්ය හරහා ගමන් කිරීමේ හැකියාව සහ යතුර සමඟ මෙනුව වසා දැමීම වැනි ESC.
උදාහරණ
පතන ටොගලය (ඔබේ බොත්තම හෝ සබැඳිය) සහ පතන මෙනුව තුළ .dropdown, හෝ ප්‍රකාශ කරන වෙනත් මූලද්රව්ය ඔතා position: relative;. ඔබගේ විභව අවශ්‍යතා වඩාත් හොඳින් ගැලපෙන පරිදි පතනයන් <a>හෝ මූලද්රව්ය වලින් ක්‍රියාරම්භ කළ හැක.<button>
තනි බොත්තම් පතන
සමහර සලකුණු වෙනස් කිරීම් සමඟින් ඕනෑම තනි .btnඑකක් පතන ටොගලයක් බවට පත් කළ හැක. <button>ඔබට ඒවා එක් එක් මූලද්රව්ය සමඟ වැඩ කිරීමට යෙදිය හැකි ආකාරය මෙන්න :
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown button
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>සහ <a>මූලද්රව්ය සමඟ:
<div class="dropdown show">
<a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown link
</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>හොඳම කොටස නම් ඔබට ඕනෑම බොත්තම් ප්‍රභේදයකින් මෙය කළ හැකිය:
<!-- Example single danger button -->
<div class="btn-group">
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Action
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</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-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>ප්‍රමාණය කිරීම
බොත්තම් පතනයන් පෙරනිමි සහ බෙදීම් බොත්තම් ඇතුළුව සියලුම ප්‍රමාණයේ බොත්තම් සමඟ ක්‍රියා කරයි.
<!-- Large button groups (default and split) -->
<div class="btn-group">
<button class="btn btn-secondary btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Large button
</button>
<div class="dropdown-menu">
...
</div>
</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-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
...
</div>
</div>
<!-- Small button groups (default and split) -->
<div class="btn-group">
<button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Small button
</button>
<div class="dropdown-menu">
...
</div>
</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-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
...
</div>
</div>Dropup විචලනය
මූල මූලද්‍රව්‍යයට එක් කිරීමෙන් මූලද්‍රව්‍යවලට ඉහළින් පතන මෙනු ක්‍රියාරම්භ .dropupකරන්න.
<!-- Default dropup button -->
<div class="btn-group dropup">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropup
</button>
<div class="dropdown-menu">
<!-- Dropdown menu links -->
</div>
</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-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<!-- Dropdown menu links -->
</div>
</div>ඩ්රොප්රයිට් විචලනය
මූල මූලද්‍රව්‍යයට එක් කිරීමෙන් මූලද්‍රව්‍යවල දකුණු පස ඇති පතන මෙනු ක්‍රියාරම්භ කරන්න .dropright.
<!-- Default dropright button -->
<div class="btn-group dropright">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropright
</button>
<div class="dropdown-menu">
<!-- Dropdown menu links -->
</div>
</div>
<!-- Split dropright button -->
<div class="btn-group dropright">
<button type="button" class="btn btn-secondary">
Split dropright
</button>
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle Dropright</span>
</button>
<div class="dropdown-menu">
<!-- Dropdown menu links -->
</div>
</div>බිංදු විචලනය
මූල මූලද්‍රව්‍යයට එක් කිරීමෙන් මූලද්‍රව්‍යවල වම්පස ඇති පතන මෙනු ක්‍රියාරම්භ .dropleftකරන්න.
<!-- Default dropleft button -->
<div class="btn-group dropleft">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropleft
</button>
<div class="dropdown-menu">
<!-- Dropdown menu links -->
</div>
</div>
<!-- Split dropleft button -->
<div class="btn-group">
<div class="btn-group dropleft" role="group">
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle Dropleft</span>
</button>
<div class="dropdown-menu">
<!-- Dropdown menu links -->
</div>
</div>
<button type="button" class="btn btn-secondary">
Split dropleft
</button>
</div>මෙනු අයිතම
ඓතිහාසිකව පතන මෙනු අන්තර්ගතයන් සබැඳි විය යුතු නමුත්, එය තවදුරටත් v4 සමඟ නොවේ. දැන් ඔබට s <button>වෙනුවට ඔබේ පතනවල ඇති මූලද්රව්ය විකල්ප වශයෙන් භාවිත කළ හැක <a>.
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenu2">
<button class="dropdown-item" type="button">Action</button>
<button class="dropdown-item" type="button">Another action</button>
<button class="dropdown-item" type="button">Something else here</button>
</div>
</div>මෙනු පෙළගැස්ම
පෙරනිමියෙන්, පතන මෙනුවක් ස්වයංක්‍රීයව 100% ඉහළ සිට එහි මාපිය වම් පැත්තේ ස්ථානගත වේ. පතන මෙනුව දකුණට පෙළගස්වීමට .dropdown-menu-righta වෙත එක් කරන්න ..dropdown-menu
දැනුම්දීම! පතන ස්ථාන Popper.js වලට ස්තුති වන්නට (ඒවා navbar එකක අඩංගු වන විට හැර).
<div class="btn-group">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Right-aligned menu
</button>
<div class="dropdown-menu dropdown-menu-right">
<button class="dropdown-item" type="button">Action</button>
<button class="dropdown-item" type="button">Another action</button>
<button class="dropdown-item" type="button">Something else here</button>
</div>
</div>මෙනු ශීර්ෂ
ඕනෑම පතන මෙනුවක ක්‍රියා කොටස් ලේබල් කිරීමට ශීර්ෂයක් එක් කරන්න.
<div class="dropdown-menu">
<h6 class="dropdown-header">Dropdown header</h6>
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
</div>මෙනු බෙදුම්කරුවන්
බෙදුම්කරුවෙකු සමඟ අදාළ මෙනු අයිතමවල කණ්ඩායම් වෙන් කරන්න.
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>මෙනු ආකෘති
පතන මෙනුවක් තුළ පෝරමයක් දමන්න, නැතහොත් එය පතන මෙනුවක් බවට පත් කරන්න, ඔබට අවශ්‍ය සෘණ ඉඩ ලබා දීමට ආන්තික හෝ පිරවුම් උපයෝගිතා භාවිතා කරන්න.
<div class="dropdown-menu">
<form class="px-4 py-3">
<div class="form-group">
<label for="exampleDropdownFormEmail1">Email address</label>
<input type="email" class="form-control" id="exampleDropdownFormEmail1" placeholder="[email protected]">
</div>
<div class="form-group">
<label for="exampleDropdownFormPassword1">Password</label>
<input type="password" class="form-control" id="exampleDropdownFormPassword1" placeholder="Password">
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="dropdownCheck">
<label class="form-check-label" for="dropdownCheck">
Remember me
</label>
</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="form-group">
<label for="exampleDropdownFormEmail2">Email address</label>
<input type="email" class="form-control" id="exampleDropdownFormEmail2" placeholder="[email protected]">
</div>
<div class="form-group">
<label for="exampleDropdownFormPassword2">Password</label>
<input type="password" class="form-control" id="exampleDropdownFormPassword2" placeholder="Password">
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="dropdownCheck2">
<label class="form-check-label" for="dropdownCheck2">
Remember me
</label>
</div>
<button type="submit" class="btn btn-primary">Sign in</button>
</form>ක්රියාකාරී මෙනු අයිතම
ඒවා සක්‍රිය ලෙස.active හැඩගැන්වීමට පතන තුළ ඇති අයිතමවලට එක් කරන්න .
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Regular link</a>
<a class="dropdown-item active" href="#">Active link</a>
<a class="dropdown-item" href="#">Another link</a>
</div>අබල කළ මෙනු අයිතම
ඒවා අක්‍රිය ලෙස.disabled හැඩගැන්වීමට පතන තුළ ඇති අයිතමවලට එක් කරන්න .
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Regular link</a>
<a class="dropdown-item disabled" href="#">Disabled link</a>
<a class="dropdown-item" href="#">Another link</a>
</div>භාවිතය
දත්ත ගුණාංග හෝ ජාවාස්ක්‍රිප්ට් හරහා, පතන ප්ලගිනය .showමාපිය ලැයිස්තු අයිතමයේ පන්තිය ටොගල් කිරීමෙන් සැඟවුණු අන්තර්ගතය (ඩ්‍රොප් ඩවුන් මෙනු) ටොගල් කරයි. යෙදුම් මට්ටමකින් පතන මෙනු වැසීම සඳහා data-toggle="dropdown"ගුණාංගය රඳා පවතී, එබැවින් එය සැමවිටම භාවිතා කිරීම හොඳ අදහසකි.
ස්පර්ශ-සක්‍රීය උපාංගවල, පතන විවෘත කිරීම මඟින් මූලද්‍රව්‍යයේ ක්ෂණික දරුවන්ට හිස් ( $.noop) හසුරුවන්නා එක් කරයි. මෙම පිළිගත හැකි අවලස්සන හැක් කිරීම iOS' සිදුවීම් නියෝජිතායතනයේ ඇති විකාරයක් වටා ක්‍රියා කිරීමට අවශ්‍ය වන අතර, එසේ නොමැතිනම් පහත වැටීමෙන් පිටත ඕනෑම තැනක තට්ටු කිරීමකින් පතන වැසීමේ කේතය ක්‍රියාරම්භ කිරීමෙන් වලක්වනු ඇත. පහත වැටීම වැසූ පසු, මෙම අතිරේක හිස් හසුරුවන්න ඉවත් කරනු ලැබේ.mouseover<body>mouseover
දත්ත ගුණාංග හරහා
data-toggle="dropdown"පතන ටොගල් කිරීමට සබැඳියකට හෝ බොත්තමකට එක් කරන්න .
<div class="dropdown">
<button id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown trigger
</button>
<div class="dropdown-menu" aria-labelledby="dLabel">
...
</div>
</div>JavaScript හරහා
JavaScript හරහා පතනයන් අමතන්න:
$('.dropdown-toggle').dropdown()data-toggle="dropdown"තවමත් අවශ්යයි
ඔබ ජාවාස්ක්‍රිප්ට් හරහා ඔබගේ පතන අමතා හෝ ඒ වෙනුවට ඩේටා-ඒපී භාවිතා කරන්නේද යන්න නොසලකා, data-toggle="dropdown"පතන ප්‍රේරක මූලද්‍රව්‍යයේ සැමවිටම සිටීම අවශ්‍ය වේ.
විකල්ප
දත්ත ගුණාංග හෝ JavaScript හරහා විකල්ප ලබා දිය හැක. දත්ත උපලක්ෂණ සඳහා, විකල්ප නාමය data-, ලෙසට එකතු කරන්න data-offset="".
| නම | ටයිප් කරන්න | පෙරනිමිය | විස්තර |
|---|---|---|---|
| ඕෆ්සෙට් | අංකය | තන්තුව | කාර්යය | 0 | එහි ඉලක්කයට සාපේක්ෂව පහත වැටීමේ ඕෆ්සෙට්. වැඩි විස්තර සඳහා Popper.js හි ඕෆ්සෙට් ලේඛන වෙත යොමු වන්න . |
| පෙරළන්න | බූලියන් | සැබෑ | යොමු මූලද්රව්ය මත අතිච්ඡාදනය වීමකදී Dropdown පෙරලීමට ඉඩ දෙන්න. වැඩි විස්තර සඳහා Popper.js හි flip docs වෙත යොමු වන්න . |
| මායිම | තන්තුව | මූලද්රව්යය | 'scrollParent' | පතන මෙනුවේ පිටාර ගැලීමේ සීමාව. 'viewport', 'window', 'scrollParent', හෝ HTMLElement යොමු (JavaScript පමණි) අගයන් පිළිගනී. වැඩි විස්තර සඳහා Popper.js's preventOverflow docs වෙත යොමු වන්න . |
boundaryහැර වෙනත් ඕනෑම අගයකට සකසා ඇති විට 'scrollParent', විලාසය position: staticබහාලුමට යොදන බව සලකන්න .dropdown.
ක්රම
| ක්රමය | විස්තර |
|---|---|
$().dropdown('toggle') |
දී ඇති navbar හෝ ටැබ් කළ සංචාලනයක පතන මෙනුව ටොගල් කරයි. |
$().dropdown('update') |
මූලද්‍රව්‍යයක පතන ස්ථානය යාවත්කාලීන කරයි. |
$().dropdown('dispose') |
මූලද්‍රව්‍යයක පහත වැටීම විනාශ කරයි. |
සිදුවීම්
.dropdown-menuසියලුම පතන සිදුවීම් ගේ මව් මූලද්රව්ය වෙත වෙඩි තබා ඇති අතර relatedTargetඑහි වටිනාකම ටොගල් නැංගුරම් මූලද්රව්යය වන දේපලක් ඇත.
| සිදුවීම | විස්තර |
|---|---|
show.bs.dropdown |
ප්‍රදර්ශන අවස්ථා ක්රමය හැඳින්වූ විට මෙම සිදුවීම වහාම ක්‍රියාත්මක වේ. |
shown.bs.dropdown |
පහත වැටීම පරිශීලකයාට දෘශ්‍යමාන කර ඇති විට මෙම සිදුවීම ක්‍රියාත්මක වේ (CSS සංක්‍රාන්ති, සම්පූර්ණ කිරීමට බලා සිටිනු ඇත). |
hide.bs.dropdown |
සඟවන අවස්ථා ක්රමය කැඳවූ විට මෙම සිදුවීම වහාම ක්‍රියාත්මක වේ. |
hidden.bs.dropdown |
පහත වැටීම පරිශීලකයාගෙන් සඟවා අවසන් වූ විට මෙම සිදුවීම වෙඩි තබා ඇත (CSS සංක්‍රාන්ති, සම්පූර්ණ කිරීමට බලා සිටිනු ඇත). |
$('#myDropdown').on('show.bs.dropdown', function () {
// do something…
})