Тамчы

Bootstrap тамчы плагины белән сылтамалар исемлеген күрсәтү өчен контекстуаль каплауларны алыштырыгыз.

Гомуми күзәтү

Тамчы төшү - күчерелмә, сылтамалар исемлеген күрсәтү өчен контекстуаль өстәмәләр. Алар Bootstrap тамчысы JavaScript плагины белән интерактив ясалган. Алар басу белән алыштырыла, каушап түгел; бу белә торып проектлау карары .

Тамчы төшү динамик позицияләү һәм күренешне ачыклауны тәэмин итүче Popper өченче як китапханәсендә төзелгән . Bootstrap'ның JavaScript алдыннан popper.min.js кертегез яки Popper булганbootstrap.bundle.min.js / кулланыгыз bootstrap.bundle.js. Поппер диңгез такталарында тамчыларны урнаштыру өчен кулланылмый, чөнки динамик позицияләү таләп ителми.

Әгәр дә сез безнең JavaScriptны чыганактан төзисез икән, бу кирәкutil.js .

Уңайлык

WAI ARIA стандарты фактик role="menu"виджетны билгели , ләкин бу гамәлләргә яки функцияләргә этәрүче кушымтага охшаган менюларга хас. ARIA менюларында меню элементлары, меню пунктлары, радио төймә меню элементлары, радио төймә төркемнәре һәм суб-менюлар булырга мөмкин.

Ботстрапның төшүе, гомуми һәм төрле ситуацияләргә һәм билгеләр структураларына куллану өчен эшләнгән. Мәсәлән, эзләү кырлары яки логин формалары кебек өстәмә керемнәр һәм форма контроле булган тамчыларны ясарга мөмкин. Шуңа күрә, Bootstrap чын ARIA менюлары өчен кирәк булган roleһәм aria-атрибутларны көтми (яки автоматик рәвештә кушмый) . Авторларга бу конкрет атрибутларны кертергә туры киләчәк.

Ләкин, Bootstrap күпчелек стандарт клавиатура менюларының үзара бәйләнешенә урнаштырылган ярдәм өсти, мәсәлән .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>

Elementәм <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>

Ectionsнәлеш

Тамчы

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

<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% өстән һәм ата-анасының сул ягына урнаштырыла. Ачылучы менюны уңга тигезләү өчен .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>

Onsаваплы тигезләү

Әгәр дә сез җаваплы тигезләү кулланырга телисез икән, 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Мәгълүмат атрибутлары яки JavaScript аша тамчы плагин яшерен эчтәлекне (тамчы менюларны) ата-анага күчереп алыштыра .dropdown-menu. Атрибут кушымта дәрәҗәсендә тамчы менюларны ябу өчен data-toggle="dropdown"таяна, шуңа күрә аны һәрвакыт куллану яхшы идея.

Сенсор ярдәмендә эшләнгән җайланмаларда тамчы ачылу элементның якын балаларына буш ( $.noop) mouseoverэшкәртүчеләр өсти. <body>Бу ямьсез хак , iOS вакыйгалар делегациясендә чуалыш өстендә эшләргә кирәк , бу тамчы тамчы ябылган кодны эшләтеп җибәрүдән саклый. Тамчы ябылганнан соң, бу өстәмә буш 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 аша тамчыгызга шалтыратасызмы, яисә мәгълүмат-api кулланасызмы, data-toggle="dropdown"тамчы триггер элементында һәрвакыт булырга тиеш.

Вариантлар

Вариантларны мәгълүмат атрибутлары яки JavaScript аша бирергә мөмкин. Мәгълүмат атрибутлары өчен вариант исемен data-өстәгез data-offset="".

Исем	Тип	Килешү	Тасвирлау
офсет	саны \| кыл \| функциясе	0	Максатына караганда төшү төшүе. Офсетны билгеләү өчен функция кулланылганда, аның беренче аргументы буларак офсет мәгълүматлары булган объект белән атала. Функция бер үк структуралы объектны кайтарырга тиеш. Икенче аргумент буларак DOM төененең этәргеч элементы уза. Күбрәк мәгълүмат өчен Попперның офсет документларына мөрәҗәгать итегез .
флип	буле	дөрес	Белешмә элементында бер-берсенә кабатланган очракта, Тамчыга әйләнергә рөхсәт итегез. Күбрәк мәгълүмат өчен Попперның флип документларына мөрәҗәгать итегез .
чик	кыл \| элемент	'scrollParent'	Ашаучы менюның чик чикләре. `'viewport'`,, Һәм HTMLElement сылтамасының кыйммәтләрен кабул итә `'window'`( JavaScript кына). `'scrollParent'`Күбрәк мәгълүмат өчен Попперның профилактика Оверфлоу документларына мөрәҗәгать итегез .
сылтама	кыл \| элемент	'күчү'	Ачылучы менюның сылтама элементы. Кыйммәтләрен кабул итә `'toggle'`, `'parent'`яки HTMLElement сылтамасы. Күбрәк мәгълүмат өчен Popper's referenceObject документларына мөрәҗәгать итегез .
күрсәтү	кыл	'динамик'	Килешү буенча без динамик позиция өчен Popper кулланабыз. Моны сүндерегез `static`.
popperConfig	null \| объект	нуль	Bootstrap'ның default Popper конфигурациясен үзгәртү өчен, Popper конфигурациясен карагыз

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

Тамчы

Гомуми күзәтү

Уңайлык

Мисаллар

Бер төймә

Бөлү төймәсе

Зурлык

Ectionsнәлеш

Тамчы

Тамчы

Тамчы

Меню әйберләре

Актив

Инвалид

Меню тигезләү

Onsаваплы тигезләү

Меню эчтәлеге

Башлыклар

Бүләкләүчеләр

Текст

Формалар

Куллану

Мәгълүмат атрибутлары аша

JavaScript аша

`data-toggle="dropdown"`һаман кирәк

Вариантлар

Методлар

Вакыйгалар

Тамчы

Гомуми күзәтү

Уңайлык

Мисаллар

Бер төймә

Бөлү төймәсе

Зурлык

Ectionsнәлеш

Тамчы

Тамчы

Тамчы

Меню әйберләре

Актив

Инвалид

Меню тигезләү

Onsаваплы тигезләү

Меню эчтәлеге

Башлыклар

Тамчы башы

Бүләкләүчеләр

Текст

Формалар

Ачылу вариантлары

Куллану

Мәгълүмат атрибутлары аша

JavaScript аша

data-toggle="dropdown"һаман кирәк

Вариантлар

Методлар

Вакыйгалар

`data-toggle="dropdown"`һаман кирәк