Ашылмалы тізімдер
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 ашылмалы тізімдері жалпы және әртүрлі жағдайлар мен белгілеу құрылымдарына қолданылатын етіп жасалған. Мысалы, іздеу өрістері немесе кіру пішіндері сияқты қосымша кірістерді және пішінді басқару элементтерін қамтитын ашылмалы тізімдерді жасауға болады. Осы себепті, 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>
Және <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
Негізгі элементке қосу арқылы элементтердің оң жағындағы ашылмалы мәзірлерді іске қосыңыз .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 нұсқасына қатысты емес. Енді ашылмалы тізімде жай ғана s <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>
Жауапты туралау
Жауапты туралауды пайдаланғыңыз келсе, 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>
Қолданылуы
Деректер атрибуттары немесе JavaScript арқылы ашылмалы плагин ата-анадағы .show
сыныпты ауыстыру арқылы жасырын мазмұнды (ашылмалы мәзірлер) ауыстырады .dropdown-menu
. Атрибут data-toggle="dropdown"
қолданба деңгейінде ашылмалы мәзірлерді жабу үшін пайдаланылады, сондықтан оны әрқашан пайдалану жақсы идея.
$.noop
)
өңдегіштерді қосады . Бұл, әрине, ұсқынсыз
бұзақылық iOS іс-шаралар делегациясындағы қызықты мәселені шешу үшін қажет , әйтпесе ашылмалы тізімнен тыс кез келген жерде түрту ашылмалы тізімді жабатын кодты іске қосуға жол бермейді. Ашылмалы тізім жабылғаннан кейін бұл қосымша бос
өңдеушілер жойылады.
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-api пайдалануыңызға қарамастан, ашылмалы тізімнің data-toggle="dropdown"
іске қосу элементінде әрқашан болуы қажет.
Опциялар
Опцияларды деректер атрибуттары немесе JavaScript арқылы жіберуге болады. Деректер атрибуттары үшін параметр атауын ішінде data-
сияқты қосыңыз data-offset=""
.
Аты | Түр | Әдепкі | Сипаттама |
---|---|---|---|
офсет | саны | жол | функциясы | 0 | Ашылмалы тізімнің мақсатына қатысты ығысуы. Функция ығысуды анықтау үшін пайдаланылғанда, ол бірінші аргумент ретінде ығысу деректерін қамтитын нысанмен шақырылады. Функция бірдей құрылымы бар нысанды қайтаруы керек. Іске қосу элементі DOM түйіні екінші аргумент ретінде жіберіледі. Қосымша ақпаратты Поппердің офсеттік құжаттарынан қараңыз . |
айналдыру | логикалық | рас | Анықтамалық элементте қабаттасқан жағдайда, Ашылмалы тізімге айналдыруға рұқсат беріңіз. Қосымша ақпаратты Popper's flip docs бөлімінен қараңыз . |
шекара | жол | элемент | 'scrollParent' | Ашылмалы мәзірдің толып кету шектеуінің шекарасы. 'viewport' , 'window' , 'scrollParent' , немесе HTMLElement сілтемесінің мәндерін қабылдайды (тек JavaScript). Қосымша ақпарат алу үшін Поппердің алдын алу Толып кету құжаттарын қараңыз . |
анықтама | жол | элемент | 'қосу' | Ашылмалы мәзірдің анықтамалық элементі. 'toggle' , 'parent' немесе HTMLElement сілтемесінің мәндерін қабылдайды . Қосымша ақпарат алу үшін Поппердің referenceObject құжаттарын қараңыз . |
көрсету | жол | «динамикалық» | Әдепкі бойынша біз динамикалық орналасу үшін Попперді қолданамыз. Мұны арқылы өшіріңіз static . |
popperConfig | null | объект | null | Bootstrap әдепкі 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...
})