ഡ്രോപ്പ്ഡൗണുകൾ

ബൂട്ട്‌സ്‌ട്രാപ്പ് ഡ്രോപ്പ്‌ഡൗൺ പ്ലഗിൻ ഉപയോഗിച്ച് ലിങ്കുകളുടെയും മറ്റും ലിസ്റ്റുകൾ പ്രദർശിപ്പിക്കുന്നതിന് സന്ദർഭോചിതമായ ഓവർലേകൾ ടോഗിൾ ചെയ്യുക.

ഈ പേജിൽ

അവലോകനം

ഡ്രോപ്പ്ഡൗണുകൾ ടോഗിൾ ചെയ്യാവുന്നതും ലിങ്കുകളുടെ ലിസ്റ്റുകളും മറ്റും പ്രദർശിപ്പിക്കുന്നതിനുള്ള സന്ദർഭോചിതമായ ഓവർലേകളാണ്. ഉൾപ്പെടുത്തിയിരിക്കുന്ന ബൂട്ട്‌സ്‌ട്രാപ്പ് ഡ്രോപ്പ്‌ഡൗൺ ജാവാസ്‌ക്രിപ്റ്റ് പ്ലഗിനുമായി അവ സംവേദനാത്മകമാക്കിയിരിക്കുന്നു. അവ ക്ലിക്കുചെയ്യുന്നതിലൂടെയാണ് ടോഗിൾ ചെയ്യുന്നത്, ഹോവർ ചെയ്തല്ല; ഇതൊരു ആസൂത്രിത ഡിസൈൻ തീരുമാനമാണ് .

ഡൈനാമിക് പൊസിഷനിംഗും വ്യൂപോർട്ട് കണ്ടെത്തലും പ്രദാനം ചെയ്യുന്ന പോപ്പർ എന്ന മൂന്നാം കക്ഷി ലൈബ്രറിയിലാണ് ഡ്രോപ്പ്ഡൗണുകൾ നിർമ്മിച്ചിരിക്കുന്നത് . ബൂട്ട്‌സ്‌ട്രാപ്പിന്റെ JavaScript-ന് മുമ്പ് popper.min.js ഉൾപ്പെടുത്തുന്നത് ഉറപ്പാക്കുക അല്ലെങ്കിൽ പോപ്പർ അടങ്ങിയിരിക്കുന്ന bootstrap.bundle.min.js/ ഉപയോഗിക്കുക. bootstrap.bundle.jsഡൈനാമിക് പൊസിഷനിംഗ് ആവശ്യമില്ലെങ്കിലും നാവ്ബാറുകളിൽ ഡ്രോപ്പ്ഡൗണുകൾ സ്ഥാപിക്കാൻ പോപ്പർ ഉപയോഗിക്കാറില്ല.

പ്രവേശനക്ഷമത

WAI ARIA സ്റ്റാൻഡേർഡ് ഒരു യഥാർത്ഥ role="menu"വിജറ്റ് നിർവചിക്കുന്നു , എന്നാൽ ഇത് പ്രവർത്തനങ്ങളോ പ്രവർത്തനങ്ങളോ ട്രിഗർ ചെയ്യുന്ന ആപ്ലിക്കേഷൻ പോലുള്ള മെനുകൾക്ക് പ്രത്യേകമാണ്. ARIA മെനുകളിൽ മെനു ഇനങ്ങൾ, ചെക്ക്‌ബോക്‌സ് മെനു ഇനങ്ങൾ, റേഡിയോ ബട്ടൺ മെനു ഇനങ്ങൾ, റേഡിയോ ബട്ടൺ ഗ്രൂപ്പുകൾ, ഉപമെനുകൾ എന്നിവ മാത്രമേ ഉൾക്കൊള്ളാൻ കഴിയൂ.

മറുവശത്ത്, ബൂട്ട്‌സ്‌ട്രാപ്പിന്റെ ഡ്രോപ്പ്‌ഡൗണുകൾ രൂപകൽപ്പന ചെയ്‌തിരിക്കുന്നത് പൊതുവായതും വിവിധ സാഹചര്യങ്ങൾക്കും മാർക്ക്അപ്പ് ഘടനകൾക്കും ബാധകവുമാണ്. ഉദാഹരണത്തിന്, തിരയൽ ഫീൽഡുകൾ അല്ലെങ്കിൽ ലോഗിൻ ഫോമുകൾ പോലുള്ള അധിക ഇൻപുട്ടുകളും ഫോം നിയന്ത്രണങ്ങളും അടങ്ങുന്ന ഡ്രോപ്പ്ഡൌണുകൾ സൃഷ്ടിക്കാൻ സാധിക്കും. ഇക്കാരണത്താൽ, യഥാർത്ഥ ARIA മെനുകൾക്ക് ആവശ്യമായ ആട്രിബ്യൂട്ടുകളൊന്നും ബൂട്ട്സ്ട്രാപ്പ് പ്രതീക്ഷിക്കുന്നില്ല (അല്ലെങ്കിൽ roleസ്വയമേവ ചേർക്കുന്നില്ല ) aria-. രചയിതാക്കൾ ഈ കൂടുതൽ നിർദ്ദിഷ്ട ആട്രിബ്യൂട്ടുകൾ സ്വയം ഉൾപ്പെടുത്തേണ്ടതുണ്ട്.

.dropdown-itemഎന്നിരുന്നാലും, കഴ്‌സർ കീകൾ ഉപയോഗിച്ച് വ്യക്തിഗത ഘടകങ്ങളിലൂടെ നീങ്ങാനും കീ ഉപയോഗിച്ച് മെനു അടയ്ക്കാനുമുള്ള കഴിവ് പോലുള്ള മിക്ക സ്റ്റാൻഡേർഡ് കീബോർഡ് മെനു ഇടപെടലുകൾക്കും ബൂട്ട്‌സ്‌ട്രാപ്പ് അന്തർനിർമ്മിത പിന്തുണ ചേർക്കുന്നു ESC.

ഉദാഹരണങ്ങൾ

ഡ്രോപ്പ്‌ഡൗണിന്റെ ടോഗിളും (നിങ്ങളുടെ ബട്ടൺ അല്ലെങ്കിൽ ലിങ്ക്) ഡ്രോപ്പ്‌ഡൗൺ മെനുവും .dropdownഅല്ലെങ്കിൽ പ്രഖ്യാപിക്കുന്ന മറ്റൊരു ഘടകവും പൊതിയുക position: relative;. നിങ്ങളുടെ സാധ്യതയുള്ള ആവശ്യങ്ങൾക്ക് അനുയോജ്യമായ രീതിയിൽ ഡ്രോപ്പ്ഡൗണുകൾ <a>അല്ലെങ്കിൽ ഘടകങ്ങളിൽ നിന്ന് ട്രിഗർ ചെയ്യാവുന്നതാണ് . <button>ഇവിടെ കാണിച്ചിരിക്കുന്ന ഉദാഹരണങ്ങൾ <ul>ഉചിതമായ ഇടങ്ങളിൽ സെമാന്റിക് ഘടകങ്ങൾ ഉപയോഗിക്കുന്നു, എന്നാൽ ഇഷ്‌ടാനുസൃത മാർക്ക്അപ്പ് പിന്തുണയ്ക്കുന്നു.

ഒറ്റ ബട്ടൺ

ചില മാർക്ക്അപ്പ് മാറ്റങ്ങളോടെ ഏതൊരു .btnസിംഗിളും ഒരു ഡ്രോപ്പ്ഡൗൺ ടോഗിൾ ആക്കി മാറ്റാം. <button>ഏതെങ്കിലും ഘടകങ്ങളുമായി പ്രവർത്തിക്കാൻ നിങ്ങൾക്ക് അവ എങ്ങനെ നൽകാമെന്നത് ഇതാ :

html

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown button
  </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>
  </ul>
</div>

കൂടാതെ <a>ഘടകങ്ങൾക്കൊപ്പം:

html

<div class="dropdown">
  <a class="btn btn-secondary dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown link
  </a>

  <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>
  </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. ഡ്രോപ്പ്ഡൗൺ ഇനങ്ങളിൽ മാറ്റങ്ങളൊന്നും ആവശ്യമില്ല.

html

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown button
  </button>
  <ul class="dropdown-menu dropdown-menu-dark">
    <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>

ഒരു navbar-ൽ ഇത് ഉപയോഗപ്പെടുത്തുന്നു:

html

<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="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown
          </a>
          <ul class="dropdown-menu dropdown-menu-dark">
            <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വലതുവശത്ത് ദൃശ്യമാകും.

കേന്ദ്രീകരിച്ചു

.dropdown-centerപാരന്റ് എലമെന്റിൽ ടോഗിൾ ചെയ്യുന്നതിന് താഴെയായി ഡ്രോപ്പ്ഡൗൺ മെനു ഉണ്ടാക്കുക .

html

<div class="dropdown-center">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Centered dropdown
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Action two</a></li>
    <li><a class="dropdown-item" href="#">Action three</a></li>
  </ul>
</div>

ഉപേക്ഷിക്കുക

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

ഡ്രോപ്പ്അപ്പ് കേന്ദ്രീകരിച്ചു

.dropup-centerപാരന്റ് എലമെന്റിൽ ടോഗിൾ ചെയ്യുന്നതിന് മുകളിൽ മധ്യഭാഗത്തായി ഡ്രോപ്പ് മെനു ഉണ്ടാക്കുക .

html

<div class="dropup-center dropup">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Centered dropup
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Action two</a></li>
    <li><a class="dropdown-item" href="#">Action three</a></li>
  </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">
    Dropend
  </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 Dropend</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 dropstart">
  <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>
  <button type="button" class="btn btn-secondary">
    Split dropstart
  </button>
</div>

നിങ്ങൾക്ക് ഡ്രോപ്പ്ഡൗൺ ഇനങ്ങളായി <a>അല്ലെങ്കിൽ ഘടകങ്ങൾ ഉപയോഗിക്കാം.<button>

html

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown
  </button>
  <ul class="dropdown-menu">
    <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 അല്ലെങ്കിൽ ടെക്‌സ്‌റ്റ് യൂട്ടിലിറ്റികൾ ഉപയോഗിച്ച് കൂടുതൽ സ്‌റ്റൈൽ ചെയ്യാൻ മടിക്കേണ്ടതില്ല.

html

<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ഒരു സെറ്റിലെ നിലവിലെ ഇനത്തിന്.

html

<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ഡ്രോപ്പ്‌ഡൗണിലെ ഇനങ്ങൾ അപ്രാപ്‌തമാക്കിയതായി സ്‌റ്റൈൽ ചെയ്യാൻ അവയിലേക്ക് ചേർക്കുക .

html

<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-enda ലേക്ക് ചേർക്കുക . .dropdown-menuRTL-ൽ ബൂട്ട്‌സ്‌ട്രാപ്പ് ഉപയോഗിക്കുമ്പോൾ ദിശകൾ മിറർ ചെയ്യുന്നു, അർത്ഥം .dropdown-menu-endഇടതുവശത്ത് ദൃശ്യമാകും.

ഹെഡ്സ് അപ്പുകൾ! ഡ്രോപ്പ്ഡൗണുകൾ ഒരു നവബാറിൽ അടങ്ങിയിരിക്കുന്നതൊഴിച്ചാൽ പോപ്പറിന് നന്ദി പറയുന്നു.

html

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

html

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

html

<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"നവബാറുകളിൽ പോപ്പർ ഉപയോഗിക്കാത്തതിനാൽ, നവബാറുകളിലെ ഡ്രോപ്പ്ഡൗൺ ബട്ടണുകളിലേക്ക് നിങ്ങൾ ഒരു ആട്രിബ്യൂട്ട് ചേർക്കേണ്ടതില്ലെന്ന കാര്യം ശ്രദ്ധിക്കുക .

വിന്യാസ ഓപ്ഷനുകൾ

മുകളിൽ കാണിച്ചിരിക്കുന്ന മിക്ക ഓപ്ഷനുകളും എടുത്ത്, ഒരിടത്ത് വിവിധ ഡ്രോപ്പ്ഡൗൺ അലൈൻമെന്റ് ഓപ്ഷനുകളുടെ ഒരു ചെറിയ കിച്ചൺ സിങ്ക് ഡെമോ ഇതാ.

html

<div class="btn-group">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown
  </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">
  <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>

തലക്കെട്ടുകൾ

ഏതെങ്കിലും ഡ്രോപ്പ്ഡൗൺ മെനുവിലെ പ്രവർത്തനങ്ങളുടെ വിഭാഗങ്ങൾ ലേബൽ ചെയ്യുന്നതിന് ഒരു തലക്കെട്ട് ചേർക്കുക.

html

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

ഡിവൈഡറുകൾ

ഒരു ഡിവൈഡർ ഉപയോഗിച്ച് അനുബന്ധ മെനു ഇനങ്ങളുടെ പ്രത്യേക ഗ്രൂപ്പുകൾ.

html

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

വാചകം

ഒരു ഡ്രോപ്പ്ഡൗൺ മെനുവിൽ ടെക്‌സ്‌റ്റിനൊപ്പം ഏതെങ്കിലും ഫ്രീഫോം ടെക്‌സ്‌റ്റ് സ്ഥാപിക്കുക, സ്‌പെയ്‌സിംഗ് യൂട്ടിലിറ്റികൾ ഉപയോഗിക്കുക . മെനു വീതി പരിമിതപ്പെടുത്തുന്നതിന് നിങ്ങൾക്ക് അധിക വലുപ്പ ശൈലികൾ ആവശ്യമായി വരുമെന്ന കാര്യം ശ്രദ്ധിക്കുക.

html

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

ഫോമുകൾ

ഒരു ഡ്രോപ്പ്ഡൗൺ മെനുവിൽ ഒരു ഫോം ഇടുക, അല്ലെങ്കിൽ അത് ഒരു ഡ്രോപ്പ്ഡൗൺ മെനു ആക്കുക, നിങ്ങൾക്ക് ആവശ്യമുള്ള നെഗറ്റീവ് സ്പേസ് നൽകാൻ മാർജിൻ അല്ലെങ്കിൽ പാഡിംഗ് യൂട്ടിലിറ്റികൾ ഉപയോഗിക്കുക.

html

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

html

<div class="dropdown">
  <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-auto-close="outside">
    Dropdown form
  </button>
  <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>
</div>

ഡ്രോപ്പ്ഡൗണിന്റെ സ്ഥാനം ഉപയോഗിക്കുക data-bs-offsetഅല്ലെങ്കിൽ data-bs-referenceമാറ്റുക.

html

<div class="d-flex">
  <div class="dropdown me-1">
    <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-offset="10,20">
      Offset
    </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>
    </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" data-bs-toggle="dropdown" aria-expanded="false" data-bs-reference="parent">
      <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>
</div>

സ്വയമേവ അടയ്ക്കുന്ന പെരുമാറ്റം

ഡിഫോൾട്ടായി, ഡ്രോപ്പ്ഡൗൺ മെനുവിന് അകത്തോ പുറത്തോ ക്ലിക്ക് ചെയ്യുമ്പോൾ ഡ്രോപ്പ്ഡൗൺ മെനു അടയ്‌ക്കും. autoCloseഡ്രോപ്പ്ഡൗണിന്റെ ഈ സ്വഭാവം മാറ്റാൻ നിങ്ങൾക്ക് ഓപ്ഷൻ ഉപയോഗിക്കാം .

html

<div class="btn-group">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="true" aria-expanded="false">
    Default dropdown
  </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">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="inside" aria-expanded="false">
    Clickable outside
  </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">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
    Clickable inside
  </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">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="false" aria-expanded="false">
    Manual close
  </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>

സി.എസ്.എസ്

വേരിയബിളുകൾ

v5.2.0 ൽ ചേർത്തു

ബൂട്ട്‌സ്‌ട്രാപ്പിന്റെ വികസിച്ചുകൊണ്ടിരിക്കുന്ന CSS വേരിയബിളുകൾ സമീപനത്തിന്റെ ഭാഗമായി, .dropdown-menuമെച്ചപ്പെടുത്തിയ തത്സമയ ഇഷ്‌ടാനുസൃതമാക്കലിനായി ഡ്രോപ്പ്‌ഡൗണുകൾ ഇപ്പോൾ പ്രാദേശിക CSS വേരിയബിളുകൾ ഉപയോഗിക്കുന്നു. CSS വേരിയബിളുകൾക്കുള്ള മൂല്യങ്ങൾ Sass വഴി സജ്ജീകരിച്ചിരിക്കുന്നു, അതിനാൽ Sass ഇഷ്‌ടാനുസൃതമാക്കൽ ഇപ്പോഴും പിന്തുണയ്ക്കുന്നു.

  --#{$prefix}dropdown-zindex: #{$zindex-dropdown};
  --#{$prefix}dropdown-min-width: #{$dropdown-min-width};
  --#{$prefix}dropdown-padding-x: #{$dropdown-padding-x};
  --#{$prefix}dropdown-padding-y: #{$dropdown-padding-y};
  --#{$prefix}dropdown-spacer: #{$dropdown-spacer};
  @include rfs($dropdown-font-size, --#{$prefix}dropdown-font-size);
  --#{$prefix}dropdown-color: #{$dropdown-color};
  --#{$prefix}dropdown-bg: #{$dropdown-bg};
  --#{$prefix}dropdown-border-color: #{$dropdown-border-color};
  --#{$prefix}dropdown-border-radius: #{$dropdown-border-radius};
  --#{$prefix}dropdown-border-width: #{$dropdown-border-width};
  --#{$prefix}dropdown-inner-border-radius: #{$dropdown-inner-border-radius};
  --#{$prefix}dropdown-divider-bg: #{$dropdown-divider-bg};
  --#{$prefix}dropdown-divider-margin-y: #{$dropdown-divider-margin-y};
  --#{$prefix}dropdown-box-shadow: #{$dropdown-box-shadow};
  --#{$prefix}dropdown-link-color: #{$dropdown-link-color};
  --#{$prefix}dropdown-link-hover-color: #{$dropdown-link-hover-color};
  --#{$prefix}dropdown-link-hover-bg: #{$dropdown-link-hover-bg};
  --#{$prefix}dropdown-link-active-color: #{$dropdown-link-active-color};
  --#{$prefix}dropdown-link-active-bg: #{$dropdown-link-active-bg};
  --#{$prefix}dropdown-link-disabled-color: #{$dropdown-link-disabled-color};
  --#{$prefix}dropdown-item-padding-x: #{$dropdown-item-padding-x};
  --#{$prefix}dropdown-item-padding-y: #{$dropdown-item-padding-y};
  --#{$prefix}dropdown-header-color: #{$dropdown-header-color};
  --#{$prefix}dropdown-header-padding-x: #{$dropdown-header-padding-x};
  --#{$prefix}dropdown-header-padding-y: #{$dropdown-header-padding-y};

.dropdown-menu-darkCSS വേരിയബിളുകൾ വഴിയുള്ള ഇഷ്‌ടാനുസൃതമാക്കൽ ഡ്യൂപ്ലിക്കേറ്റ് CSS സെലക്‌ടറുകൾ ചേർക്കാതെ തന്നെ ഞങ്ങൾ നിർദ്ദിഷ്‌ട മൂല്യങ്ങൾ അസാധുവാക്കുന്ന ക്ലാസിൽ കാണാൻ കഴിയും .

  --#{$prefix}dropdown-color: #{$dropdown-dark-color};
  --#{$prefix}dropdown-bg: #{$dropdown-dark-bg};
  --#{$prefix}dropdown-border-color: #{$dropdown-dark-border-color};
  --#{$prefix}dropdown-box-shadow: #{$dropdown-dark-box-shadow};
  --#{$prefix}dropdown-link-color: #{$dropdown-dark-link-color};
  --#{$prefix}dropdown-link-hover-color: #{$dropdown-dark-link-hover-color};
  --#{$prefix}dropdown-divider-bg: #{$dropdown-dark-divider-bg};
  --#{$prefix}dropdown-link-hover-bg: #{$dropdown-dark-link-hover-bg};
  --#{$prefix}dropdown-link-active-color: #{$dropdown-dark-link-active-color};
  --#{$prefix}dropdown-link-active-bg: #{$dropdown-dark-link-active-bg};
  --#{$prefix}dropdown-link-disabled-color: #{$dropdown-dark-link-disabled-color};
  --#{$prefix}dropdown-header-color: #{$dropdown-dark-header-color};

സാസ് വേരിയബിളുകൾ

എല്ലാ ഡ്രോപ്പ്ഡൗണുകൾക്കുമുള്ള വേരിയബിളുകൾ:

$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:             var(--#{$prefix}border-color-translucent);
$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-x:         $dropdown-item-padding-x;
$dropdown-header-padding-y:         $dropdown-padding-y;
// fusv-disable
$dropdown-header-padding:           $dropdown-header-padding-y $dropdown-header-padding-x; // Deprecated in v5.2.0
// fusv-enable

ഇരുണ്ട ഡ്രോപ്പ്ഡൗണിനുള്ള വേരിയബിളുകൾ :

$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;
    }
  }
}

ഉപയോഗം

ഡാറ്റ ആട്രിബ്യൂട്ടുകൾ വഴിയോ JavaScript വഴിയോ, ഡ്രോപ്പ്ഡൗൺ പ്ലഗിൻ .show, രക്ഷകർത്താവിൽ ക്ലാസ് ടോഗിൾ ചെയ്തുകൊണ്ട് മറഞ്ഞിരിക്കുന്ന ഉള്ളടക്കം (ഡ്രോപ്പ്ഡൗൺ മെനുകൾ) ടോഗിൾ ചെയ്യുന്നു .dropdown-menu. ഒരു data-bs-toggle="dropdown"ആപ്ലിക്കേഷൻ തലത്തിൽ ഡ്രോപ്പ്ഡൗൺ മെനുകൾ അടയ്ക്കുന്നതിന് ആട്രിബ്യൂട്ട് ആശ്രയിക്കുന്നു, അതിനാൽ ഇത് എല്ലായ്പ്പോഴും ഉപയോഗിക്കുന്നത് നല്ലതാണ്.

ടച്ച് പ്രവർത്തനക്ഷമമാക്കിയ ഉപകരണങ്ങളിൽ, ഒരു ഡ്രോപ്പ്ഡൗൺ തുറക്കുന്നത് മൂലകത്തിന്റെ mouseoverഉടനടിയുള്ള കുട്ടികളിലേക്ക് ശൂന്യമായ ഹാൻഡ്‌ലറുകൾ ചേർക്കുന്നു. ഐഒഎസ് ഇവന്റ് ഡെലിഗേഷനിലെ<body> ഒരു വിചിത്രതയ്‌ക്ക് ചുറ്റും പ്രവർത്തിക്കാൻ ഈ വൃത്തികെട്ട ഹാക്ക് അനിവാര്യമാണ് , അല്ലാത്തപക്ഷം ഡ്രോപ്പ്‌ഡൗണിന് പുറത്ത് എവിടെയെങ്കിലും ടാപ്പുചെയ്യുന്നത് ഡ്രോപ്പ്‌ഡൗൺ അടയ്ക്കുന്ന കോഡ് പ്രവർത്തനക്ഷമമാക്കുന്നതിൽ നിന്ന് തടയും. ഡ്രോപ്പ്ഡൗൺ അടച്ചുകഴിഞ്ഞാൽ, ഈ അധിക ശൂന്യമായ ഹാൻഡ്‌ലറുകൾ നീക്കം ചെയ്യപ്പെടും. mouseover

ഡാറ്റ ആട്രിബ്യൂട്ടുകൾ വഴി

data-bs-toggle="dropdown"ഒരു ഡ്രോപ്പ്ഡൗൺ ടോഗിൾ ചെയ്യാൻ ഒരു ലിങ്കിലേക്കോ ബട്ടണിലേക്കോ ചേർക്കുക .

<div class="dropdown">
  <button type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown trigger
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

JavaScript വഴി

JavaScript വഴി ഡ്രോപ്പ്ഡൗണുകളെ വിളിക്കുക:

const dropdownElementList = document.querySelectorAll('.dropdown-toggle')
const dropdownList = [...dropdownElementList].map(dropdownToggleEl => new bootstrap.Dropdown(dropdownToggleEl))

`data-bs-toggle="dropdown"`ഇപ്പോഴും ആവശ്യമാണ്

നിങ്ങൾ JavaScript വഴി നിങ്ങളുടെ ഡ്രോപ്പ്‌ഡൗണിനെ വിളിച്ചാലും പകരം ഡാറ്റ-എപിഐ ഉപയോഗിക്കുന്നുണ്ടോ എന്നത് പരിഗണിക്കാതെ തന്നെ data-bs-toggle="dropdown", ഡ്രോപ്പ്‌ഡൗണിന്റെ ട്രിഗർ എലമെന്റിൽ എപ്പോഴും ഉണ്ടായിരിക്കേണ്ടത് ആവശ്യമാണ്.

ഓപ്ഷനുകൾ

ഡാറ്റ ആട്രിബ്യൂട്ടുകൾ വഴിയോ ജാവാസ്ക്രിപ്റ്റ് വഴിയോ ഓപ്‌ഷനുകൾ കൈമാറാൻ കഴിയുന്നതിനാൽ, എന്നതിലെന്നപോലെ നിങ്ങൾക്ക് ഒരു ഓപ്‌ഷൻ പേര് data-bs-ചേർക്കാം data-bs-animation="{value}". ഡാറ്റ ആട്രിബ്യൂട്ടുകൾ വഴി ഓപ്‌ഷനുകൾ കൈമാറുമ്പോൾ, ഓപ്‌ഷൻ പേരിന്റെ കേസ് തരം “ഒട്ടകം” എന്നതിൽ നിന്ന് “കബാബ്-കേസ്” ആയി മാറ്റുന്നത് ഉറപ്പാക്കുക . ഉദാഹരണത്തിന്, data-bs-custom-class="beautifier"പകരം ഉപയോഗിക്കുക data-bs-customClass="beautifier".

ബൂട്ട്‌സ്‌ട്രാപ്പ് 5.2.0 പോലെ, എല്ലാ ഘടകങ്ങളും ഒരു പരീക്ഷണാത്മക റിസർവ് ചെയ്‌ത ഡാറ്റ ആട്രിബ്യൂട്ടിനെ പിന്തുണയ്‌ക്കുന്നു data-bs-config, അത് ഒരു JSON സ്ട്രിംഗായി ലളിതമായ ഘടക കോൺഫിഗറേഷനെ ഉൾക്കൊള്ളാൻ കഴിയും. ഒരു മൂലകവും ആട്രിബ്യൂട്ടുകളും ഉള്ളപ്പോൾ data-bs-config='{"delay":0, "title":123}', data-bs-title="456"അന്തിമ titleമൂല്യം ആയിരിക്കും 456കൂടാതെ പ്രത്യേക ഡാറ്റ ആട്രിബ്യൂട്ടുകൾ ന് നൽകിയിരിക്കുന്ന മൂല്യങ്ങളെ അസാധുവാക്കും data-bs-config. കൂടാതെ, നിലവിലുള്ള ഡാറ്റ ആട്രിബ്യൂട്ടുകൾക്ക് പോലെയുള്ള JSON മൂല്യങ്ങൾ നിലനിർത്താൻ കഴിയും data-bs-delay='{"show":0,"hide":150}'.

പേര്	ടൈപ്പ് ചെയ്യുക	സ്ഥിരസ്ഥിതി	വിവരണം
`autoClose`	ബൂളിയൻ, ചരട്	`true`	ഡ്രോപ്പ്ഡൗണിന്റെ സ്വയമേവ അടയ്ക്കുന്ന സ്വഭാവം കോൺഫിഗർ ചെയ്യുക: `true`- ഡ്രോപ്പ്ഡൗൺ മെനുവിന് പുറത്തോ അകത്തോ ക്ലിക്ക് ചെയ്തുകൊണ്ട് ഡ്രോപ്പ്ഡൗൺ അടയ്‌ക്കും. `falsehide`- ടോഗിൾ ബട്ടണിൽ ക്ലിക്കുചെയ്‌ത് സ്വമേധയാ കോളിംഗ് അല്ലെങ്കിൽ `toggle`രീതി ഉപയോഗിച്ച് ഡ്രോപ്പ്‌ഡൗൺ അടയ്ക്കും . (കീ അമർത്തിപ്പോലും `esc`അടയ്ക്കില്ല) `'inside'`- ഡ്രോപ്പ്ഡൗൺ മെനുവിനുള്ളിൽ ക്ലിക്ക് ചെയ്യുന്നതിലൂടെ ഡ്രോപ്പ്ഡൗൺ അടയ്ക്കും (മാത്രം). `'outside'`- ഡ്രോപ്പ്ഡൗൺ മെനുവിന് പുറത്ത് ക്ലിക്കുചെയ്യുന്നതിലൂടെ ഡ്രോപ്പ്ഡൗൺ അടയ്ക്കും (മാത്രം). ശ്രദ്ധിക്കുക: ഡ്രോപ്പ്ഡൗൺ എപ്പോഴും `ESC`കീ ഉപയോഗിച്ച് അടയ്ക്കാം.
`boundary`	ചരട്, ഘടകം	`'clippingParents'`	ഡ്രോപ്പ്ഡൗൺ മെനുവിന്റെ ഓവർഫ്ലോ കൺസ്ട്രെയിന്റ് ബൗണ്ടറി (പോപ്പറിന്റെ പ്രിവൻ ഓവർഫ്ലോ മോഡിഫയറിന് മാത്രം ബാധകമാണ്). സ്ഥിരസ്ഥിതിയായി `clippingParents`, ഇത് ഒരു HTMLElement റഫറൻസ് (JavaScript വഴി മാത്രം) സ്വീകരിക്കാം. കൂടുതൽ വിവരങ്ങൾക്ക് പോപ്പറിന്റെ ഡിറ്റക്റ്റ്ഓവർഫ്ലോ ഡോക്‌സ് കാണുക .
`display`	സ്ട്രിംഗ്	`'dynamic'`	സ്ഥിരസ്ഥിതിയായി, ഡൈനാമിക് പൊസിഷനിംഗിനായി ഞങ്ങൾ പോപ്പർ ഉപയോഗിക്കുന്നു. ഉപയോഗിച്ച് ഇത് പ്രവർത്തനരഹിതമാക്കുക `static`.
`offset`	അറേ, സ്ട്രിംഗ്, ഫംഗ്ഷൻ	`[0, 2]`	ഡ്രോപ്പ്ഡൗൺ അതിന്റെ ലക്ഷ്യവുമായി ബന്ധപ്പെട്ട ഓഫ്‌സെറ്റ്. ഇനിപ്പറയുന്നതുപോലുള്ള കോമയാൽ വേർതിരിച്ച മൂല്യങ്ങളുള്ള ഡാറ്റ ആട്രിബ്യൂട്ടുകളിൽ നിങ്ങൾക്ക് ഒരു സ്ട്രിംഗ് കൈമാറാൻ കഴിയും `data-bs-offset="10,20"`: ഓഫ്‌സെറ്റ് നിർണ്ണയിക്കാൻ ഒരു ഫംഗ്‌ഷൻ ഉപയോഗിക്കുമ്പോൾ, അതിന്റെ ആദ്യ ആർഗ്യുമെന്റായി പോപ്പർ പ്ലേസ്‌മെന്റ്, റഫറൻസ്, പോപ്പർ റെക്‌റ്റുകൾ എന്നിവ അടങ്ങിയ ഒബ്‌ജക്റ്റ് ഉപയോഗിച്ച് അതിനെ വിളിക്കുന്നു. ട്രിഗറിംഗ് എലമെന്റ് DOM നോഡ് രണ്ടാമത്തെ ആർഗ്യുമെന്റായി കൈമാറുന്നു. ഫംഗ്ഷൻ രണ്ട് അക്കങ്ങളുള്ള ഒരു അറേ നൽകണം: സ്കിഡിംഗ് , ദൂരം . കൂടുതൽ വിവരങ്ങൾക്ക് പോപ്പറിന്റെ ഓഫ്‌സെറ്റ് ഡോക്‌സ് കാണുക .
`popperConfig`	ശൂന്യം, വസ്തു, പ്രവർത്തനം	`null`	ബൂട്ട്‌സ്‌ട്രാപ്പിന്റെ ഡിഫോൾട്ട് പോപ്പർ കോൺഫിഗറേഷൻ മാറ്റുന്നതിന്, പോപ്പറിന്റെ കോൺഫിഗറേഷൻ കാണുക . പോപ്പർ കോൺഫിഗറേഷൻ സൃഷ്‌ടിക്കാൻ ഒരു ഫംഗ്‌ഷൻ ഉപയോഗിക്കുമ്പോൾ, ബൂട്ട്‌സ്‌ട്രാപ്പിന്റെ ഡിഫോൾട്ട് പോപ്പർ കോൺഫിഗറേഷൻ അടങ്ങുന്ന ഒബ്‌ജക്‌റ്റ് ഉപയോഗിച്ചാണ് അതിനെ വിളിക്കുന്നത്. നിങ്ങളുടെ സ്വന്തം കോൺഫിഗറേഷനുമായി ഡിഫോൾട്ട് ഉപയോഗിക്കാനും ലയിപ്പിക്കാനും ഇത് നിങ്ങളെ സഹായിക്കുന്നു. ഫംഗ്‌ഷൻ പോപ്പറിനായി ഒരു കോൺഫിഗറേഷൻ ഒബ്‌ജക്റ്റ് തിരികെ നൽകണം.
`reference`	ചരട്, ഘടകം, വസ്തു	`'toggle'`	ഡ്രോപ്പ്ഡൗൺ മെനുവിന്റെ റഫറൻസ് ഘടകം. ഒരു HTMLElement റഫറൻസ് അല്ലെങ്കിൽ നൽകുന്ന ഒരു വസ്തുവിന്റെ മൂല്യങ്ങൾ `'toggle'`സ്വീകരിക്കുന്നു . കൂടുതൽ വിവരങ്ങൾക്ക് പോപ്പറിന്റെ കൺസ്ട്രക്റ്റർ ഡോക്‌സും വെർച്വൽ എലമെന്റ് ഡോക്‌സും കാണുക .`'parent'getBoundingClientRect`

കൂടെ ഫംഗ്ഷൻ ഉപയോഗിക്കുന്നു`popperConfig`

const dropdown = new bootstrap.Dropdown(element, {
  popperConfig(defaultBsPopperConfig) {
    // const newPopperConfig = {...}
    // use defaultBsPopperConfig if needed...
    // return newPopperConfig
  }
})

രീതികൾ

രീതി	വിവരണം
`dispose`	ഒരു മൂലകത്തിന്റെ ഡ്രോപ്പ്ഡൗൺ നശിപ്പിക്കുന്നു. (DOM ഘടകത്തിൽ സംഭരിച്ച ഡാറ്റ നീക്കംചെയ്യുന്നു)
`getInstance`	ഒരു DOM ഘടകവുമായി ബന്ധപ്പെട്ട ഡ്രോപ്പ്ഡൗൺ ഇൻസ്‌റ്റൻസ് ലഭിക്കാൻ നിങ്ങളെ അനുവദിക്കുന്ന സ്റ്റാറ്റിക് രീതി, നിങ്ങൾക്ക് ഇത് ഇതുപോലെ ഉപയോഗിക്കാം: `bootstrap.Dropdown.getInstance(element)`.
`getOrCreateInstance`	ഒരു DOM ഘടകവുമായി ബന്ധപ്പെട്ട ഒരു ഡ്രോപ്പ്ഡൗൺ ഇൻസ്‌റ്റൻസ് തിരികെ നൽകുന്ന സ്റ്റാറ്റിക് രീതി അല്ലെങ്കിൽ അത് ആരംഭിച്ചിട്ടില്ലെങ്കിൽ പുതിയൊരെണ്ണം സൃഷ്‌ടിക്കുക. നിങ്ങൾക്ക് ഇത് ഇതുപോലെ ഉപയോഗിക്കാം: `bootstrap.Dropdown.getOrCreateInstance(element)`.
`hide`	തന്നിരിക്കുന്ന navbar അല്ലെങ്കിൽ ടാബ് ചെയ്ത നാവിഗേഷന്റെ ഡ്രോപ്പ്ഡൗൺ മെനു മറയ്ക്കുന്നു.
`show`	തന്നിരിക്കുന്ന navbar അല്ലെങ്കിൽ ടാബ് ചെയ്ത നാവിഗേഷന്റെ ഡ്രോപ്പ്ഡൗൺ മെനു കാണിക്കുന്നു.
`toggle`	തന്നിരിക്കുന്ന navbar അല്ലെങ്കിൽ ടാബ് ചെയ്ത നാവിഗേഷന്റെ ഡ്രോപ്പ്ഡൗൺ മെനു ടോഗിൾ ചെയ്യുന്നു.
`update`	ഒരു മൂലകത്തിന്റെ ഡ്രോപ്പ്ഡൗണിന്റെ സ്ഥാനം അപ്ഡേറ്റ് ചെയ്യുന്നു.

ഇവന്റുകൾ

എല്ലാ ഡ്രോപ്പ്‌ഡൗൺ ഇവന്റുകളും ടോഗിൾ എലമെന്റിൽ ഫയർ ചെയ്യുകയും പിന്നീട് ബബിൾ അപ്പ് ചെയ്യുകയും ചെയ്യുന്നു. .dropdown-menuഅതിനാൽ നിങ്ങൾക്ക് ഇവന്റ് ശ്രോതാക്കളെ യുടെ പാരന്റ് എലമെന്റിൽ ചേർക്കാനും കഴിയും . hide.bs.dropdownകൂടാതെ hidden.bs.dropdownഇവന്റുകൾക്ക് ഒരു clickEventപ്രോപ്പർട്ടി ഉണ്ട് (യഥാർത്ഥ ഇവന്റ് തരം ആയിരിക്കുമ്പോൾ മാത്രം click) അതിൽ ക്ലിക്ക് ഇവന്റിന് ഒരു ഇവന്റ് ഒബ്ജക്റ്റ് അടങ്ങിയിരിക്കുന്നു.

ഇവന്റ് തരം	വിവരണം
`hide.bs.dropdown`	`hide`ഇൻസ്‌റ്റൻസ് മെത്തേഡ് വിളിച്ചാൽ ഉടൻ തന്നെ ഫയർ ചെയ്യുന്നു .
`hidden.bs.dropdown`	ഡ്രോപ്പ്‌ഡൗൺ ഉപയോക്താവിൽ നിന്ന് മറയ്‌ക്കപ്പെടുകയും CSS സംക്രമണങ്ങൾ പൂർത്തിയാകുകയും ചെയ്യുമ്പോൾ ഫയർ ചെയ്‌തു.
`show.bs.dropdown`	`show`ഇൻസ്‌റ്റൻസ് മെത്തേഡ് വിളിക്കുമ്പോൾ ഉടനടി ഫയർ ചെയ്യുന്നു.
`shown.bs.dropdown`	ഡ്രോപ്പ്ഡൗൺ ഉപയോക്താവിന് ദൃശ്യമാക്കുകയും CSS സംക്രമണങ്ങൾ പൂർത്തിയാകുകയും ചെയ്യുമ്പോൾ ഫയർ ചെയ്യപ്പെടും.

const myDropdown = document.getElementById('myDropdown')
myDropdown.addEventListener('show.bs.dropdown', event => {
  // do something...
})

ഡ്രോപ്പ്ഡൗണുകൾ

അവലോകനം

പ്രവേശനക്ഷമത

ഉദാഹരണങ്ങൾ

ഒറ്റ ബട്ടൺ

സ്പ്ലിറ്റ് ബട്ടൺ

വലിപ്പം

ഇരുണ്ട ഡ്രോപ്പ്ഡൌണുകൾ

ദിശകൾ

RTL

കേന്ദ്രീകരിച്ചു

ഉപേക്ഷിക്കുക

ഡ്രോപ്പ്അപ്പ് കേന്ദ്രീകരിച്ചു

ഡ്രോപെൻഡ്

ഡ്രോപ്പ്സ്റ്റാർട്ട്

മെനു ഇനങ്ങൾ

സജീവമാണ്

അപ്രാപ്തമാക്കി

മെനു വിന്യാസം

പ്രതികരിക്കുന്ന വിന്യാസം

വിന്യാസ ഓപ്ഷനുകൾ

മെനു ഉള്ളടക്കം

തലക്കെട്ടുകൾ

ഡിവൈഡറുകൾ

വാചകം

ഫോമുകൾ

സ്വയമേവ അടയ്ക്കുന്ന പെരുമാറ്റം

സി.എസ്.എസ്

വേരിയബിളുകൾ

സാസ് വേരിയബിളുകൾ

മിക്സിൻസ്

ഉപയോഗം

ഡാറ്റ ആട്രിബ്യൂട്ടുകൾ വഴി

JavaScript വഴി

`data-bs-toggle="dropdown"`ഇപ്പോഴും ആവശ്യമാണ്

ഓപ്ഷനുകൾ

കൂടെ ഫംഗ്ഷൻ ഉപയോഗിക്കുന്നു`popperConfig`

രീതികൾ

ഇവന്റുകൾ

ഡ്രോപ്പ്ഡൗണുകൾ

അവലോകനം

പ്രവേശനക്ഷമത

ഉദാഹരണങ്ങൾ

ഒറ്റ ബട്ടൺ

സ്പ്ലിറ്റ് ബട്ടൺ

വലിപ്പം

ഇരുണ്ട ഡ്രോപ്പ്ഡൌണുകൾ

ദിശകൾ

RTL

കേന്ദ്രീകരിച്ചു

ഉപേക്ഷിക്കുക

ഡ്രോപ്പ്അപ്പ് കേന്ദ്രീകരിച്ചു

ഡ്രോപെൻഡ്

ഡ്രോപ്പ്സ്റ്റാർട്ട്

മെനു ഇനങ്ങൾ

സജീവമാണ്

അപ്രാപ്തമാക്കി

മെനു വിന്യാസം

പ്രതികരിക്കുന്ന വിന്യാസം

വിന്യാസ ഓപ്ഷനുകൾ

മെനു ഉള്ളടക്കം

തലക്കെട്ടുകൾ

ഡ്രോപ്പ്ഡൗൺ ഹെഡർ

ഡിവൈഡറുകൾ

വാചകം

ഫോമുകൾ

ഡ്രോപ്പ്ഡൗൺ ഓപ്ഷനുകൾ

സ്വയമേവ അടയ്ക്കുന്ന പെരുമാറ്റം

സി.എസ്.എസ്

വേരിയബിളുകൾ

സാസ് വേരിയബിളുകൾ

മിക്സിൻസ്

ഉപയോഗം

ഡാറ്റ ആട്രിബ്യൂട്ടുകൾ വഴി

JavaScript വഴി

data-bs-toggle="dropdown"ഇപ്പോഴും ആവശ്യമാണ്

ഓപ്ഷനുകൾ

കൂടെ ഫംഗ്ഷൻ ഉപയോഗിക്കുന്നുpopperConfig

രീതികൾ

ഇവന്റുകൾ

`data-bs-toggle="dropdown"`ഇപ്പോഴും ആവശ്യമാണ്

കൂടെ ഫംഗ്ഷൻ ഉപയോഗിക്കുന്നു`popperConfig`