ڈراپ ڈاؤن

بوٹسٹریپ ڈراپ ڈاؤن پلگ ان کے ساتھ لنکس اور مزید کی فہرستیں دکھانے کے لیے سیاق و سباق کے اوورلیز کو ٹوگل کریں۔

جائزہ

ڈراپ ڈاؤنز ٹوگل کیے جا سکتے ہیں، لنکس کی فہرستیں اور مزید ڈسپلے کرنے کے لیے سیاق و سباق سے متعلق اوورلیز۔ وہ شامل بوٹسٹریپ ڈراپ ڈاؤن جاوا اسکرپٹ پلگ ان کے ساتھ انٹرایکٹو بنائے گئے ہیں۔ وہ کلک کرنے سے ٹوگل ہوتے ہیں، منڈلا کر نہیں۔ یہ ایک جان بوجھ کر ڈیزائن کا فیصلہ ہے۔

ڈراپ ڈاؤنز تیسری پارٹی کی لائبریری، 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">
  <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بنیادی عنصر میں شامل کر کے عناصر کے اوپر ڈراپ ڈاؤن مینو کو متحرک کریں ۔

<!-- 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>

آپ نان انٹرایکٹو ڈراپ ڈاؤن آئٹمز بھی بنا سکتے ہیں .dropdown-item-text۔ اپنی مرضی کے مطابق CSS یا ٹیکسٹ یوٹیلیٹیز کے ساتھ مزید اسٹائل کرنے کے لیے آزاد محسوس کریں۔

<div class="dropdown-menu">
  <span class="dropdown-item-text">Dropdown item text</span>
  <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>

فعال

.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="#" tabindex="-1" aria-disabled="true">Disabled link</a>
  <a class="dropdown-item" href="#">Another link</a>
</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>

ذمہ دار سیدھ

اگر آپ ریسپانسیو الائنمنٹ استعمال کرنا چاہتے ہیں تو انتساب کو شامل کرکے ڈائنامک پوزیشننگ کو غیر فعال data-display="static"کریں اور ریسپانسیو ویری ایشن کلاسز استعمال کریں۔

ڈراپ ڈاؤن مینو کو دیے گئے بریک پوائنٹ یا اس سے بڑے کے ساتھ دائیں سیدھ میں لانے کے لیے، شامل کریں .dropdown-menu{-sm|-md|-lg|-xl}-right۔

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" data-display="static" aria-haspopup="true" aria-expanded="false">
    Left-aligned but right aligned when large screen
  </button>
  <div class="dropdown-menu dropdown-menu-lg-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>

ڈراپ ڈاؤن مینو کو دیے گئے بریک پوائنٹ یا اس سے بڑے کے ساتھ سیدھ میں کرنے کے لیے، شامل کریں .dropdown-menu-rightاور .dropdown-menu{-sm|-md|-lg|-xl}-left۔

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" data-display="static" aria-haspopup="true" aria-expanded="false">
    Right-aligned but left aligned when large screen
  </button>
  <div class="dropdown-menu dropdown-menu-right dropdown-menu-lg-left">
    <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>

نوٹ کریں کہ آپ کو navbars میں ڈراپ ڈاؤن بٹنوں میں کوئی خاصیت شامل کرنے کی ضرورت نہیں ہے data-display="static"، کیونکہ Popper.js navbars میں استعمال نہیں ہوتا ہے۔

ہیڈرز

کسی بھی ڈراپ ڈاؤن مینو میں کارروائیوں کے سیکشن کو لیبل کرنے کے لیے ایک ہیڈر شامل کریں۔

<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 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="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-group">
      <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="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-group">
    <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-offsetیا data-referenceڈراپ ڈاؤن کا مقام تبدیل کریں۔

<div class="d-flex">
  <div class="dropdown mr-1">
    <button type="button" class="btn btn-secondary dropdown-toggle" id="dropdownMenuOffset" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-offset="10,20">
      Offset
    </button>
    <div class="dropdown-menu" aria-labelledby="dropdownMenuOffset">
      <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>
  <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-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-reference="parent">
      <span class="sr-only">Toggle Dropdown</span>
    </button>
    <div class="dropdown-menu" aria-labelledby="dropdownMenuReference">
      <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>
</div>

استعمال

.showڈیٹا انتساب یا JavaScript کے ذریعے، ڈراپ ڈاؤن پلگ ان پیرنٹ لسٹ آئٹم پر کلاس کو ٹوگل کرکے پوشیدہ مواد (ڈراپ ڈاؤن مینوز) کو ٹوگل کرتا ہے ۔ ایپلیکیشن کی data-toggle="dropdown"سطح پر ڈراپ ڈاؤن مینو کو بند کرنے کے لیے خصوصیت پر انحصار کیا جاتا ہے، اس لیے اسے ہمیشہ استعمال کرنا اچھا خیال ہے۔

ٹچ فعال آلات پر، ڈراپ ڈاؤن کھولنے سے عنصر کے فوری بچوں میں خالی ( $.noop) mouseoverہینڈلرز شامل ہو جاتے ہیں۔ <body>یہ اعترافی طور پر بدصورت ہیک iOS کے ایونٹ ڈیلیگیشن میں ایک نرالا کام کرنے کے لیے ضروری ہے ، جو بصورت دیگر ڈراپ ڈاؤن کو بند کرنے والے کوڈ کو متحرک کرنے سے ڈراپ ڈاؤن کے باہر کہیں بھی ٹیپ کو روک دے گا۔ ڈراپ ڈاؤن بند ہونے کے بعد، یہ اضافی خالی 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>

جاوا اسکرپٹ کے ذریعے

جاوا اسکرپٹ کے ذریعے ڈراپ ڈاؤن کو کال کریں:

$('.dropdown-toggle').dropdown()

`data-toggle="dropdown"`اب بھی ضرورت ہے

اس سے قطع نظر کہ آپ اپنے ڈراپ ڈاؤن کو JavaScript کے ذریعے کال کرتے ہیں یا اس کے بجائے ڈیٹا-api استعمال کرتے ہیں، data-toggle="dropdown"ہمیشہ ڈراپ ڈاؤن کے محرک عنصر پر موجود ہونا ضروری ہے۔

اختیارات

اختیارات کو ڈیٹا انتساب یا JavaScript کے ذریعے منتقل کیا جا سکتا ہے۔ ڈیٹا کی خصوصیات کے لیے، آپشن کا نام شامل کریں data-، جیسا کہ میں data-offset=""۔

نام	قسم	طے شدہ	تفصیل
آفسیٹ	نمبر \| تار \| فنکشن	0	اس کے ہدف کے نسبت ڈراپ ڈاؤن کا آفسیٹ۔ جب کسی فنکشن کو آفسیٹ کا تعین کرنے کے لیے استعمال کیا جاتا ہے، تو اسے پہلی دلیل کے طور پر آفسیٹ ڈیٹا پر مشتمل آبجیکٹ کے ساتھ بلایا جاتا ہے۔ فنکشن کو ایک ہی ساخت کے ساتھ ایک آبجیکٹ کو لوٹانا چاہیے۔ محرک عنصر DOM نوڈ کو دوسری دلیل کے طور پر پاس کیا جاتا ہے۔ مزید معلومات کے لیے Popper.js کے آفسیٹ دستاویزات سے رجوع کریں ۔
پلٹائیں	بولین	سچ ہے	حوالہ عنصر پر اوورلیپنگ کی صورت میں ڈراپ ڈاؤن کو پلٹنے کی اجازت دیں۔ مزید معلومات کے لیے Popper.js کی فلپ دستاویزات دیکھیں ۔
حد	تار \| عنصر	'اسکرول پیرنٹ'	ڈراپ ڈاؤن مینو کی اوور فلو رکاوٹ کی حد۔ `'viewport'`, `'window'`, `'scrollParent'`, یا HTMLElement حوالہ (صرف JavaScript) کی اقدار کو قبول کرتا ہے ۔ مزید معلومات کے لیے Popper.js کی روک تھام اوور فلو دستاویزات دیکھیں ۔
حوالہ	تار \| عنصر	'ٹوگل'	ڈراپ ڈاؤن مینو کا حوالہ عنصر۔ `'toggle'`, `'parent'`, یا HTMLElement حوالہ کی اقدار کو قبول کرتا ہے ۔ مزید معلومات کے لیے Popper.js کے referenceObject docs سے رجوع کریں ۔
ڈسپلے	تار	'متحرک'	پہلے سے طے شدہ طور پر، ہم متحرک پوزیشننگ کے لیے Popper.js استعمال کرتے ہیں۔ کے ساتھ اسے غیر فعال کریں `static`۔
popperConfig	null \| چیز	خالی	Bootstrap کی ڈیفالٹ Popper.js کنفیگریشن کو تبدیل کرنے کے لیے، Popper.js کی ترتیب دیکھیں

نوٹ کریں کہ جب boundaryاس کے علاوہ کسی بھی قدر پر سیٹ کیا جاتا ہے 'scrollParent'، تو اسٹائل کنٹینر position: staticپر لاگو ہوتا ہے ۔.dropdown

طریقے

طریقہ	تفصیل
`$().dropdown('toggle')`	دیئے گئے نیوی بار یا ٹیب شدہ نیویگیشن کے ڈراپ ڈاؤن مینو کو ٹوگل کرتا ہے۔
`$().dropdown('show')`	دیئے گئے نیوبار یا ٹیب شدہ نیویگیشن کا ڈراپ ڈاؤن مینو دکھاتا ہے۔
`$().dropdown('hide')`	دیئے گئے نیوبار یا ٹیب شدہ نیویگیشن کے ڈراپ ڈاؤن مینو کو چھپاتا ہے۔
`$().dropdown('update')`	کسی عنصر کے ڈراپ ڈاؤن کی پوزیشن کو اپ ڈیٹ کرتا ہے۔
`$().dropdown('dispose')`	ایک عنصر کے ڈراپ ڈاؤن کو تباہ کرتا ہے۔

تقریبات

تمام ڈراپ ڈاؤن ایونٹس کے بنیادی عنصر پر فائر کیے جاتے ہیں .dropdown-menuاور ان کی ایک relatedTargetخاصیت ہوتی ہے، جس کی قدر ٹوگلنگ اینکر عنصر ہوتی ہے۔ hide.bs.dropdownاور hidden.bs.dropdownایونٹس کی ایک clickEventخاصیت ہوتی ہے (صرف اس صورت میں جب اصل واقعہ کی قسم click) جس میں کلک ایونٹ کے لیے ایک ایونٹ آبجیکٹ ہوتا ہے۔

تقریب	تفصیل
`show.bs.dropdown`	جب شو مثال کا طریقہ بلایا جاتا ہے تو یہ واقعہ فوراً فائر ہوجاتا ہے۔
`shown.bs.dropdown`	یہ ایونٹ اس وقت برطرف ہو جاتا ہے جب ڈراپ ڈاؤن صارف کے لیے مرئی ہو جاتا ہے (CSS ٹرانزیشن کے مکمل ہونے کا انتظار کرے گا)۔
`hide.bs.dropdown`	اس واقعہ کو فوری طور پر برطرف کر دیا جاتا ہے جب چھپائیں مثال کے طریقے کو بلایا جاتا ہے۔
`hidden.bs.dropdown`	یہ ایونٹ اس وقت فائر کیا جاتا ہے جب ڈراپ ڈاؤن صارف سے پوشیدہ ہو جاتا ہے (CSS ٹرانزیشن کے مکمل ہونے کا انتظار کریں گے)۔

$('#myDropdown').on('show.bs.dropdown', function () {
  // do something...
})

ڈراپ ڈاؤن

جائزہ

رسائی

مثالیں

سنگل بٹن

بٹن تقسیم کریں۔

سائز کرنا

ہدایات

ڈراپ اپ

ڈراپ رائٹ

قطرہ

مینو آئٹمز

فعال

معذور

مینو کی سیدھ

ذمہ دار سیدھ

مینو کا مواد

ہیڈرز

تقسیم کرنے والے

متن

فارمز

استعمال

ڈیٹا اوصاف کے ذریعے

جاوا اسکرپٹ کے ذریعے

`data-toggle="dropdown"`اب بھی ضرورت ہے

اختیارات

طریقے

تقریبات

ڈراپ ڈاؤن

جائزہ

رسائی

مثالیں

سنگل بٹن

بٹن تقسیم کریں۔

سائز کرنا

ہدایات

ڈراپ اپ

ڈراپ رائٹ

قطرہ

مینو آئٹمز

فعال

معذور

مینو کی سیدھ

ذمہ دار سیدھ

مینو کا مواد

ہیڈرز

ڈراپ ڈاؤن ہیڈر

تقسیم کرنے والے

متن

فارمز