Равзанаҳои афтанда

Ҷойгиркунии қабатҳои контекстӣ барои намоиши рӯйхати истинодҳо ва ғайра бо плагини афтанда Bootstrap.

Барраси

Равандҳои афтанда ивазшаванда, қабатҳои контекстӣ барои намоиши рӯйхати истинодҳо ва ғайра мебошанд. Онҳо бо плагини афтанда JavaScript бо Bootstrap интерактивӣ сохта шудаанд. Онҳо бо пахшкунӣ иваз карда мешаванд, на бо гузоштан; ин тасмими тарҳрезишуда аст.

Равзанаҳои афтанда дар китобхонаи тарафи сеюм, Popper.js сохта шудаанд , ки мавқеъгирии динамикӣ ва муайянкунии намоишро таъмин мекунад. Боварӣ ҳосил кунед, ки popper.min.js -ро пеш аз JavaScript-и Bootstrap дохил кунед ё bootstrap.bundle.min.js/ bootstrap.bundle.jsки Popper.js -ро истифода баред. Popper.js барои ҷойгиркунии афтандаҳо дар наворҳо истифода намешавад, гарчанде ки мавқеъгирии динамикӣ талаб карда намешавад.

Агар шумо JavaScript-и моро аз сарчашма сохта истода бошед, онutil.js .

Дастрасӣ

Стандарти WAI ARIA role="menu" виҷети воқеиро муайян мекунад , аммо ин барои менюҳои ба барнома монанд аст, ки амалҳо ё функсияҳоро ба вуҷуд меоранд. Менюҳои ARIA метавонанд танҳо ҷузъҳои меню, ҷузъҳои менюи қуттии қайд, ҷузъҳои менюи тугмаи радио, гурӯҳҳои тугмаҳои радио ва зерменюҳоро дар бар гиранд.

Аз тарафи дигар, афтандаҳои Bootstrap барои он тарҳрезӣ шудаанд, ки умумӣ бошанд ва ба вазъиятҳои гуногун ва сохторҳои аломатгузорӣ татбиқ шаванд. Масалан, имконпазир аст, ки афтандаҳоеро эҷод кунед, ки дорои вурудоти иловагӣ ва идоракунии форма, ба монанди майдонҳои ҷустуҷӯ ё шаклҳои воридшавӣ мебошанд. Аз ин сабаб, Bootstrap ягон roleва aria-атрибутҳоеро, ки барои менюҳои ҳақиқии ARIA лозиманд, интизор нест (ё ба таври худкор илова мекунад). Муаллифон бояд худи ин сифатҳои мушаххасро дохил кунанд.

Бо вуҷуди ин, Bootstrap барои аксари мутақобилаи менюи стандартии клавиатура дастгирии дарунсохтро илова мекунад, ба монанди қобилияти ҳаракат тавассути .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>

Беҳтарин қисми он аст, ки шумо метавонед ин корро бо ягон варианти тугма низ иҷро кунед:

<!-- 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 нест. Акнун шумо метавонед ба таври ихтиёрӣ <button>элементҳоро дар афтандаҳои худ ба ҷои танҳо <a>s истифода баред.

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

Истифода

Тавассути атрибутҳои додаҳо ё JavaScript, плагини афтанда мундариҷаи пинҳоншударо (менюҳои афтанда) бо иваз кардани .showсинф дар ҷузъи рӯйхати волидайн иваз мекунад. Аттрибутӣ 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>

Тавассути JavaScript

Ба афтандаҳо тавассути JavaScript занг занед:

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

`data-toggle="dropdown"`хануз талаб карда мешавад

Новобаста аз он, ки шумо афтандаро тавассути JavaScript занг мезанед ё ба ҷои он data-api-ро истифода мебаред, data-toggle="dropdown"ҳамеша бояд дар элементи триггери афтанда мавҷуд бошад.

Имконот

Имконотро тавассути атрибутҳои додаҳо ё JavaScript интиқол додан мумкин аст. Барои атрибутҳои додаҳо, номи опсияро ба data-монанди замима кунед data-offset="".

Ном	Навъи	Пешфарз	Тавсифи
офсет	рақам \| сатр \| функсия	0	Ҷойгиркунии афтанда нисбат ба ҳадафи он. Барои маълумоти бештар ба ҳуҷҷатҳои офсетии Popper.js муроҷиат кунед .
гардиш	булӣ	дуруст	Иҷозат диҳед, ки афтанда дар ҳолати такрори унсури истинод баргардад. Барои маълумоти бештар ба ҳуҷҷатҳои флипи Popper.js муроҷиат кунед .
сарҳад	сатр \| элемент	'scrollParent'	Сарҳади маҳдудияти пур аз менюи афтанда. Қиматҳои `'viewport'`, `'window'`, `'scrollParent'`, ё истинодҳои HTMLElementро қабул мекунад (танҳо JavaScript). Барои маълумоти бештар ба Docs preventOverflow 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 интизор мешавад).

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

Равзанаҳои афтанда

Барраси

Дастрасӣ

Мисолхо

Тугмаи ягонаи афтанда

Тугмаҳои афтанда тақсим кунед

Андоза

Варианти афтанда

Варианти афтанда

Варианти тарки чап

Унсурҳои меню

Ҳамоҳангсозии меню

Сарлавҳаҳои меню

Тақсимкунакҳои меню

Шаклҳои меню

Унсурҳои менюи фаъол

Унсурҳои меню ғайрифаъол

Истифода

Тавассути атрибутҳои додаҳо

Тавассути JavaScript

`data-toggle="dropdown"`хануз талаб карда мешавад

Имконот

Усулҳо

Ҳодисаҳо

Равзанаҳои афтанда

Барраси

Дастрасӣ

Мисолхо

Тугмаи ягонаи афтанда

Тугмаҳои афтанда тақсим кунед

Андоза

Варианти афтанда

Варианти афтанда

Варианти тарки чап

Унсурҳои меню

Ҳамоҳангсозии меню

Сарлавҳаҳои меню

Сарлавҳаи афтанда

Тақсимкунакҳои меню

Шаклҳои меню

Унсурҳои менюи фаъол

Унсурҳои меню ғайрифаъол

Истифода

Тавассути атрибутҳои додаҳо

Тавассути JavaScript

data-toggle="dropdown"хануз талаб карда мешавад

Имконот

Усулҳо

Ҳодисаҳо

`data-toggle="dropdown"`хануз талаб карда мешавад