Source

Ашылмалы тізімдер

Bootstrap ашылмалы плагинімен сілтемелер тізімдерін және т.б. көрсету үшін мәтінмәндік қабаттасуды ауыстырыңыз.

Шолу

Ашылмалы тізімдер ауыспалы, сілтемелер тізімдерін көрсетуге арналған контекстік қабаттар және т.б. Олар қосылған Bootstrap ашылмалы JavaScript плагинімен интерактивті етіп жасалған. Олар меңзерді апару арқылы емес, басу арқылы ауыстырылады; бұл әдейі жасалған дизайн шешімі.

Ашылмалы тізімдер динамикалық орналасуды және көру аймағын анықтауды қамтамасыз ететін үшінші тарап кітапханасында құрылған, Popper.js . Bootstrap JavaScript алдында popper.min.js қосуды ұмытпаңыз немесе Popper.js бар bootstrap.bundle.min.js/ пайдаланыңыз bootstrap.bundle.js. Popper.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>Төменде оларды кез келген элементпен жұмыс істеуге қоюға болады :

Action Another action Something else here 
<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>элементтермен:

Action Another action Something else here 
<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>

Ең жақсы бөлігі - сіз мұны кез келген түйме нұсқасымен де жасай аласыз:

Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link 
<!-- 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кәдімгі түймелердің ашылмалы тізімдері үшін қосылғанын жою үшін пайдаланамыз. Бұл қосымша өзгертулер каретканы бөлу түймешігінің ортасында ұстайды және негізгі түйменің жанындағы сәйкес өлшемді соққы аймағын қамтамасыз етеді.

Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link 
<!-- 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.

Action Another action Something else here
Separated link
Action Another action Something else here
Separated link 
<!-- 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.

Action Another action Something else here
Separated link
Action Another action Something else here
Separated link 
<!-- 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.

Action Another action Something else here
Separated link
Action Another action Something else here
Separated link 
<!-- 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 нұсқасына қатысты емес. Енді ашылмалы тізімде жай ғана s <button>орнына элементтерді пайдалануға болады.<a>

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

Қолданылуы

.showДеректер атрибуттары немесе JavaScript арқылы ашылмалы плагин негізгі тізім элементіндегі сыныпты ауыстыру арқылы жасырын мазмұнды (ашылмалы мәзірлер) ауыстырады . Атрибут data-toggle="dropdown"қолданба деңгейінде ашылмалы мәзірлерді жабу үшін пайдаланылады, сондықтан оны әрқашан пайдалану жақсы идея.

Сенсорлы құрылғыларда ашылмалы тізімді ашу элементтің тікелей еншілес бөліктеріне бос ( $.noop) өңдегіштерді қосады . Бұл, әрине, ұсқынсыз бұзақылық iOS іс-шаралар делегациясындағы қызықты мәселені шешу үшін қажет , әйтпесе ашылмалы тізімнен тыс кез келген жерде түрту ашылмалы тізімді жабатын кодты іске қосуға жол бермейді. Ашылмалы тізім жабылғаннан кейін осы қосымша бос өңдеушілер жойылады.mouseover<body>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). Қосымша ақпаратты Popper.js's preventOverflow құжаттарынан қараңыз .

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