ڈراپ ڈاؤن
بوٹسٹریپ ڈراپ ڈاؤن پلگ ان کے ساتھ لنکس اور مزید کی فہرستیں دکھانے کے لیے سیاق و سباق کے اوورلیز کو ٹوگل کریں۔
ڈراپ ڈاؤنز ٹوگل کیے جا سکتے ہیں، لنکس کی فہرستیں اور مزید ڈسپلے کرنے کے لیے سیاق و سباق سے متعلق اوورلیز۔ وہ شامل بوٹسٹریپ ڈراپ ڈاؤن جاوا اسکرپٹ پلگ ان کے ساتھ انٹرایکٹو بنائے گئے ہیں۔ وہ کلک کرنے سے ٹوگل ہوتے ہیں، منڈلا کر نہیں۔ یہ ایک جان بوجھ کر ڈیزائن کا فیصلہ ہے۔
ڈراپ ڈاؤنز تیسری پارٹی کی لائبریری، Popper.js پر بنائے گئے ہیں ، جو متحرک پوزیشننگ اور ویو پورٹ کا پتہ لگاتی ہے۔ Bootstrap کے JavaScript سے پہلے popper.min.js کو شامل کرنا یقینی بنائیں یا استعمال کریں bootstrap.bundle.min.js
/ bootstrap.bundle.js
جس میں Popper.js شامل ہو۔ Popper.js کا استعمال navbars میں ڈراپ ڈاؤن پوزیشن کے لیے نہیں کیا جاتا ہے حالانکہ متحرک پوزیشننگ کی ضرورت نہیں ہے۔
اگر آپ ہمارا جاوا اسکرپٹ ماخذ سے بنا رہے ہیں، تو اس کی ضرورت ہےutil.js
۔
WAI ARIA معیار ایک حقیقی role="menu"
ویجیٹ کی وضاحت کرتا ہے ، لیکن یہ ایپلیکیشن جیسے مینوز کے لیے مخصوص ہے جو اعمال یا افعال کو متحرک کرتے ہیں۔ ARIA مینو میں صرف مینو آئٹمز، چیک باکس مینو آئٹمز، ریڈیو بٹن مینو آئٹمز، ریڈیو بٹن گروپس، اور سب مینیو شامل ہو سکتے ہیں۔
دوسری طرف بوٹسٹریپ کے ڈراپ ڈاؤن کو عام اور مختلف حالات اور مارک اپ ڈھانچے پر لاگو کرنے کے لیے ڈیزائن کیا گیا ہے۔ مثال کے طور پر، ڈراپ ڈاؤنز بنانا ممکن ہے جس میں اضافی ان پٹ اور فارم کنٹرولز ہوں، جیسے کہ سرچ فیلڈز یا لاگ ان فارم۔ اس وجہ سے، بوٹسٹریپ حقیقی ARIA مینوز کے لیے درکار کسی بھی خصوصیت کی توقع نہیں کرتا (اور نہ ہی خود بخود شامل) role
۔ مصنفین کو یہ مزید مخصوص اوصاف خود شامل کرنا ہوں گے۔aria-
تاہم، بوٹسٹریپ زیادہ تر معیاری کی بورڈ مینو کے تعاملات کے لیے بلٹ ان سپورٹ شامل کرتا ہے، جیسے .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>
سب سے اچھی بات یہ ہے کہ آپ یہ کسی بھی بٹن ویرینٹ کے ساتھ بھی کر سکتے ہیں:
اسی طرح، اسپلٹ بٹن کے ڈراپ ڈاؤنز کو عملی طور پر سنگل بٹن ڈراپ ڈاؤن کی طرح ایک ہی مارک اپ کے ساتھ بنائیں، لیکن .dropdown-toggle-split
ڈراپ ڈاؤن کیریٹ کے ارد گرد مناسب جگہ کے اضافے کے ساتھ۔
ہم اس اضافی کلاس کا استعمال padding
کیریٹ کے دونوں طرف کے افقی کو 25% تک کم کرنے کے لیے کرتے ہیں اور اس کو ہٹاتے ہیں margin-left
جو باقاعدہ بٹن ڈراپ ڈاؤن کے لیے شامل کیا جاتا ہے۔ وہ اضافی تبدیلیاں کیریٹ کو اسپلٹ بٹن میں مرکوز رکھتی ہیں اور مین بٹن کے آگے زیادہ مناسب سائز کا ہٹ ایریا فراہم کرتی ہیں۔
بٹن ڈراپ ڈاؤن تمام سائز کے بٹنوں کے ساتھ کام کرتا ہے، بشمول ڈیفالٹ اور اسپلٹ ڈراپ ڈاؤن بٹن۔
.dropup
بنیادی عنصر میں شامل کر کے عناصر کے اوپر ڈراپ ڈاؤن مینو کو متحرک کریں ۔
.dropright
بنیادی عنصر میں شامل کر کے عناصر کے دائیں طرف ڈراپ ڈاؤن مینو کو متحرک کریں ۔
بنیادی عنصر میں شامل کرکے عناصر کے بائیں طرف ڈراپ ڈاؤن مینو کو متحرک .dropleft
کریں۔
تاریخی طور پر ڈراپ ڈاؤن مینو کے مشمولات کو لنکس ہونا چاہیے تھا ، لیکن اب 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-right
کرنے کے لیے a میں شامل کریں ۔.dropdown-menu
سنو! ڈراپ ڈاؤنز Popper.js کی بدولت پوزیشن میں ہیں (سوائے اس وقت جب وہ نیوبار میں موجود ہوں)۔
<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
ڈیٹا انتساب یا JavaScript کے ذریعے، ڈراپ ڈاؤن پلگ ان پیرنٹ لسٹ آئٹم پر کلاس کو ٹوگل کرکے پوشیدہ مواد (ڈراپ ڈاؤن مینوز) کو ٹوگل کرتا ہے ۔ ایپلیکیشن کی data-toggle="dropdown"
سطح پر ڈراپ ڈاؤن مینو کو بند کرنے کے لیے خصوصیت پر انحصار کیا جاتا ہے، اس لیے اسے ہمیشہ استعمال کرنا اچھا خیال ہے۔
ٹچ فعال آلات پر، ڈراپ ڈاؤن کھولنے سے عنصر کے فوری بچوں میں خالی ( $.noop
) mouseover
ہینڈلرز شامل ہو جاتے ہیں۔ <body>
یہ اعترافی طور پر بدصورت ہیک iOS کے ایونٹ ڈیلیگیشن میں ایک نرالا کام کرنے کے لیے ضروری ہے ، جو بصورت دیگر ڈراپ ڈاؤن کو بند کرنے والے کوڈ کو متحرک کرنے سے ڈراپ ڈاؤن کے باہر کہیں بھی ٹیپ کو روک دے گا۔ ڈراپ ڈاؤن بند ہونے کے بعد، یہ اضافی خالی mouseover
ہینڈلرز ہٹا دیے جاتے ہیں۔
data-toggle="dropdown"
ڈراپ ڈاؤن ٹوگل کرنے کے لیے کسی لنک یا بٹن میں شامل کریں ۔
جاوا اسکرپٹ کے ذریعے ڈراپ ڈاؤن کو کال کریں:
data-toggle="dropdown"
اب بھی ضرورت ہے
اس سے قطع نظر کہ آپ اپنے ڈراپ ڈاؤن کو JavaScript کے ذریعے کال کرتے ہیں یا اس کے بجائے ڈیٹا-api استعمال کرتے ہیں، data-toggle="dropdown"
ہمیشہ ڈراپ ڈاؤن کے محرک عنصر پر موجود ہونا ضروری ہے۔
اختیارات کو ڈیٹا انتساب یا JavaScript کے ذریعے منتقل کیا جا سکتا ہے۔ ڈیٹا کی خصوصیات کے لیے، آپشن کا نام شامل کریں data-
، جیسا کہ میں data-offset=""
۔
نام | قسم | طے شدہ | تفصیل |
---|---|---|---|
آفسیٹ | نمبر | تار | فنکشن | 0 | اس کے ہدف کے نسبت ڈراپ ڈاؤن کا آفسیٹ۔ مزید معلومات کے لیے Popper.js کے آفسیٹ دستاویزات سے رجوع کریں ۔ |
پلٹائیں | بولین | سچ ہے | حوالہ عنصر پر اوورلیپنگ کی صورت میں ڈراپ ڈاؤن کو پلٹنے کی اجازت دیں۔ مزید معلومات کے لیے Popper.js کی فلپ دستاویزات دیکھیں ۔ |
حد | تار | عنصر | 'اسکرول پیرنٹ' | ڈراپ ڈاؤن مینو کی اوور فلو رکاوٹ کی حد۔ 'viewport' , 'window' , 'scrollParent' , یا HTMLElement حوالہ (صرف JavaScript) کی اقدار کو قبول کرتا ہے ۔ مزید معلومات کے لیے Popper.js کی روک تھام اوور فلو دستاویزات دیکھیں ۔ |
نوٹ کریں کہ جب boundary
اس کے علاوہ کسی بھی قدر پر سیٹ کیا جاتا ہے 'scrollParent'
، تو اسٹائل کنٹینر position: static
پر لاگو ہوتا ہے ۔.dropdown
طریقہ | تفصیل |
---|---|
$().dropdown('toggle') |
دیئے گئے نیوی بار یا ٹیب شدہ نیویگیشن کے ڈراپ ڈاؤن مینو کو ٹوگل کرتا ہے۔ |
$().dropdown('update') |
کسی عنصر کے ڈراپ ڈاؤن کی پوزیشن کو اپ ڈیٹ کرتا ہے۔ |
$().dropdown('dispose') |
ایک عنصر کے ڈراپ ڈاؤن کو تباہ کرتا ہے۔ |
تمام ڈراپ ڈاؤن ایونٹس کے بنیادی عنصر پر فائر کیے جاتے ہیں .dropdown-menu
اور ان کی ایک relatedTarget
خاصیت ہوتی ہے، جس کی قدر ٹوگلنگ اینکر عنصر ہوتی ہے۔
تقریب | تفصیل |
---|---|
show.bs.dropdown |
جب شو مثال کا طریقہ بلایا جاتا ہے تو یہ واقعہ فوراً فائر ہوجاتا ہے۔ |
shown.bs.dropdown |
یہ ایونٹ اس وقت برطرف ہو جاتا ہے جب ڈراپ ڈاؤن صارف کے لیے مرئی ہو جاتا ہے (CSS ٹرانزیشن کے مکمل ہونے کا انتظار کرے گا)۔ |
hide.bs.dropdown |
اس واقعہ کو فوری طور پر برطرف کر دیا جاتا ہے جب چھپائیں مثال کے طریقے کو بلایا جاتا ہے۔ |
hidden.bs.dropdown |
یہ ایونٹ اس وقت فائر کیا جاتا ہے جب ڈراپ ڈاؤن صارف سے پوشیدہ ہو جاتا ہے (CSS ٹرانزیشن کے مکمل ہونے کا انتظار کریں گے)۔ |