ڈراپ ڈاؤن
بوٹسٹریپ ڈراپ ڈاؤن پلگ ان کے ساتھ لنکس اور مزید کی فہرستیں دکھانے کے لیے سیاق و سباق کے اوورلیز کو ٹوگل کریں۔
جائزہ
ڈراپ ڈاؤنز ٹوگل کیے جا سکتے ہیں، لنکس کی فہرستیں اور مزید ڈسپلے کرنے کے لیے سیاق و سباق سے متعلق اوورلیز۔ وہ شامل بوٹسٹریپ ڈراپ ڈاؤن جاوا اسکرپٹ پلگ ان کے ساتھ انٹرایکٹو بنائے گئے ہیں۔ وہ کلک کرنے سے ٹوگل ہوتے ہیں، منڈلا کر نہیں۔ یہ ایک جان بوجھ کر ڈیزائن کا فیصلہ ہے۔
ڈراپ ڈاؤنز تیسری پارٹی کی لائبریری، Popper پر بنائے گئے ہیں ، جو متحرک پوزیشننگ اور ویو پورٹ کا پتہ لگاتی ہے۔ بوٹسٹریپ کے جاوا اسکرپٹ سے پہلے popper.min.js کو شامل کرنا یقینی بنائیں یا استعمال کریں bootstrap.bundle.min.js
/ bootstrap.bundle.js
جس میں Popper شامل ہو۔ پوپر کا استعمال navbars میں ڈراپ ڈاؤن پوزیشن کے لیے نہیں کیا جاتا ہے حالانکہ متحرک پوزیشننگ کی ضرورت نہیں ہے۔
رسائی
WAI ARIA معیار ایک حقیقی role="menu"
ویجیٹ کی وضاحت کرتا ہے ، لیکن یہ ایپلیکیشن جیسے مینوز کے لیے مخصوص ہے جو اعمال یا افعال کو متحرک کرتے ہیں۔ ARIA مینو میں صرف مینو آئٹمز، چیک باکس مینو آئٹمز، ریڈیو بٹن مینو آئٹمز، ریڈیو بٹن گروپس، اور سب مینیو شامل ہو سکتے ہیں۔
دوسری طرف بوٹسٹریپ کے ڈراپ ڈاؤن کو عام اور مختلف حالات اور مارک اپ ڈھانچے پر لاگو کرنے کے لیے ڈیزائن کیا گیا ہے۔ مثال کے طور پر، ڈراپ ڈاؤنز بنانا ممکن ہے جس میں اضافی ان پٹ اور فارم کنٹرولز ہوں، جیسے کہ سرچ فیلڈز یا لاگ ان فارم۔ اس وجہ سے، بوٹسٹریپ حقیقی ARIA مینوز کے لیے درکار کسی بھی خصوصیت کی توقع نہیں کرتا (اور نہ ہی خود بخود شامل) role
۔ مصنفین کو یہ مزید مخصوص اوصاف خود شامل کرنا ہوں گے۔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" 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>
نوٹ کریں کہ آپ کو navbars میں ڈراپ ڈاؤن بٹنوں میں کوئی خاصیت شامل کرنے کی ضرورت نہیں ہے 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;
سی ایس ایس پر مبنی کیریٹس کے متغیرات جو ڈراپ ڈاؤن کی تعامل کی نشاندہی کرتے ہیں:
$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>
جاوا اسکرپٹ کے ذریعے
جاوا اسکرپٹ کے ذریعے ڈراپ ڈاؤن کو کال کریں:
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' |
ڈراپ ڈاؤن مینو کی اوور فلو رکاوٹ کی حد (صرف پوپر کے روکنے والے اوور فلو موڈیفائر پر لاگو ہوتا ہے)۔ پہلے سے طے شدہ طور پر یہ 'clippingParents' ایک HTMLElement حوالہ (صرف JavaScript کے ذریعے) ہے اور قبول کر سکتا ہے۔ مزید معلومات کے لیے Popper's detectOverflow docs دیکھیں ۔ |
reference |
تار | عنصر | چیز | 'toggle' |
ڈراپ ڈاؤن مینو کا حوالہ عنصر۔ 'toggle' , 'parent' , HTMLElement حوالہ یا فراہم کرنے والی کسی چیز کی اقدار کو قبول کرتا getBoundingClientRect ہے۔ مزید معلومات کے لیے Popper's constructor docs اور ورچوئل ایلیمینٹ دستاویزات دیکھیں ۔ |
display |
تار | 'dynamic' |
پہلے سے طے شدہ طور پر، ہم متحرک پوزیشننگ کے لیے Popper استعمال کرتے ہیں۔ کے ساتھ اسے غیر فعال کریں static ۔ |
offset |
صف | تار | فنکشن | [0, 2] |
اس کے ہدف کے نسبت ڈراپ ڈاؤن کا آفسیٹ۔ آپ کوما سے الگ کردہ اقدار کے ساتھ ڈیٹا کی خصوصیات میں ایک سٹرنگ پاس کر سکتے ہیں جیسے: جب کوئی فنکشن آفسیٹ کا تعین کرنے کے لیے استعمال کیا جاتا ہے، تو اسے ایک ایسی چیز کے ساتھ بلایا جاتا ہے جس میں پاپر پلیسمنٹ، حوالہ، اور پاپر اس کی پہلی دلیل کے طور پر رییکٹ کرتا ہے۔ محرک عنصر DOM نوڈ کو دوسری دلیل کے طور پر پاس کیا جاتا ہے۔ فنکشن کو دو نمبروں کے ساتھ ایک صف واپس کرنی چاہیے: ۔ مزید معلومات کے لیے Popper کی آفسیٹ دستاویزات دیکھیں ۔ |
autoClose |
بولین | تار | true |
ڈراپ ڈاؤن کے آٹو کلوز رویے کو ترتیب دیں:
|
popperConfig |
null | اعتراض | فنکشن | null |
Bootstrap کی ڈیفالٹ Popper config کو تبدیل کرنے کے لیے، 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...
})