Вклучете ги контекстуалните преклопувања за прикажување списоци со врски и повеќе со паѓачкиот приклучок 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 (освен кога се содржани во лента за навигација).
Респонзивно усогласување
Ако сакате да користите одговорно порамнување, оневозможете динамичко позиционирање со додавање на data-display="static"атрибутот и користете ги класите на варијации со одговор.
За да го усогласите десното паѓачко мени со дадената точка на прекин или поголема, додадете .dropdown-menu{-sm|-md|-lg|-xl}-right.
За да го усогласите левото паѓачко мени со дадената точка на прекин или поголема, додадете .dropdown-menu-rightи .dropdown-menu{-sm|-md|-lg|-xl}-left.
Забележете дека не треба да додавате data-display="static"атрибут на паѓачките копчиња во лентите за навигација, бидејќи 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
Поместување на паѓачкото мени во однос на неговата цел.
Кога функцијата се користи за одредување на поместувањето, таа се повикува со објект што ги содржи податоците за офсет како нејзин прв аргумент. Функцијата мора да врати објект со иста структура. Активирачкиот елемент DOM јазол се пренесува како втор аргумент.
Дозволете паѓачкото мени да се превртува во случај на преклопување на референтниот елемент. За повеќе информации погледнете ги прелистувачките документи на 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('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 транзициите).