Вклучете ги контекстуалните преклопувања за прикажување списоци со врски и повеќе со паѓачкиот приклучок 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>елементи:
Слично на тоа, креирајте паѓачки паѓачки копчиња со поделени копчиња со практично иста ознака како паѓачкото копче со едно копче, но со додавање на .dropdown-toggle-splitза соодветно растојание околу паѓачкото копче.
Ја користиме оваа дополнителна класа за да ја намалиме хоризонталата paddingод двете страни на таблата за 25% и да ја отстраниме онаа margin-leftшто е додадена за редовно паѓање на копчињата. Тие дополнителни промени го одржуваат држачот во центарот на копчето за разделување и обезбедуваат посоодветна големина погодена област до главното копче.
Историски содржината на паѓачкото мени мораше да биде линкови, но тоа веќе не е случај со v4. Сега можете опционално да користите <button>елементи во паѓачкото мени наместо само <a>s.
Можете исто така да креирате неинтерактивни паѓачки ставки со .dropdown-item-text. Слободно стилизирајте дополнително со приспособени CSS или текстуални алатки.
Стандардно, паѓачкото мени автоматски се позиционира 100% од врвот и долж левата страна на неговиот родител. Додај .dropdown-menu-rightво a .dropdown-menuнадесно порамни го паѓачкото мени.
Главите горе! Спуштањата се позиционирани благодарение на Popper.js (освен кога се содржани во лента за навигација).
Содржина на менито
Заглавија
Додајте заглавие за означување на делови од дејства во кое било паѓачко мени.
Ставете го секој текст во слободна форма во паѓачкото мени со текст и користете ги алатките за растојание . Забележете дека најверојатно ќе ви требаат дополнителни стилови на големина за да ја ограничите ширината на менито.
Некој пример текст што слободно тече во паѓачкото мени.
И ова е повеќе пример текст.
Форми
Ставете формулар во паѓачкото мени или направете го во паѓачко мени и користете маргини или алатки за полнење за да му го дадете потребниот негативен простор.
Преку атрибути на податоци или JavaScript, паѓачкиот приклучок ја менува скриената содржина (паѓачкото мени) со префрлање на .showкласата на матичната ставка од списокот. На data-toggle="dropdown"атрибутот се потпираме за затворање на паѓачките менија на ниво на апликација, па затоа е добра идеја секогаш да го користите.
На уредите со овозможен допир, со отворањето на паѓачкото мени се додаваат празни управувачи ( $.noop) mouseoverна најблиските деца на <body>елементот. Ова, секако, грдото хакирање е неопходно за да се надмине необичноста во делегирањето на настани на iOS , што инаку би спречило допир каде било надвор од паѓачкото мени да го активира кодот што го затвора паѓачкото мени. Откако ќе се затвори паѓачкото мени, овие дополнителни празни mouseoverуправувачи се отстрануваат.
Преку атрибути на податоци
Додадетеdata-toggle="dropdown" на врска или копче за да вклучите паѓачко мени.
Преку JavaScript
Повикајте ги паѓачките списоци преку JavaScript:
data-toggle="dropdown"сè уште се бара
Без оглед на тоа дали го повикувате паѓачкото мени преку JavaScript или наместо тоа го користите data-api, data-toggle="dropdown"секогаш се бара да биде присутен на активирачкиот елемент на паѓачкото мени.
Опции
Опциите може да се пренесат преку атрибути на податоци или JavaScript. За атрибути на податоци, додајте го името на опцијата на data-, како во data-offset="".
Име
Тип
Стандардно
Опис
офсет
број | низа | функција
0
Поместување на паѓачкото мени во однос на неговата цел. За повеќе информации погледнете ги офсет документите на Popper.js .
превртување
булови
вистина
Дозволете паѓачкото мени да се превртува во случај на преклопување на референтниот елемент. За повеќе информации погледнете ги прелистувачките документи на Popper.js .
граница
низа | елемент
'scrollParent'
Границата на ограничување за прелевање на паѓачкото мени. Ги прифаќа вредностите на 'viewport', 'window', 'scrollParent'или референца на HTMLElement (само JavaScript). За повеќе информации, погледнете ги документите за спречување на превртување на Popper.js .
референца
низа | елемент
'вклучи'
Референтен елемент од паѓачкото мени. Ги прифаќа вредностите на 'toggle', 'parent'или референца на HTMLElement. За повеќе информации, погледнете во referenceObject docs на Popper.js .
приказ
низа
'динамичен'
Стандардно, ние користиме Popper.js за динамично позиционирање. Оневозможете го ова со static.
Забележете кога boundaryе поставено на која било вредност освен 'scrollParent', стилот position: staticсе применува на .dropdownконтејнерот.
Методи
Метод
Опис
$().dropdown('toggle')
Го исклучува паѓачкото мени на дадена лента за навигација или навигација со јазичиња.
$().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 транзициите да се завршат).