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

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

അവലോകനം

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

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

ഉറവിടത്തിൽ നിന്നാണ് നിങ്ങൾ ഞങ്ങളുടെ JavaScript നിർമ്മിക്കുന്നതെങ്കിൽ, അത് ആവശ്യമാണ്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" data-toggle="dropdown" aria-expanded="false">
    Dropdown button
  </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>
</div>

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

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

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

ഏത് ബട്ടൺ വേരിയന്റിലും നിങ്ങൾക്ക് ഇത് ചെയ്യാൻ കഴിയും എന്നതാണ് ഏറ്റവും നല്ല ഭാഗം:

<!-- Example single danger button -->
<div class="btn-group">
  <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" 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-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-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-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-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-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-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-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-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-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-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">
    <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" 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 ന്റെ കാര്യത്തിൽ ഇനി അങ്ങനെയല്ല. <button>ഇപ്പോൾ നിങ്ങൾക്ക് ഡ്രോപ്പ്ഡൗണുകളിൽ വെറും <a>s എന്നതിന് പകരം ഓപ്ഷണലായി ഘടകങ്ങൾ ഉപയോഗിക്കാം .

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
    Dropdown
  </button>
  <div class="dropdown-menu">
    <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">Disabled link</a>
  <a class="dropdown-item" href="#">Another link</a>
</div>

ഡിഫോൾട്ടായി, ഒരു ഡ്രോപ്പ്ഡൗൺ മെനു അതിന്റെ രക്ഷിതാവിന്റെ മുകളിൽ നിന്നും ഇടത് വശത്തും 100% സ്വയമേവ സ്ഥാനം പിടിക്കുന്നു. ഡ്രോപ്പ്ഡൗൺ മെനു വലത്തേക്ക് വിന്യസിക്കുന്നതിന് a-ലേക്ക് .dropdown-menu-rightചേർക്കുക ..dropdown-menu

ഹെഡ്സ് അപ്പുകൾ! ഡ്രോപ്പ്‌ഡൗണുകൾ പോപ്പറിന് നന്ദി പറഞ്ഞു (അവ ഒരു നവബാറിൽ അടങ്ങിയിരിക്കുമ്പോൾ ഒഴികെ).

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" 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-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-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>

data-display="static"നവബാറുകളിൽ പോപ്പർ ഉപയോഗിക്കാത്തതിനാൽ, നവബാറുകളിലെ ഡ്രോപ്പ്ഡൗൺ ബട്ടണുകളിലേക്ക് നിങ്ങൾ ഒരു ആട്രിബ്യൂട്ട് ചേർക്കേണ്ടതില്ലെന്ന കാര്യം ശ്രദ്ധിക്കുക .

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

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

<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" data-toggle="dropdown" aria-expanded="false" data-offset="10,20">
      Offset
    </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>
  </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-toggle="dropdown" aria-expanded="false" data-reference="parent">
      <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>
</div>

ഉപയോഗം

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

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

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

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

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

JavaScript വഴി

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

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

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

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

ഓപ്ഷനുകൾ

ഡാറ്റ ആട്രിബ്യൂട്ടുകൾ അല്ലെങ്കിൽ JavaScript വഴി ഓപ്ഷനുകൾ കൈമാറാൻ കഴിയും. ഡാറ്റ ആട്രിബ്യൂട്ടുകൾക്കായി, എന്നതിലേക്ക് ഓപ്ഷന്റെ പേര് ചേർക്കുക data-.data-offset=""

പേര്	ടൈപ്പ് ചെയ്യുക	സ്ഥിരസ്ഥിതി	വിവരണം
ഓഫ്സെറ്റ്	നമ്പർ \| ചരട് \| പ്രവർത്തനം	0	ഡ്രോപ്പ്ഡൗൺ അതിന്റെ ലക്ഷ്യവുമായി ബന്ധപ്പെട്ട ഓഫ്‌സെറ്റ്. ഓഫ്‌സെറ്റ് നിർണ്ണയിക്കാൻ ഒരു ഫംഗ്‌ഷൻ ഉപയോഗിക്കുമ്പോൾ, അതിന്റെ ആദ്യ ആർഗ്യുമെന്റായി ഓഫ്‌സെറ്റ് ഡാറ്റ അടങ്ങിയിരിക്കുന്ന ഒബ്‌ജക്റ്റ് ഉപയോഗിച്ച് അതിനെ വിളിക്കുന്നു. ഫംഗ്ഷൻ ഒരേ ഘടനയുള്ള ഒരു വസ്തുവിനെ തിരികെ നൽകണം. ട്രിഗറിംഗ് എലമെന്റ് DOM നോഡ് രണ്ടാമത്തെ ആർഗ്യുമെന്റായി കൈമാറുന്നു. കൂടുതൽ വിവരങ്ങൾക്ക് പോപ്പറിന്റെ ഓഫ്‌സെറ്റ് ഡോക്‌സ് കാണുക .
ഫ്ലിപ്പ്	ബൂളിയൻ	സത്യം	റഫറൻസ് എലമെന്റിൽ ഓവർലാപ്പുചെയ്യുന്ന സാഹചര്യത്തിൽ ഫ്ലിപ്പ് ചെയ്യാൻ ഡ്രോപ്പ്ഡൗൺ അനുവദിക്കുക. കൂടുതൽ വിവരങ്ങൾക്ക് പോപ്പറിന്റെ ഫ്ലിപ്പ് ഡോക്‌സ് കാണുക .
അതിർത്തി	ചരട് \| ഘടകം	'സ്ക്രോൾ പേരന്റ്'	ഡ്രോപ്പ്ഡൗൺ മെനുവിന്റെ ഓവർഫ്ലോ കൺസ്ട്രെയിന്റ് ബൗണ്ടറി. `'viewport'`, `'window'`, `'scrollParent'`, അല്ലെങ്കിൽ ഒരു HTMLElement റഫറൻസ് (JavaScript മാത്രം) മൂല്യങ്ങൾ സ്വീകരിക്കുന്നു . കൂടുതൽ വിവരങ്ങൾക്ക് പോപ്പറിന്റെ പ്രിവൻഡ് ഓവർഫ്ലോ ഡോക്‌സ് കാണുക .
റഫറൻസ്	ചരട് \| ഘടകം	'ടോഗിൾ'	ഡ്രോപ്പ്ഡൗൺ മെനുവിന്റെ റഫറൻസ് ഘടകം. `'toggle'`, `'parent'`അല്ലെങ്കിൽ ഒരു HTMLElement റഫറൻസ് മൂല്യങ്ങൾ സ്വീകരിക്കുന്നു . കൂടുതൽ വിവരങ്ങൾക്ക് പോപ്പറിന്റെ റഫറൻസ് ഒബ്ജക്റ്റ് ഡോക്‌സ് കാണുക .
ഡിസ്പ്ലേ	സ്ട്രിംഗ്	'ഡൈനാമിക്'	സ്ഥിരസ്ഥിതിയായി, ഡൈനാമിക് പൊസിഷനിംഗിനായി ഞങ്ങൾ പോപ്പർ ഉപയോഗിക്കുന്നു. ഉപയോഗിച്ച് ഇത് പ്രവർത്തനരഹിതമാക്കുക `static`.
popperConfig	ശൂന്യം \| വസ്തു	ശൂന്യം	ബൂട്ട്‌സ്‌ട്രാപ്പിന്റെ ഡിഫോൾട്ട് പോപ്പർ കോൺഫിഗറേഷൻ മാറ്റാൻ, പോപ്പറിന്റെ കോൺഫിഗറേഷൻ കാണുക

boundaryഅല്ലാതെ മറ്റേതെങ്കിലും മൂല്യത്തിലേക്ക് സജ്ജീകരിക്കുമ്പോൾ 'scrollParent', സ്റ്റൈൽ കണ്ടെയ്‌നറിൽ position: staticപ്രയോഗിക്കുന്നത് ശ്രദ്ധിക്കുക ..dropdown

രീതികൾ

രീതി	വിവരണം
`$().dropdown('toggle')`	തന്നിരിക്കുന്ന navbar അല്ലെങ്കിൽ ടാബ് ചെയ്ത നാവിഗേഷന്റെ ഡ്രോപ്പ്ഡൗൺ മെനു ടോഗിൾ ചെയ്യുന്നു.
`$().dropdown('show')`	തന്നിരിക്കുന്ന navbar അല്ലെങ്കിൽ ടാബ് ചെയ്ത നാവിഗേഷന്റെ ഡ്രോപ്പ്ഡൗൺ മെനു കാണിക്കുന്നു.
`$().dropdown('hide')`	തന്നിരിക്കുന്ന navbar അല്ലെങ്കിൽ ടാബ് ചെയ്ത നാവിഗേഷന്റെ ഡ്രോപ്പ്ഡൗൺ മെനു മറയ്ക്കുന്നു.
`$().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...
})

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

അവലോകനം

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

ഉദാഹരണങ്ങൾ

ഒറ്റ ബട്ടൺ

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

വലിപ്പം

ദിശകൾ

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

ഡ്രോപ്പ് റൈറ്റ്

ഡ്രോപ്ലെഫ്റ്റ്

മെനു ഇനങ്ങൾ

സജീവമാണ്

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

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

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

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

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

ഡിവൈഡറുകൾ

വാചകം

ഫോമുകൾ

ഉപയോഗം

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

JavaScript വഴി

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

ഓപ്ഷനുകൾ

രീതികൾ

ഇവന്റുകൾ

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

അവലോകനം

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

ഉദാഹരണങ്ങൾ

ഒറ്റ ബട്ടൺ

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

വലിപ്പം

ദിശകൾ

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

ഡ്രോപ്പ് റൈറ്റ്

ഡ്രോപ്ലെഫ്റ്റ്

മെനു ഇനങ്ങൾ

സജീവമാണ്

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

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

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

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

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

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

ഡിവൈഡറുകൾ

വാചകം

ഫോമുകൾ

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

ഉപയോഗം

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

JavaScript വഴി

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

ഓപ്ഷനുകൾ

രീതികൾ

ഇവന്റുകൾ

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