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

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>Төменде оларды кез келген элементпен жұмыс істеуге қоюға болады :

<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>элементтермен:

<div class="dropdown">
  <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>

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

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

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

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

Негізгі элементке қосу арқылы элементтердің оң жағындағы ашылмалы мәзірлерді іске қосыңыз .dropright.

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

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

Сондай-ақ, көмегімен интерактивті емес ашылмалы элементтерді жасауға болады .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" href="#">Disabled link</a>
  <a class="dropdown-item" href="#">Another link</a>
</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 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-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>

Ашылмалы тізімнің орнын өзгерту үшін data-offsetнемесе пайдаланыңыз .data-reference

<div class="d-flex">
  <div class="dropdown mr-1">
    <button type="button" class="btn btn-secondary dropdown-toggle" id="dropdownMenuOffset" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-offset="10,20">
      Offset
    </button>
    <div class="dropdown-menu" aria-labelledby="dropdownMenuOffset">
      <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" id="dropdownMenuReference" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-reference="parent">
      <span class="sr-only">Toggle Dropdown</span>
    </button>
    <div class="dropdown-menu" aria-labelledby="dropdownMenuReference">
      <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 арқылы ашылмалы плагин негізгі тізім элементіндегі сыныпты ауыстыру арқылы жасырын мазмұнды (ашылмалы мәзірлер) ауыстырады . Атрибут 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 құжаттарынан қараңыз .
анықтама	жол \| элемент	'қосу'	Ашылмалы мәзірдің анықтамалық элементі. `'toggle'`, `'parent'`немесе HTMLElement сілтемесінің мәндерін қабылдайды . Қосымша ақпаратты 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 ауысуларының аяқталуын күтеді).

$('#myDropdown').on('show.bs.dropdown', function () {
  // do something…
})

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

Шолу

Қол жетімділік

Мысалдар

Жалғыз түйме

Бөлу түймесі

Өлшемді анықтау

Бағыттар

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

Dropright

Солға қарай

Мәзір элементтері

Белсенді

Өшірілген

Мәзірді туралау

Мәзір мазмұны

Тақырыптар

Бөлгіштер

Мәтін

Пішіндер

Қолданылуы

Деректер атрибуттары арқылы

JavaScript арқылы

`data-toggle="dropdown"`әлі де қажет

Опциялар

Әдістері

Оқиғалар

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

Шолу

Қол жетімділік

Мысалдар

Жалғыз түйме

Бөлу түймесі

Өлшемді анықтау

Бағыттар

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

Dropright

Солға қарай

Мәзір элементтері

Белсенді

Өшірілген

Мәзірді туралау

Мәзір мазмұны

Тақырыптар

Ашылмалы тақырып

Бөлгіштер

Мәтін

Пішіндер

Ашылмалы опциялар

Қолданылуы

Деректер атрибуттары арқылы

JavaScript арқылы

data-toggle="dropdown"әлі де қажет

Опциялар

Әдістері

Оқиғалар

`data-toggle="dropdown"`әлі де қажет