Выпадающий список js: Подборка крутых выпадающих списков работающих на CSS и JavaScript

bootstrap. bundle.js

Если вы компилируете наши JS файлы, необходим util.js.

Доступность

Стандарт WAI ARIA описывает и определяет виджет role="menu" как настоящий виджет, но лишь для меню приложений, запускающих действия или функции. Меню

Выпадающие списки Bootstrap, с другой стороны, спроектированы для решения множества задач и могут работать в разных структурах разметки. Например, можно создать выпадающие списки, содержащие дополнительные поля ввода и элементы контроля форм, такие как поиск или поле ввода логина. По этой причине Bootstrap не ожидает (и не добавляет автоматически) ни один из атрибутов (role и aria-), необходимых для меню согласно стандарту ARIA.

Однако Bootstrap всегда добавляет встроенную поддержку для большинства стандартных взаимодействий меню и клавиатуры, таких как возможность двигаться через отдельные элементы класса .dropdown-item кнопками курсора на клавиатуре и закрывать меню кнопкой ESC.

Примеры

Оберните контролирующий элемент выпадающего элемента и выпадающее меню классом .dropdown или другим элементом с position: relative;. При необходимости выпадающие списки можно запускать из элементов <a> или <button>.

Выпадающие списки одинарных кнопок

Любую одинарную кнопку .btn можно превратить в контролирующий элемент (кнопка открытия\скрытия) при помощи некоторых изменений разметки. Вот как вы можете это сделать также и с элементами

<div>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Кнопка выпадающего списка
  </button>
  <div aria-labelledby="dropdownMenuButton">
    <a href="#">Action</a>
    <a href="#">Another action</a>
    <a href="#">Something else here</a>
  </div>
</div>

А вот так — с <a> элементами:

<div>
  <a href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Выпадающая ссылка
  </a>

  <div aria-labelledby="dropdownMenuLink">
    <a href="#">Action</a>
    <a href="#">Another action</a>
    <a href="#">Something else here</a>
  </div>
</div> 

Самое забавное, что это можно сделать с любым из вариантов кнопок: главная, вторичная, успех, инфо, предупреждение, опасность:

<!-- Example single danger button -->
<div>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Action
  </button>
  <div>
    <a href="#">Action</a>
    <a href="#">Another action</a>
    <a href="#">Something else here</a>
    <div></div>
    <a href="#">Separated link</a>
  </div>
</div> 

Выпадающие списки кнопок с разделенными зонами

По такому же принципу создавайте выпадающие списки в кнопках с разделенными зонами, используя почти такую же разметку, как в пункте выше, но с добавлением класса . dropdown-toggle-split для правильного отступа вокруг выпадающего элемента.

Тут используется дополнительный класс, который уменьшает на 25% горизонтальный паддинг padding

<!-- Example split danger button -->
<div>
  <button type="button">Action</button>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span>Toggle Dropdown</span>
  </button>
  <div>
    <a href="#">Action</a>
    <a href="#">Another action</a>
    <a href="#">Something else here</a>
    <div></div>
    <a href="#">Separated link</a>
  </div>
</div> 

Размеры

Выпадающие элементы кнопок работают с кнопками любых размеров, включая кнопки по умолчанию и кнопки с выпадающими элементами с разделенными зонами.

<!-- Large button groups (default and split) -->
<div>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Large button
  </button>
  <div>
    ...
  </div>
</div>
<div>
  <button type="button">
    Large button
  </button>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span>Toggle Dropdown</span>
  </button>
  <div>
    ...
  </div>
</div>

<!-- Small button groups (default and split) -->
<div>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Small button
  </button>
  <div>
    ...
  </div>
</div>
<div>
  <button type="button">
    Small button
  </button>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span>Toggle Dropdown</span>
  </button>
  <div>
    . ..
  </div>
</div>

Направления

Выпадающий вверх

Добавьте класс .dropup и выпадающий элемент будет выпадать вверх.

<!-- Default dropup button -->
<div>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropup
  </button>
  <div>
    <!-- Dropdown menu links -->
  </div>
</div>

<!-- Split dropup button -->
<div>
  <button type="button">
    Split dropup
  </button>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span>Toggle Dropdown</span>
  </button>
  <div>
    <!-- Dropdown menu links -->
  </div>
</div>

Выпадающий вправо

Добавьте класс .dropright и выпадающий элемент будет выпадать вправо.

<!-- Default dropright button -->
<div>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropright
  </button>
  <div>
    <!-- Dropdown menu links -->
  </div>
</div>

<!-- Split dropright button -->
<div>
  <button type="button">
    Split dropright
  </button>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span>Toggle Dropright</span>
  </button>
  <div>
    <!-- Dropdown menu links -->
  </div>
</div>

Выпадающий влево

Добавьте класс .dropleft и выпадающий элемент будет выпадать влево.

<!-- Default dropleft button -->
<div>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropleft
  </button>
  <div>
    <!-- Dropdown menu links -->
  </div>
</div>

<!-- Split dropleft button -->
<div>
  <div role="group">
    <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      <span>Toggle Dropleft</span>
    </button>
    <div>
      <!-- Dropdown menu links -->
    </div>
  </div>
  <button type="button">
    Split dropleft
  </button>
</div>

Исторически содержимым выпадающих элементов всегда были ссылки, но Bootstrap изменил это. Сейчас вы можете использовать в качестве содержимого выпадающих элементов <button>, а не только <a>.

<div>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown
  </button>
  <div aria-labelledby="dropdownMenu2">
    <button type="button">Action</button>
    <button type="button">Another action</button>
    <button type="button">Something else here</button>
  </div>
</div>

Вы также можете создать неинтерактивные выпадающие элементы класса .dropdown-item-text. Свободно стилизуйте их обычным CSS.

<div>
  <span>Dropdown item text</span>
  <a href="#">Action</a>
  <a href="#">Another action</a>
  <a href="#">Something else here</a>
</div>

Активные элементы меню

Добавьте класс . active к элементу выпадающего меню для его стилизации как активированного.

<div>
  <a href="#">Regular link</a>
  <a href="#">Active link</a>
  <a href="#">Another link</a>
</div>

Неактивные элементы меню

Добавьте класс .disabled к элементу выпадающего меню для его стилизации как деактивированного.

<div>
  <a href="#">Regular link</a>
  <a href="#">Disabled link</a>
  <a href="#">Another link</a>
</div>

По умолчанию выпадающее меню автоматически расположено в 100% от вершины и на левой стороне родителя. Добавьте класс .dropdown-menu-right к элементу класса .dropdown-menu для выравнивания выпадающего меню по правой стороне.

Внимание! Выпадающие списки позиционируются благодаря Popper. js (за исключением случаев, когда они содержатся в navbar).

<div>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Right-aligned menu
  </button>
  <div>
    <button type="button">Action</button>
    <button type="button">Another action</button>
    <button type="button">Something else here</button>
  </div>
</div>

Отзывчивое выравнивание

Если вы хотите использовать адаптивное выравнивание, отключите динамическое позиционирование, добавив атрибут data-display="static", и используйте классы адаптивных вариантов.

Чтобы выровнять выпадающее меню вправо с заданной точкой останова или больше, добавьте .dropdown-menu{-sm|-md|-lg|-xl}-right.

<div>
  <button type="button" data-toggle="dropdown" data-display="static" aria-haspopup="true" aria-expanded="false">
    Left-aligned but right aligned when large screen
  </button>
  <div>
    <button type="button">Action</button>
    <button type="button">Another action</button>
    <button type="button">Something else here</button>
  </div>
</div>

Чтобы выровнять выпадающее меню влево с заданной точкой останова или более, добавьте . dropdown-menu-right и .dropdown-menu{-sm|-md|-lg|-xl}-left.

<div>
  <button type="button" data-toggle="dropdown" data-display="static" aria-haspopup="true" aria-expanded="false">
    Right-aligned but left aligned when large screen
  </button>
  <div>
    <button type="button">Action</button>
    <button type="button">Another action</button>
    <button type="button">Something else here</button>
  </div>
</div>

Обратите внимание, что вам не нужно добавлять атрибут data-display="static" к выпадающим кнопкам на панелях навигации, поскольку Popper.js не используется на панелях навигации.

Добавьте заголовок, чтобы обозначить секции действий любого выпадающего меню.

<div>
  <h6>Dropdown header</h6>
  <a href="#">Action</a>
  <a href="#">Another action</a>
</div>

Разделители меню

Разделяйте группы родственных элементов меню разделителем.

<div>
  <a href="#">Action</a>
  <a href="#">Another action</a>
  <a href="#">Something else here</a>
  <div></div>
  <a href="#">Separated link</a>
</div>

Текст меню

Размещайте любой текст внутри выпадающего меню с текстом, используя утилиты отступа. Заметьте, что вам понадобится дополнительная настройка размеров для ограничения ширины меню.

<div>
  <p>
    Some example text that's free-flowing within the dropdown menu.
  </p>
  <p>
    And this is more example text.
  </p>
</div>

Формы меню

Расположите форму внутри выпадающего меню, и используйте утилиты паддинга или марджина для ее уплотнения.

<div>
  <form>
    <div>
      <label for="exampleDropdownFormEmail1">Email address</label>
      <input type="email" placeholder="email@example. com">
    </div>
    <div>
      <label for="exampleDropdownFormPassword1">Password</label>
      <input type="password" placeholder="Password">
    </div>
    <div>
      <div>
        <input type="checkbox">
        <label for="dropdownCheck">
          Remember me
        </label>
      </div>
    </div>
    <button type="submit">Sign in</button>
  </form>
  <div></div>
  <a href="#">New around here? Sign up</a>
  <a href="#">Forgot password?</a>
</div>

<form>
  <div>
    <label for="exampleDropdownFormEmail2">Email address</label>
    <input type="email" placeholder="[email protected]">
  </div>
  <div>
    <label for="exampleDropdownFormPassword2">Password</label>
    <input type="password" placeholder="Password">
  </div>
  <div>
    <div>
      <input type="checkbox">
      <label for="dropdownCheck2">
        Remember me
      </label>
    </div>
  </div>
  <button type="submit">Sign in</button>
</form>

Параметры раскрывающегося списка

Используйте data-offset или data-reference, чтобы изменить местоположение раскрывающегося списка.

<div>
  <div>
    <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-offset="10,20">
      Offset
    </button>
    <div aria-labelledby="dropdownMenuOffset">
      <a href="#">Action</a>
      <a href="#">Another action</a>
      <a href="#">Something else here</a>
    </div>
  </div>
  <div>
    <button type="button">Reference</button>
    <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-reference="parent">
      <span>Toggle Dropdown</span>
    </button>
    <div aria-labelledby="dropdownMenuReference">
      <a href="#">Action</a>
      <a href="#">Another action</a>
      <a href="#">Something else here</a>
      <div></div>
      <a href="#">Separated link</a>
    </div>
  </div>
</div>

Использование

Через атрибуты или JavaScript, плагин выпадающих элементов изменяет (показывает скрытоесодержимое) состояние содержимого (выпадающие меню) изменением класса . show элемента родительского списка. Атрибут data-toggle="dropdown" отвечает за закрытие выпадающих меню на уровне приложения, так что будет неплохой идеей всегда использовать данный атрибут.

На устройствах, активируемых касанием, открытие выпадающего элемента добавляет пустые обработчики ($.noop) mouseover к непосредственным дочерним элемента <body>. Этот, по общему мнению, некрасивый хак (без которого любое касание в iOS вне выпадающего элемента не закроет выпадающий элемент) необходим для обработки проблемы с делегированием событий в iOS. Как только выпадающий элемент закрыт, эти дополнительные пустые обработчики удаляются.

Через атрибуты

Добавьте к ссылке или кнопке атрибут data-toggle="dropdown" для скрытия\показа выпадающего элемента.

<div>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown trigger
  </button>
  <div aria-labelledby="dLabel">
    . ..
  </div>
</div>

Через JS

Управляйте выпадающими элементами с помощью JavaScript:

$('.dropdown-toggle').dropdown()

Независимо от того, управляете вы выпадающим элементом через JavaScript или атрибутами, атрибут data-toggle="dropdown" всегда необходим в элементе, запускающем выпадающий элемент.

Параметры

Передавайте параметры через JavaScript или атрибуты. Если используются атрибуты, добавляйте название параметра к data- как в data-offset="".

Название	Тип	По умолч.	Описание
offset	number | string | function	0	Смещение раскрывающегося списка относительно его цели. Когда функция используется для определения смещения, она вызывается с объектом, содержащим данные смещения в качестве первого аргумента. Функция должна возвращать объект с такой же структурой. Узел DOM запускающего элемента передается в качестве второго аргумента. Смещение выпадающего элемента относительно его триггера. См. отступы Popper.js
flip	boolean	true	Позволяет выпадающему элементу перевернуться, если произошло перекрытие другого элемента. Больше информации: flip docs.
boundary	string | element	‘scrollParent’	Граница ограничения переполнения выпадающего меню. Принимает значения 'viewport', 'window', 'scrollParent' или ссылку HTMLElement (только для JavaScript). Для получения дополнительной информации обратитесь к документации preventOverflow от Popper.js.
reference	string | element	‘toggle’	Справочный элемент выпадающего меню. Принимает значения 'toggle', 'parent', или ссылка на HTMLElement. Для получения дополнительной информации обратитесь к Popper.js’s referenceObject docs.
display	string	dynamic | static	По умолчанию мы используем Popper.js для динамического позиционирования. Для отключения используйте static.
popperConfig	null | object	null	Чтобы изменить конфигурацию Popper.js по умолчанию в Bootstrap, смотрите Конфигурацию Popper.js.

Обратите внимание, что если для boundary установлено значение, отличное от 'scrollParent', позиция position: static применяется к контейнеру .dropdown.

Методы

Метод	Описание
$().dropdown('toggle')	Задействует поведение toggle в выпадающем меню данного навбара или при навигации «TAB»ом.
$(). dropdown('show')	Показывает выпадающее меню данной навигационной панели или вкладки.
$().dropdown('hide')	Скрывает выпадающее меню данной навигационной панели или вкладки.
$().dropdown('update')	Обновляет позицию выпадания элемента.
$().dropdown('dispose')	Уничтожает выпадающий элемент.

События

Все события выпадающих элементов наступают в родительском элементе класса .dropdown-menu и несут свойство relatedTarget, значение которого равно элементу якоря (ссылка, т.е. <a>), запускающего функциональность toggle.

Событие	Описание
show.bs.dropdown	Это событие наступает немедленно по вызову экземпляра метода show.
shown. bs.dropdown	Это событие наступает, когда выпадающий элемент стал видимым юзеру (будет ждать завершения CSS-переходов).
hide.bs.dropdown	Это событие наступает немедленно по вызову экземпляра метода hide.
hidden.bs.dropdown	Это событие наступает, когда выпадающий элемент стал невидимым юзеру (будет ждать завершения CSS-переходов).

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

Нативные Select’ы на любой вкус.. В данной статье предлагаю поговорить о… | by Mostovoy Nikita

Какие отличительные черты кнопки от селекта? Кнопка не имеет иконки выпадающего списка справа, текст у кнопки, как правило, центрируется по середине.

Поиск решения

Контрол <select> не предполагает использования по типу “кнопка” по умолчанию и не поддерживает выравнивание текста любым отличным способ от “слева” (есть свойство text-indent, но оно не гарантирует выравнивание текста по центру). Таким образом, главной задачей стал поиск решения выравнивания текста.

Заход #1 Labels

Первой попыткой стала стилизация label как кнопки и работа с select через связку id-for:

Данный способ мог бы оказаться наиболее подходящим, если бы не критическая проблема — клик на label не открывает select :-/

Заход #2 JS

Вторая попытка — решить проблему c помощью js:

На данном этапе было рассмотрено несколько подходов к решению:

1. Попытка стриггерить событие клика.
2. Попытка раскрыть список программно.

Данный эксперимент показал, что <select> не “обрабатывает” события ни клика, ни моделирования событий mousedown\mouseup или touchstart\touchend. “Раскрыть” список можно только изменив его аттрибут size, но это может нарушить существующую верстку страницы и не является выпадающим меню. Эксперименты с JavaScript выложил — http://jsbin.com/bevegotela/edit?html,js,output . Поэтому данный способ тоже потерпел неудачу.

Заход #3 “визуальный подмен”

Третьим способом, который я рассматривал, стал способ визуальной подмены. Для этого отображаем обычную кнопку, при этом поверх кнопки устанавливаем <select>.

Шаг 1: определяем кнопку, не забывая задать значения для :hover и :active

Полученная кнопка:

Теперь создаем новый блок — select-button. Он будет состоять из блока: select-button, модификатора для блока select-button_stretched (для растяжения на всю ширину) и элемента — селекта select-button__select:

Самой важной строкой в данном коде является 24 строка — opacity: 0.

Представляем нашу html структуру следующим образом:

Итак, в чем состоит данный подход? Мы создаем блок select-button, который отображается как position:relative, внутрь этого блока инкапсулируем блок button и элемент .select-button__select, который с помощью абсолютного позиционирования “накрывает” .button по всему размеру, физически “закрывая” кнопку. Opacity: 0, в свое время гарантирует, что пользователь будет видеть только кнопку. Такой подход позволяет решить задачу стилизации селекта как кнопки.

Однако, у данного подхода есть свои минусы. Перечислим их:

1. Кнопка потеряла стили для :hover и :active state, так как на самом деле пользователь делает :hover и :active с селектом.
2. Табуляция идет как по селектам, так и по кнопкам. Причем клик на кнопку ничего не дает.

Попробуем разрешить и эти проблемы:

Создадим микс select-button__button для кнопки и определим его поведение:

Таким образом, нами будет решен вопрос :hover для кнопки. :active же решать не надо, так как при клике на кнопку будет отображен select, и кнопка в любом случае не сможет быть в состоянии :active.

Остается последняя проблема — работа с :focus. Данную задачу выполним в несколько шагов:

1. Запрещаем табуляцию по кнопкам, добавляем tabindex=”-1″
2. Переносим в html структуре select перед button. Выставляем для button (при помощи элемента .select-button__button) z-index: 1, а для .select-button__select: z-index: 2
3. При помощи селектора . select-button__select:focus + .select-button__button задаем стили для :focus. Например, в моем случае, это может быть border-color: #0c59a7;

Приведем конечный результат (с примером работы)— jsBin http://jsbin.com/qobado/edit?html,css,output

Полученный код:

Браузерная поддержка

Данный код достаточно прост и поэтому работает корректно во всех браузерах, которые поддерживают “стилизацию” селекта как такового. Все современные браузеры работают с данными селектами корректно. Если рассматривать браузеры “постарше”, то проблемы возникают с IE9-. Это происходит по причине, что данные браузеры не позволяют стилизовать селект. Чтобы обработать данный случай достаточно добавить стили для “старых” браузеров, которые расширят селект по высоте (чтобы был равен кнопке). Таким образом, селект займет все необходимое пространство и пользователи старых браузеров не получат проблем с функционалом.

Данный юзкейс может быть применен в таких местах, когда по нажатию на кнопку пользователю необходимо предоставить “диалог” уточнения своего выбора. Например, запрос на выбор города для того, чтобы затем не просто “отобразить” город в селекте, но и изменить “состояние” приложения. В случае с городом, это может быть добавление города в список городов.

Другим примером является выбор дополнительного метода связи при редактировании контактов в мобильном резюмебилдере сайта http://m.hh.ru . При клике на кнопку выбора пользователю предоставляется диалог выбора способа связи, и после выбора пункта на форму заполнения данных добавляются новые поля.

Не работает выпадающий список из bootstrapa 4.5, в чем проблема?

У вас Bootstrap 4 неверно подключен в js кодах. Там их несколько должно быть, тут есть пример с подключением Bootstrap 4 через CDN:

https://fructcode.com/ru/courses/bootstrap4/interactive-containers/

Вот так код будет выглядеть и работает выпадающее меню:

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn. bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

    <!-- Styles -->
    <link rel="stylesheet" href="style.css">

    <title>Hello, world!</title>
  </head>
  <body>
<nav>
    <a href="#">Navbar</a>
    <button type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span></span>
    </button>

    <div>
        <ul>
            <li>
                <a href="#">Home <span>(current)</span></a>
            </li>
            <li>
                <a href="#">Link</a>
            </li>
            <li>
                <a href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    Dropdown
                </a>
                <div aria-labelledby="navbarDropdown">
                    <a href="#">Action</a>
                    <a href="#">Another action</a>
                    <div></div>
                    <a href="#">Something else here</a>
                </div>
            </li>
            <li>
                <a href="#">Disabled</a>
            </li>
        </ul>
        <form>
            <input type="search" placeholder="Search" aria-label="Search" />
            <button type="submit">Search</button>
        </form>
    </div>
</nav>


    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper. js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
  </body>
</html>

student_F3tCJLdd

Выпадающие списки

Выпадающие списки переключаемы, контекстно перекрываются для отображения списков ссылок и многое другое. Они интерактивны с включенным плагином выпадающих списков JavaScript. Они переключаются нажатием, а не при наведении курсора; Это намеренное дизайнерское решение.

Содержание

Примеры

Оберните переключатель выпадающего списка (ваша кнопка или ссылка) и раскрывающееся меню внутри .dropdown, или другой элемент, который объявляет position: relative;. Выпадающие списки могут запускаться из элементов <a> или <button>, чтобы лучше соответствовать вашим потенциальным потребностям.

Выпадающие списки одной кнопки

Любой отдельный .btn можно превратить в выпадающий переключатель с некоторыми изменениями разметки. Вот как вы можете заставить их работать с элементами <button>:

<div>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown button
  </button>
  <div aria-labelledby="dropdownMenuButton">
    <a href="#">Action</a>
    <a href="#">Another action</a>
    <a href="#">Something else here</a>
  </div>
</div>

И с элементами <a>:

<div>
  <a href="https://example. com" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown link
  </a>

  <div aria-labelledby="dropdownMenuLink">
    <a href="#">Action</a>
    <a href="#">Another action</a>
    <a href="#">Something else here</a>
  </div>
</div>

Самое приятное то, что вы можете сделать это с любым вариантом кнопки:

<!-- Example single danger button -->
<div>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Action
  </button>
  <div>
    <a href="#">Action</a>
    <a href="#">Another action</a>
    <a href="#">Something else here</a>
    <div></div>
    <a href="#">Separated link</a>
  </div>
</div>

Выпадающие списки разделенных кнопок

Аналогичным образом создайте выпадающие списки разделенных кнопок с практически такой же разметкой, что и выпадающие списки с одной кнопкой, но с добавлением . dropdown-toggle-split для правильного интервала вокруг выпадающей каретки.

Мы используем этот дополнительный класс, чтобы уменьшить горизонтальный padding с обеих сторон каретки на 25% и удалить margin-left добавленный для обычных выпадающих кнопок. Эти дополнительные изменения удерживают курсор, центрированный в разделенной кнопке, и обеспечивают более подходящую область попадания рядом с главной кнопкой.

<!-- Example split danger button -->
<div>
  <button type="button">Action</button>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span>Toggle Dropdown</span>
  </button>
  <div>
    <a href="#">Action</a>
    <a href="#">Another action</a>
    <a href="#">Something else here</a>
    <div></div>
    <a href="#">Separated link</a>
  </div>
</div>

Изменение размера

Выпадающие кнопки работают с кнопками всех размеров, включая кнопки по умолчанию и разделенные кнопки.

<!-- Large button groups (default and split) -->
<div>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Large button
  </button>
  <div>
    ...
  </div>
</div>
<div>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Large button
  </button>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span>Toggle Dropdown</span>
  </button>
  <div>
    ...
  </div>
</div>

<!-- Small button groups (default and split) -->
<div>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Small button
  </button>
  <div>
    . ..
  </div>
</div>
<div>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Small button
  </button>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span>Toggle Dropdown</span>
  </button>
  <div>
    ...
  </div>
</div>

Вариант сброса

Вызовите выпадающие меню над элементами, добавив .dropup к родительскому элементу.

<!-- Default dropup button -->
<div>
  <button type="button">Dropup</button>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span>Toggle Dropdown</span>
  </button>
  <div>
    <!-- Dropdown menu links -->
  </div>
</div>

<!-- Split dropup button -->
<div>
  <button type="button">
    Split dropup
  </button>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span>Toggle Dropdown</span>
  </button>
  <div>
    <!-- Dropdown menu links -->
  </div>
</div>

должно было быть ссылкой, но это уже не так с v4. Теперь вы можете опционально использовать элементы <button> в выпадающих списках вместо просто <a>.

<div>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown
  </button>
  <div aria-labelledby="dropdownMenu2">
    <button type="button">Action</button>
    <button type="button">Another action</button>
    <button type="button">Something else here</button>
  </div>
</div>

По умолчанию выпадающее меню автоматически позиционируется на 100% сверху и вдоль левой стороны его родителя. Добавьте .dropdown-menu-right в .dropdown-menu, чтобы выровнять выпадающее меню по правому краю.

Берегись! Выпадающие списки позиционируются только с помощью CSS и могут потребоваться некоторые дополнительные стили для точного выравнивания.

<div>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    This dropdown's menu is right-aligned
  </button>
  <div>
    <button type="button">Action</button>
    <button type="button">Another action</button>
    <button type="button">Something else here</button>
  </div>
</div>

Добавьте заголовок для обозначения разделов действий в любом раскрывающемся меню.

<div>
  <h6>Dropdown header</h6>
  <a href="#">Action</a>
  <a href="#">Another action</a>
</div>

Отделите группы связанных элементов меню с помощью разделителя.

<div>
  <a href="#">Action</a>
  <a href="#">Another action</a>
  <a href="#">Something else here</a>
  <div></div>
  <a href="#">Separated link</a>
</div>

Добавьте . disabled к элементам в выпадающем списке, чтобы стилизовать их как отключенные.

<div>
  <a href="#">Regular link</a>
  <a href="#">Disabled link</a>
  <a href="#">Another link</a>
</div>

Применение

С помощью атрибутов данных или JavaScript плагин выпадающего списка переключает скрытый контент (выпадающие меню) путем переключения класса .show на родительский элемент списка.

На мобильных устройствах при раскрытии выпадающего списка добавляется .dropdown-backdropв качестве области подключения для закрытия раскрывающихся меню при нажатии вне меню, что необходимо для правильной поддержки iOS. Это означает, что переход из раскрывающегося меню в другое раскрывающееся меню требует дополнительного нажатия на мобильном устройстве.

Примечание. Атрибут data-toggle="dropdown" используется для закрытия раскрывающихся меню на уровне приложения, поэтому рекомендуется всегда использовать его.

Через атрибуты данных

Добавьте data-toggle="dropdown" в ссылку или кнопку, чтобы переключить выпадающий список.

<div>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown trigger
  </button>
  <div aria-labelledby="dLabel">
    ...
  </div>
</div>

Через JavaScript

Вызовите выпадающие списки с помощью JavaScript:

$('.dropdown-toggle').dropdown()

Независимо от того, вызываете ли вы выпадающий список через JavaScript или вместо этого используете data-api, всегда требуется, чтобы data-toggle="dropdown" присутствовал в элементе выпадающего элемента.

Опции

Нет.

Методы

События

Все выпадающие события запускаются в родительском элементе .dropdown-menu и имеют свойствоrelatedTarget, значение которого является переключающим элементом привязки.

Событие	Описание
show.bs.dropdown	Это событие срабатывает сразу после вызова метода экземпляра показа.
shown.bs.dropdown	Это событие вызывается, когда выпадающий список становится видимым для пользователя (будет ждать переходов CSS, чтобы завершить).
hide.bs.dropdown	Это событие вызывается немедленно при вызове метода hide instance.
hidden.bs.dropdown	Это событие вызывается, когда раскрывающийся список закончил скрываться от пользователя (будет ждать переходов CSS, чтобы завершить).

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

Лучшее бесплатное раскрывающееся меню в JavaScript и CSS

Библиотека JavaScript, которая преобразует обычное поле выбора в настраиваемый раскрывающийся список с поддержкой поиска в реальном времени, изображений параметров, множественного выбора и т. Д.

Обычный JavaScript для расширения встроенного компонента раскрывающихся списков Bootstrap 5, который позволяет переключать неограниченный уровень раскрывающихся списков при щелчке или наведении курсора.

Библиотека CSS / SCSS для создания настраиваемого анимированного раскрывающегося или раскрывающегося списка с помощью простого HTML.

Плагин Vanilla JavaScript, который преобразует собственный элемент select в анимированный, настраиваемый, удобный для мобильных устройств раскрывающийся список.

vanilla-select — это чистый ванильный JavaScript-плагин, используемый для рендеринга динамического раскрывающегося списка / меню с возможностью поиска, чтобы заменить собственное поле выбора.

Стандартная библиотека переключения содержимого JavaScript, предназначенная для разработчиков, чтобы быстро создавать аккордеон, всплывающую подсказку, всплывающее окно, раскрывающееся меню, переключаемое меню, компоненты содержимого с вкладками в веб-приложении.

Плагин fstdropdown JavaScript превращает обычный элемент select в раскрывающийся список в стиле Bootstrap с возможностью поиска с использованием чистого JavaScript и CSS.

dropmic — это крошечная библиотека JS с нулевой зависимостью, которая добавляет минимальное чистое раскрывающееся / всплывающее меню к любому элементу при запуске.

tail.select — это переписанная версия плагина jQuery tail.select, которую можно использовать для украшения и улучшения поля выбора по умолчанию без каких-либо зависимостей.

slim-select — это небольшой плагин JavaScript, не зависящий от зависимостей, для создания выпадающего списка с возможностью поиска и множественного выбора из обычного элемента select.

, выпадающее меню — npm

Компонент Simple Dropdown для React, вдохновленный реакцией выбора

Почему

• Элемент выбора HTML по умолчанию сложно стилизовать
• И иногда нам также нужны сгруппированные меню
• , если вы хотите более продвинутый выбор, отметьте response-select

Установка

  // с нпм
$ npm install response-dropdown --save

// пряжей
$ yarn добавить выпадающий список реакции
  

История изменений

Если вы хотите поддерживать версию React под v0.13, используйте [email protected]

Использование

Это базовое использование выпадающего меню реакции

 импортировать раскрывающийся список из раскрывающегося списка;
импортировать 'response-dropdown / style.css';

const options = [
  'один два три'
];
const defaultOption = опции [0];
; 

Опции

Варианты плоских массивов

const options = [
  'один два три'
]; 

Параметры массива объектов

const options = [
  {value: 'one', label: 'One'},
  {значение: 'два', метка: 'Два', имя класса: 'myOptionClassName'},
  {
   тип: 'группа', имя: 'группа1', элементы: [
     {значение: 'три', метка: 'Три', className: 'myOptionClassName'},
     {значение: 'четыре', метка: 'Четыре'}
   ]
  },
  {
   тип: 'группа', имя: 'группа2', элементы: [
     {значение: 'пять', метка: 'Пять'},
     {значение: 'шесть', метка: 'Шесть'}
   ]
  }
]; 

При использовании параметров объекта вы можете добавить к каждому параметру строку className для дальнейшей настройки раскрывающегося списка, например.грамм. добавление иконок в опции

Отключение раскрывающегося списка

Просто передайте отключенное логическое значение в раскрывающийся список, чтобы отключить его. Это также даст вам класс .Dropdown-disabled для элемента , так что вы можете стилизовать его самостоятельно.

 <Раскрывающийся список отключен onChange = {this._onSelect} value = {defaultOption} placeholder = "Выберите вариант" />; 

Настройка раскрывающегося списка

название класса

Свойство className передается в оболочку div , которая также имеет класс Dropdown-root .

 ; 

controlClassName

Свойство controlClassName передается вниз элементу управления div , который также имеет класс Dropdown-control .

 ; 

placeholderClassName

Свойство placeholderClassName передается вниз к плейсхолдеру div , который также имеет класс Dropdown-placeholder .

 ; 

menuClassName

Свойство menuClassName передается вниз в меню div (тот, который открывает и закрывает и содержит параметры), которое также имеет класс Dropdown-menu .

 <раскрывающееся менюClassName = 'myMenuClassName' />; 

arrowClassName

Свойство arrowClassName передается вниз стрелке span , которая также имеет класс Dropdown-arrow .

 ; 

стрелка закрыта , стрелка открыта

Стрелка Стрелка Закрыто и Стрелка Открытие props позволяет передавать пользовательские элементы для стрелок открытого / закрытого состояния.

 <раскрывающийся список
  arrowClosed = {}
  arrowOpen = {}
/>; 

Дополнительные примеры см. В папке с примерами.

Пример выполнения

  $ npm начало
  

Лицензия

MIT | Сборка для проекта CSViz @Wiredcraft

Выпадающий список | Компоненты | BootstrapVue

Выпадающие списки — это переключаемые контекстные наложения для отображения списков ссылок и действий в формате раскрывающегося меню.

(или известный под его более коротким псевдонимом ). Компоненты — это переключаемые контекстные наложения для отображения списков ссылок и многое другое. Они переключаются щелчком (или нажатием пробела или вводом при фокусировке), а не при наведении курсора; это намеренное дизайнерское решение.

 

  
     Первое действие 
     Второе действие 
     Третье действие 
     
     Активное действие 
     Действие отключено 
  


 

Содержимое кнопки

Вы можете настроить текст раскрывающейся кнопки, используя либо опору text (показанную в предыдущих примерах), либо слот button-content вместо text prop.Слот button-content позволяет использовать базовый HTML и значки в содержимом кнопки.

Если присутствуют и свойство text , и слот button-content , то слот button-content будет иметь приоритет.

 

  
     Элемент 
     Другой элемент 
  

  
    <шаблон # button-content>
      Пользовательский  контент  с  HTML  через слот
    
     Элемент 
     Другой элемент 
  


 

Позиционирование

Раскрывающийся список поддерживает различное позиционирование, такое как выравнивание по левому и правому краю, выпадающее и выпадающее, а также поддерживает автоматическое переворачивание (выпадающее в раскрывающееся и наоборот), когда меню выходит за пределы видимой области экрана.

Раскрывающееся меню может быть выровнено по левому краю (по умолчанию) или по правому краю относительно кнопки над ним. Чтобы выпадающий список был выровнен по правому краю, установите правую опору .

 

  
     Действие 
     Другое действие 
     Здесь еще кое-что 
  

  
     Действие 
     Другое действие 
     Здесь еще кое-что 
  


 

Dropup

Превратите раскрывающееся меню в раскрывающееся меню, установив значение dropup prop.

 

  
     Действие 
     Другое действие 
     Здесь еще кое-что 
  


 

Выпадение вправо или влево

Превратите раскрывающееся меню в раскрывающееся меню, установив опцию droppright prop. Или превратите его в раскрывающееся меню, установив для правой опоры dropleft значение true.

с вертикальной посадкой имеет приоритет над с вертикальной посадкой . Ни dropup , ни dropleft не имеют никакого эффекта, если установлен dropup .

 

  
     Действие 
     Другое действие 
     Здесь еще кое-что 
  

  
     Действие 
     Другое действие 
     Здесь еще кое-что 
  


 

Авто «переворачивание»

По умолчанию раскрывающиеся списки могут переворачиваться вверх или вниз в зависимости от их текущего положения в области просмотра.Чтобы отключить эту функцию автоматического переворачивания, установите опору no-flip prop.

Хотите немного отодвинуть меню от кнопок переключения? Затем используйте опору смещение , чтобы указать количество пикселей, которые нужно сдвинуть вправо (или влево, если отрицательное значение) от переключателя:

• Задается как количество пикселей: положительное для сдвига вправо, отрицательное для сдвига влево.
• Укажите расстояние в единицах CSS (например, 0,3 rem , 4px , 1,2em и т. Д.) передается как строка.

 

  
     Действие 
     Другое действие 
     Здесь еще кое-что 
  


 

Граничное ограничение

По умолчанию раскрывающиеся списки визуально ограничены родительским элементом прокрутки, чего достаточно в большинстве ситуаций.Однако, если вы поместите раскрывающийся список внутри элемента, для которого задано переполнение : прокрутка (или аналогичный), раскрывающееся меню может — в некоторых ситуациях — обрезаться. Чтобы обойти это, вы можете указать граничный элемент через опору border prop. Поддерживаемые значения: 'scrollParent' (по умолчанию), 'viewport' , 'window' или ссылка на элемент HTML. Граничное значение передается непосредственно в параметр конфигурации Popper.js sizesElement .

Примечание: Когда граница — любое значение, отличное от значения по умолчанию 'scrollParent' , стиль position: static применяется к корневому элементу раскрывающегося компонента, чтобы позволить меню «разорваться». из «контейнера прокрутки». В некоторых ситуациях это может повлиять на ваш макет или расположение кнопки запуска раскрывающегося списка. В этих случаях вам может потребоваться заключить раскрывающийся список в другой элемент.

Расширенная конфигурация Popper.js

Если вам нужен продвинутый Popper.js, чтобы раскрывающиеся списки соответствовали вашим потребностям, вы можете использовать опору popper-opts для передачи пользовательского объекта конфигурации, который будет полностью объединен со значениями по умолчанию BootstrapVue.

Зайдите в документацию Popper.js, чтобы увидеть все параметры конфигурации.

Примечание : реквизиты , смещение , граница и no-flip могут потерять свое действие при перезаписи конфигурации Popper.js.

Поддержка разделенных кнопок

Создайте разделенную кнопку раскрывающегося списка, где левая кнопка обеспечивает стандартное событие click и поддержку ссылок, а правая часть — это кнопка переключения раскрывающегося меню.

 

  
     Действие 
     Другое действие 
     Здесь еще кое-что ... 
  


 

Поддержка ссылки разделенной кнопки

Левая разделенная кнопка по умолчанию представляет собой элемент типа (точнее, ).Чтобы преобразовать эту кнопку в ссылку или , укажите href через опору split-href или ссылку на маршрутизатор с на через опору split-to , сохраняя при этом внешний вид кнопка.

 

  
     Действие 
     Другое действие 
     Здесь что-то еще... 
  


 

Тип кнопки разделения

Кнопка разделения по умолчанию соответствует кнопке типа или «кнопка» . Вы можете указать альтернативный тип через опору с разделенной кнопкой . Поддерживаемые значения: «кнопка» , «отправить» и «сбросить» .

Если заданы реквизиты split-to или split-href , пропс split-button-type будет проигнорирован.

Параметры стиля

Выпадающие списки поддерживают различные свойства для стилизации кнопки запуска раскрывающегося списка.

Размер

Выпадающие списки работают с триггерными кнопками любого размера, включая кнопки по умолчанию и кнопки с разделенным раскрывающимся списком.

Установите опору size либо на sm для маленьких кнопок, либо на lg для больших кнопок.

 

  

    
       Действие 
       Другое действие 
       Здесь что-то еще 
    

    
       Действие 
       Другое действие 
       Здесь что-то еще... 
    
  
  

    
       Действие 
       Другое действие 
       Здесь что-то еще ... 
    

    
       Действие 
       Другое действие 
       Здесь что-то еще... 
    
  


 

Примечание: изменение размера кнопки (кнопок) не влияет на размер пунктов меню!

Варианты цвета раскрывающегося списка

Кнопка переключения раскрывающегося списка может иметь один из стандартных контекстных вариантов Bootstrap, применяемых путем установки опоры вариант на успех , основной , информация , опасность , ссылка , контур-тёмный и др.(или пользовательские варианты, если они определены). Вариант по умолчанию - вторичный .

Полный список встроенных контекстных вариантов см. В Справочнике по вариантам.

 

  
     Действие 
     Другое действие 
     Здесь еще кое-что 
  

  
     Действие 
     Другое действие 
     Здесь еще кое-что 
  

  
     Действие 
     Другое действие 
     Здесь еще кое-что 
  


 

Вы также можете применить произвольные классы к кнопке переключения через опору toggle-class prop.Это свойство принимает либо строку, либо массив строк.

Вариант цвета кнопки разделения

По умолчанию левая кнопка разделения использует тот же вариант , что и кнопка переключения . Вы можете дать кнопке разделения отдельный вариант через опору split-option .

 

  
     Действие 
     Другое действие 
     Здесь что-то еще... 
  


 

Выпадающие списки уровня блока

По умолчанию раскрывающиеся списки действуют как кнопки и отображаются в строке. Чтобы создать раскрывающиеся списки на уровне блоков (которые охватывают всю ширину родительского элемента), установите параметр block prop. Поддерживаются раскрывающиеся списки как обычных, так и разделенных кнопок.

 

  
     Действие 
     Другое действие 
     Здесь еще кое-что 
  

  
     Действие 
     Другое действие 
     Здесь что-то еще... 
  


 

Если вы хотите, чтобы раскрывающееся меню также занимало всю ширину родительского контейнера, добавьте служебный класс w-100 в свойство menu-class prop.

 

  
     Действие 
     Другое действие 
     Здесь еще кое-что 
  


 

Варианты цвета подкомпонента раскрывающегося списка

Многие из поддерживаемых подкомпонентов раскрывающегося списка предоставляют опору варианта для управления цветом текста.

Скрытый курсор

Раскрывающийся список может быть создан с визуально скрытым курсором переключателя, установив для свойства no-caret значение true . Это полезно, когда раскрывающийся список должен отображаться в виде значка.

 

  
    <шаблон # button-content>
      & amp # x1f50d;  Поиск 
    
     Действие 
     Другое действие 
     Здесь что-то еще... 
  


 

Примечание: Каретка всегда будет отображаться при использовании режима разделения .

Ленивое раскрывающееся меню

По умолчанию отображает содержимое меню в DOM, даже если меню не отображается. Когда на одной странице отображается большое количество раскрывающихся списков, производительность может снизиться из-за большего общего использования памяти. Вы можете указать отображать содержимое меню только тогда, когда оно отображается, установив для свойства lazy значение true.

Подкомпоненты, поддерживаемые раскрывающимся списком

В раскрывающихся списках можно разместить следующие компоненты. Использование любого другого компонента или разметки может нарушить раскладку и / или навигацию с клавиатуры.

Подкомпонент	Описание	Псевдонимы
	Действия, которые предоставляют клики, ссылки и / < nuxt-link> функциональность.По умолчанию отображается как элемент .
	Альтернатива , которая отображает пункт меню с помощью кнопки < > элемент.	​​, , ​​
	Разделитель / разделитель, который можно использовать для разделения раскрывающихся элементов.
	Свободный текстовый контент в меню.
	Для размещения элементов управления формы в раскрывающемся меню.
	Для группировки раскрывающихся субкомпонентов с дополнительным заголовком.
	Элемент заголовка, используемый для идентификации группы раскрывающихся элементов.

Примечание: Вложенные подменю не поддерживаются.

обычно используется для создания навигационной ссылки внутри вашего меню.Используйте опору href или опору от до (для поддержки связи маршрутизатора) для создания соответствующей ссылки навигации. Если не указаны ни href , ни –, будет сгенерирована стандартная ссылка с href из # (с обработчиком событий, который предотвратит прокрутку вверх, не допуская действия ссылки по умолчанию. ).

Отключил раскрывающийся список, установив disabled prop.

Исторически содержимое выпадающего меню должно было быть ссылками ( ), но это уже не относится к Bootstrap v4.Теперь вы можете при желании создать элементов

в раскрывающихся списках с помощью подкомпонента . не поддерживает реквизиты href или –.

Отключил кнопку раскрывающегося списка, установив disabled prop.

 

  
     Я кнопка 
     Я активная кнопка 
     Я кнопка, но отключена! 
     Я не похож на кнопку, но я такой! 
  


 

Если элемент меню не запускает навигацию, рекомендуется использовать подкомпонент .

Разделите группы связанных пунктов меню с помощью .

 

  
     Первый элемент 
     Второй элемент 
     
     Отдельный элемент 
  


 

Поместите любой текст произвольной формы в раскрывающееся меню с помощью подкомпонента или используйте текст и утилиты интервалов.Обратите внимание, что вам, вероятно, понадобятся дополнительные стили размеров, чтобы ограничить / установить ширину меню.

 

  
    
      Пример текста, который свободно перемещается в раскрывающемся меню.
    
     А это еще пример текста. 
     
     Первый элемент 
     Второй элемент 
  


 

имеет настраиваемый класс BootstrapVue.К нему применен b-dropdown-text , который устанавливает некоторые базовые стили, подходящие в большинстве ситуаций. По умолчанию его ширина будет такой же, как у самого широкого содержимого . Возможно, вам потребуется разместить в компоненте дополнительные стили или вспомогательные классы.

По умолчанию отображается с использованием тега

. Вы можете изменить отображаемый тег, установив опору tag на любой допустимый тег HTML5 в подкомпоненте .

Выпадающие списки поддерживают базовые формы. Поместите в раскрывающееся меню и поместите элементы управления формы в . основан на компоненте и поддерживает те же свойства и атрибуты, что и обычная форма.

 <шаблон>
  

    
      
        
           
        

        
           
        

         Запомнить меня 
         Войти 
      
       
       Новинка здесь? Зарегистрироваться 
       Забыли пароль? 
    
  


<сценарий>
  экспорт по умолчанию {
    методы: {
      по щелчку() {
        
        это.$ refs.dropdown.hide (правда)
      }
    }
  }


 

имеет примененный к нему пользовательский класс BootstrapVue .b-dropdown-form , который устанавливает некоторые базовые стили, подходящие в большинстве ситуаций. По умолчанию его ширина будет такой же, как у самого широкого содержимого . Возможно, вам потребуется разместить в компоненте дополнительные стили или вспомогательные классы.

Сгруппируйте набор раскрывающихся подкомпонентов с необязательным связанным заголовком.Поместите между вашим и другими группами или несгруппированным содержимым раскрывающегося списка

 

  
    
      Несгруппированный элемент
    
     
    
       Первый сгруппированный элемент 
       Второй сгруппированный элемент 
    
    
       Первый сгруппированный элемент 
       Второй сгруппированный элемент 
    
     
    
      Другой не сгруппированный элемент
    
  


 

Использование вместо является рекомендуемым методом для предоставления доступных сгруппированных элементов с заголовком.

Добавьте заголовок для обозначения разделов действий в любом раскрывающемся меню.

 

  
    
      Раскрывающийся заголовок
    
    
      Первый предмет
    
    
      Второй пункт
    
  


 

См. Раздел «Раскрывающиеся заголовки и специальные возможности» для получения подробной информации о том, как сделать заголовки более доступными для пользователей вспомогательных технологий.

Использование подкомпонента упрощает создание доступных сгруппированных раскрывающихся элементов со связанным заголовком.

Нажатие кнопок внутри не приведет к автоматическому закрытию меню. Если вам нужно закрыть меню с помощью кнопки (или через событие отправки формы), вызовите метод hide () в экземпляре , как показано в приведенном выше примере.

Метод hide () принимает один логический аргумент.Если аргумент - , истина , то фокус будет возвращен кнопке переключения раскрывающегося списка после закрытия меню. В противном случае документ перейдет в фокус после закрытия меню.

Прослушивание изменений раскрывающегося списка с помощью событий $ root

Чтобы прослушать любое открытие раскрывающегося списка, используйте:

 export default {
  mount () {
    this. $ root. $ on ('bv :: dropdown :: show', bvEvent => {
      console.log ('Выпадающий список будет показан', bvEvent)
    })
  }
} 

Полный список событий см. В разделе документации «События».

Слот по умолчанию с дополнительной областью действия

Слот по умолчанию может иметь следующую доступную область:

Свойство или метод	Описание
hide ()	Может использоваться для закрытия выпадающее меню. Принимает необязательный логический аргумент, который, если true, возвращает фокус кнопке переключения

Доступность

Предоставление уникального идентификатора id prop обеспечивает соответствие ARIA путем автоматического добавления соответствующих атрибутов aria- * в визуализированную разметку .

Роль ARIA по умолчанию установлена ​​на меню , но вы можете изменить это значение по умолчанию на другую роль (например, навигация ) через опору роли , в зависимости от вашего пользовательского случая.

Когда элемент меню не запускает навигацию, рекомендуется использовать подкомпонент (который не объявляется как ссылка) вместо (который представлен в виде ссылки на пользователя).

Заголовки и доступность

При использовании компонентов в раскрывающемся меню рекомендуется добавить атрибут id к каждому из заголовков, а затем установить атрибут aria-describeby (установлено значение id связанного заголовка) в каждом следующем раскрывающемся списке под этим заголовком.Это предоставит пользователям вспомогательных технологий (то есть пользователям с ослабленным зрением) дополнительный контекст о раскрывающемся списке:

 

  
     Группы 
     Добавить 
     Удалить 

     Пользователи 
     Добавить 
     Удалить 

     

    
      Что-то  не  связанное с пользователями
    

  


 

В качестве упрощенной альтернативы используйте , чтобы легко связать текст заголовка с содержащимися подкомпонентами раскрывающегося списка.

Навигация с клавиатуры

Выпадающие списки поддерживают навигацию с клавиатуры, имитируя собственное поведение .

Обратите внимание, что Down и Up не будут перемещать фокус на подкомпоненты , но пользователи по-прежнему могут использовать Tab или Shift + Tab для перехода в элементы управления формы внутри меню.

Замечания по реализации

Выпадающее меню визуализируется с семантическими элементами

и
• по причинам доступности.Раскрывающееся меню . Dropdown-menu - это элемент
  , а выпадающие элементы (элементы, кнопки, текст, форма, заголовки и разделители) заключены в элемент
  • . При создании настраиваемых элементов для размещения в раскрывающемся меню убедитесь, что они обернуты простым
  • .

    См. Также

    Javascript Пример раскрывающегося списка «Выбор страны»

    Расширенный компонент выбора для выбора одного и нескольких значений.Предоставляет отличную альтернативу собственному раскрывающемуся списку с улучшенным пользовательским интерфейсом.
    Может использоваться в элементах формы mobiscroll или в любом поле ввода, выбора и поля.

    Доставка с полезными функциями:

    • Выбор одного или нескольких значений
    • Заголовок группы и сегментация списка
    • Рендеринг по запросу для длинных списков
    • Встроенная поддержка недействительных и недоступных для выбора значений
    • Фильтрация и автозаполнение с опережающим вводом
    • Круглые колеса
    • Поддержка нескольких тем
    • Поддержка модального, всплывающего и встроенного дисплея
    • Поддержка RTL
    • Полная локализация

    В составе средств выбора и раскрывающихся списков его можно выбрать вместе с лицензиями Framework и Complete или с лицензией на компонент.

    
    Выберите демонстрационные версии, доступные для других платформ.

    Просмотр демонстраций и кода для

    Просмотрите различные компоненты и демонстрации Закрывать

    Используйте выбор как для мобильных устройств, так и для настольных компьютеров или настройте его адаптивно.Основное различие между двумя режимами рендеринга, управляемыми настройкой touchUi , заключается в том, как компоновка компонента. Если установлено значение false компонент отображается подходящим для больших экранов, и взаимодействие с указателем, а установка значения true делает его подходящим для сенсорных экранов.

    Используйте его для любого пользовательского ввода или с полями формы Mobiscroll.Выбор отображается в фокусе ввода, но он также может быть активирован нажатием кнопки или может быть встроен непосредственно в страницу.

    Допустим, у вас уже есть форма и вам нужен настраиваемый раскрывающийся список. Вы можете использовать его на существующих или новых полях.

    Для мобильных и настольных компьютеров можно использовать разные режимы отображения.На мобильных устройствах выбор может отображаться на верхних или нижних экранах, в центре экрана, привязал ко входу или любому объекту, если на то пошло, и он также может быть встроен в любой встроенный контент .

    Используйте доступные режимы отображения на мобильном устройстве и на компьютере.На больших экранах у вас есть несколько другие параметры рендеринга, подходящие для большого форм-фактора и взаимодействия с указателем. Используйте режимы верхний , нижний и центр , чтобы показать его пользователям или оставаться в контексте и привязать ко входу.

    Адаптивно используйте раскрывающийся список выбора.Вы можете установить позиционирование и рендеринг в зависимости от размера экрана. Имея нижний выбор на мобильном устройстве , всплывающее окно , привязанное к вводу на планшете и настольный дисплей на больших экранах , очень просто.

    Все это можно настроить с помощью параметра Response , в котором вы передаете параметры для каждой точки останова.

    отзывчивый: {
        xsmall: {...}, маленький: {...}, средний: {...}, большой: {...}, xlarge: {...}
    } 

    Используйте его на мобильных и настольных компьютерах для отображения различных вариантов с множественным выбором. Он может быть привязан к вводу или отображен встроенным (вы можете узнать о различных режимах отображения для мобильный и рабочий стол).

    Это альтернатива списку флажков. Вы можете использовать его в сочетании с параметрами групп и колесом групп, которое пригодится для сегментирования длинных списков.

    Отлично подходит для фильтрации категорий в решениях для электронной коммерции.

    Javascript Select с параметрами группы и заголовками, отображаемыми в виде иерархии.С собственным внешним видом, улучшенным пользовательским интерфейсом и исходным кодом. Обычный JS api для использования повсюду.

    Javascript Иерархический пример выбора с локальными или удаленными данными. Динамически заполнять связанные списки на основе предыдущего выбора. Обычный JS api для использования повсюду.

    Javascript Select, автозаполнение демоверсии с функцией фильтрации и опережающего ввода.Загружать значения из разметки или удаленной службы JSON. Обычный JS api для использования повсюду.

    Компонент select обеспечивает отображение данных в прокручиваемом и доступном для пользователя виде. Свидание можно передать несколькими способами:

    • Встроенный HTML , встроенный в разметку - это хорошо, если у вас есть только пара статических параметров.
    • С данных настройка - Если вы хотите загрузить данные модели, это способ сделать это.
    • Удаленные данные - Загрузите его через настройку data из удаленного источника api / данных.

    Javascript Выберите примеры прокрутки и раскрывающегося списка для загрузки и работы с большими наборами данных.Сегментируйте данные или загружайте с удаленного API. Обычный JS api для использования повсюду.

    Javascript Select демонстрация стиля скроллера, поддерживающая длинный текст, отображаемый в несколько строк. С плавной прокруткой и естественным внешним видом. Обычный JS api для использования повсюду.

    Используйте компонент выбора в качестве средства выбора страны на мобильных устройствах и настольных компьютерах.Вы можете добавить раскрывающийся список к любому вводу или использовать поля ввода Mobiscroll.

    Если вы не хотите делать его раскрывающимся, вы можете встроить средство выбора прямо на страницу.

    Чтобы сборщик стран работал хорошо с отличным пользовательским интерфейсом, вы можете просто включить автозаполнение для функции поиска или упорядочить и сгруппировать страны в алфавитном порядке.

    В этих примерах данные загружаются из удаленного JSON в следующем формате: {«значение»: «FJ», «группа»: «F», «текст»: «Фиджи»} , однако вы можете добавить все это на вашу страницу.

    Демонстрация скроллера Javascript Select с примерами программной установки значений и значений по умолчанию для одиночного / множественного выбора. Обычный JS api для использования повсюду.

    Javascript Выберите демонстрацию рендеринга справа налево с параметрами группы для быстрой навигации.С полной поддержкой языка RTL и исходным кодом. Обычный JS api для использования повсюду.

    Пример локализации компонента Javascript Select, поддерживающий 37 языков, текст кнопки с полной возможностью RTL. Обычный JS api для использования повсюду.

    Javascript Select демонстрация с обработчиками событий для индивидуальной интеграции и функциональности.Обычный JS api для использования повсюду.

    Внешний вид избранного можно полностью настроить. Есть четыре уровня настройки:

    • Базовые темы: выберите Mobiscroll , iOS , Android Material и Windows .
    • Светлый или темный: каждая тема имеет вариант светлый и темный .Установка темы Вариант на «авто» будет переключаться в зависимости от настроек системы.
    • Пользовательские темы: используйте конструктор тем, чтобы настроить цвета и сделать их соответствующими вашему бренду.
    • Пользовательский CSS: Если вам нужна дополнительная настройка, нет ограничений для переопределений CSS.

    Вы также можете увидеть, как выглядит каждый пример, изменив тему из заголовка.

    Ищете что-то, чего не видели, или у вас есть вопрос о продаже?
    Спросите нас об этом, мы здесь, чтобы помочь.

    Спроси нас о чем угодно

    Настройте и попробуйте демонстрации локально

    Войдите или начните пользоваться бесплатной пробной версией

    Какой фреймворк вы используете?

    Javascript

    jQuery

    AngularJS

    Угловой

    Реагировать

    Другое

    Установите демо в свое приложение

    Следуйте этому быстрому двухминутному руководству по установке

    Закрыть окно

    Установите демо в свое приложение

    Следуйте этому быстрому двухминутному руководству по установке

    Закрыть окно

    Настройте и попробуйте демонстрации локально

    Как бы вы хотели это сделать?

    Установите демо в свое приложение

    Следуйте этому быстрому двухминутному руководству по установке

    Закрыть окно

    Спасибо за скачивание

    Попробуйте и настройте приложение локально

    Распакуйте zip-файл и запустите проект, как любое приложение Ionic.Убедитесь, что у вас установлен Ionic CLI, и откройте терминал в корневой папке приложения.

    Шаг 1. Запуск в корневой папке

      $ npm установить  

    Шаг 2. Запустите приложение.

      $ ионная подача  

    Сообщите нам, если мы сможем помочь и получить удовольствие!

    Спасибо за скачивание

    Настроить демонстрации локально

    Все настроено так, что вы можете сразу окунуться и приступить к исследованию.

    Мы установили пробную версию, чтобы вы могли опробовать демонстрационные версии локально.

    Распакуйте zip-файл и откройте демоверсию в своем любимом браузере. Чтобы установить Mobiscroll в свой проект следуйте инструкциям на этой странице.

    Сообщите нам, если мы сможем помочь и получить удовольствие! 👍

    Спасибо за скачивание

    Настроить демонстрации локально

    Извлеките zip-файл и запустите проект, как любое приложение Angular CLI.Убедитесь, что у вас установлен Angular CLI.

    Для установки и использования распакуйте zip-файл, откройте окно терминала и выполните следующие действия.

    Шаг 1. Запуск в корневой папке

      $ npm установить  

    Шаг 2. Запустите приложение.

      $ нг подача - открыть  

    Сообщите нам, если мы сможем помочь и получить удовольствие! 👍

    Спасибо за скачивание

    Настроить демонстрации локально

    Все настроено так, что вы можете сразу окунуться и приступить к исследованию.

    Мы установили пробную версию, чтобы вы могли опробовать демонстрационные версии локально.

    Самый простой способ начать - следовать инструкциям по установке и получение кода прямо с демонстрационной страницы. Сообщите нам, если мы сможем помочь и получить удовольствие! 👍

    В zip-файле вы найдете полнофункциональное приложение Kitchen-Wink Ionic.

    Спасибо за скачивание

    Настроить демонстрации локально

    Все настроено так, что вы можете сразу окунуться и приступить к исследованию.

    Мы установили пробную версию, чтобы вы могли опробовать демонстрационные версии локально.

    В демонстрациях используется встроенный в браузер Babel преобразователь ES6 и JSX.
    Распакуйте zip-файл и откройте демоверсию в браузере. Чтобы установить Mobiscroll в свой проект следуйте инструкциям на этой странице.

    Сообщите нам, если мы сможем помочь и получить удовольствие! 👍

    Настройте и попробуйте эту демонстрацию локально

    Войдите или начните пользоваться бесплатной пробной версией

    Измените пароль

    Необходимо обновить пароль? Войдите и нажмите кнопку под

    Измените пароль

    Необходимо обновить пароль? Войдите и нажмите кнопку под

    Ваш пароль изменен!

    Документация 20.2: DevExtreme - раскрывающийся список HTML5 JavaScript

    Имя	Описание
    acceptCustomValue	Указывает, разрешает ли компонент пользовательского интерфейса пользователю вводить настраиваемое значение.
    Ключ доступа	Задает сочетание клавиш, устанавливающее фокус на компонент пользовательского интерфейса.
    activeStateEnabled	Указывает, изменяет ли компонент пользовательского интерфейса свое состояние при взаимодействии с пользователем.
    кнопки	Позволяет добавлять пользовательские кнопки в текстовое поле ввода.
    содержание Компонент	Псевдоним для свойства contentTemplate, указанного в React. Принимает пользовательский компонент. Дополнительные сведения см. В разделе «Использование пользовательского компонента».
    contentRender	Псевдоним для свойства contentTemplate, указанного в React.Принимает функцию рендеринга. См. Использование функции рендеринга для получения дополнительной информации.
    шаблон содержимого	Задает настраиваемый шаблон для раскрывающегося содержимого.
    Источник данных	Привязывает компонент пользовательского интерфейса к данным.
    deferRendering	Указывает, отображать ли содержимое раскрывающегося поля при его отображении.Если false , содержимое отображается немедленно.
    отключен	Указывает, реагирует ли компонент пользовательского интерфейса на взаимодействие с пользователем.
    дисплейExpr	Задает поле данных, значения которого должны отображаться.
    displayValueFormatter	Настраивает текст перед его отображением в поле ввода.
    dropDownButtonComponent	Псевдоним для свойства dropDownButtonTemplate, указанного в React. Принимает пользовательский компонент. Дополнительные сведения см. В разделе «Использование пользовательского компонента».
    dropDownButtonRender	Псевдоним для свойства dropDownButtonTemplate, указанного в React. Принимает функцию рендеринга. См. Использование функции рендеринга для получения дополнительной информации.
    dropDownButtonTemplate	Задает настраиваемый шаблон для кнопки раскрывающегося списка.
    dropDownOptions	Настраивает раскрывающееся поле, в котором хранится содержимое.
    elementAttr	Задает глобальные атрибуты, которые будут прикреплены к элементу контейнера компонента пользовательского интерфейса.
    поле Компонент	Псевдоним для свойства fieldTemplate, указанного в React. Принимает пользовательский компонент. Дополнительные сведения см. В разделе «Использование пользовательского компонента».
    fieldRender	Псевдоним для свойства fieldTemplate, указанного в React. Принимает функцию рендеринга. См. Использование функции рендеринга для получения дополнительной информации.
    fieldTemplate	Задает настраиваемый шаблон для текстового поля. Должен содержать компонент пользовательского интерфейса TextBox.
    focusStateEnabled	Указывает, можно ли сфокусировать компонент пользовательского интерфейса с помощью клавиатуры.
    высота	Задает высоту компонента пользовательского интерфейса.
    подсказка	Задает текст подсказки, которая появляется, когда пользователь приостанавливает работу компонента пользовательского интерфейса.
    hoverStateEnabled	Указывает, изменяет ли компонент пользовательского интерфейса свое состояние, когда пользователь приостанавливает работу на нем.
    входной Аттр	Задает атрибуты, передаваемые в базовый элемент HTML.
    isValid	Задает или указывает, допустимо ли значение редактора.
    шт.	Массив элементов, используемых для синхронизации DropDownBox со встроенным компонентом пользовательского интерфейса.
    макс. Длина	Задает максимальное количество символов, которое вы можете ввести в текстовое поле.
    название	Значение, которое будет присвоено атрибуту name базового элемента HTML.
    on Change	Функция, которая выполняется, когда компонент пользовательского интерфейса теряет фокус после того, как содержимое текстового поля было изменено с помощью клавиатуры.
    вкл. Закрыто	Функция, которая выполняется после закрытия раскрывающегося редактора.
    onCopy	Функция, которая выполняется после копирования ввода компонента пользовательского интерфейса.
    onCut	Функция, которая выполняется после вырезания ввода компонента пользовательского интерфейса.
    на удалении	Функция, которая выполняется перед удалением компонента пользовательского интерфейса.
    onEnterKey	Функция, которая выполняется при нажатии клавиши Enter, когда компонент пользовательского интерфейса находится в фокусе.
    на FocusIn	Функция, которая выполняется, когда компонент пользовательского интерфейса получает фокус.
    на FocusOut	Функция, которая выполняется, когда компонент пользовательского интерфейса теряет фокус.
    on Инициализировано	Функция, используемая в платформах JavaScript для сохранения экземпляра компонента пользовательского интерфейса.
    на входе	Функция, которая выполняется каждый раз при изменении ввода компонента пользовательского интерфейса, когда компонент пользовательского интерфейса находится в фокусе.
    onKeyDown	Функция, которая выполняется, когда пользователь нажимает клавишу на клавиатуре.
    onKeyUp	Функция, которая выполняется, когда пользователь отпускает клавишу на клавиатуре.
    on Открыто	Функция, которая выполняется после открытия раскрывающегося редактора.
    вкл. Опция изменена	Функция, которая выполняется после изменения свойства компонента пользовательского интерфейса.
    onPaste	Функция, которая выполняется после вставки ввода компонента пользовательского интерфейса.
    onValueChanged	Функция, которая выполняется после изменения значения компонента пользовательского интерфейса.
    открыт	Указывает, отображается ли раскрывающийся редактор.
    openOnFieldClick	Указывает, может ли пользователь открыть раскрывающийся список, щелкнув текстовое поле.
    заполнитель	Текст, отображаемый компонентом пользовательского интерфейса, когда значение компонента пользовательского интерфейса пусто.
    Только чтение	Указывает, доступен ли редактор только для чтения.
    rtlEnabled	Переключает компонент пользовательского интерфейса в представление справа налево.
    показатьClearButton	Указывает, отображать ли кнопку «Очистить» в компоненте пользовательского интерфейса.
    показатьDropDownButton	Указывает, видна ли раскрывающаяся кнопка.
    стиль, режим	Определяет стиль текстового поля компонента пользовательского интерфейса.
    tabIndex	Задает номер элемента при использовании клавиши Tab для навигации.
    текст	Свойство только для чтения, которое содержит текст, отображаемый компонентом пользовательского интерфейса input element.
    validationError	Информация о нарушенном правиле проверки. Содержит первый элемент из массива validationErrors.
    validationErrors	Массив правил проверки, которые не прошли проверку.
    validationMessageMode	Указывает, как отображается сообщение о правилах проверки, которым не удовлетворяет значение этого редактора.
    статус проверки	Указывает или указывает текущий статус проверки.
    значение	Задает текущее выбранное значение. Может быть объектом, если dataSource содержит объекты, а valueExpr не задано.
    valueChangeEvent	Определяет события DOM, после которых значение компонента пользовательского интерфейса должно быть обновлено.
    значениеExpr	Указывает, какое поле данных предоставляет уникальные значения для значения компонента пользовательского интерфейса.
    видимый	Указывает, виден ли компонент пользовательского интерфейса.
    ширина	Задает ширину компонента пользовательского интерфейса.

    Выпадающие списки начальной загрузки - учебные пособия с расширенными примерами

    2. Компоненты
    3. Выпадающие списки

    Переключайте контекстные наложения для отображения списков ссылок и многого другого с помощью подключаемого модуля раскрывающегося списка Bootstrap.

    Обзор

    Выпадающие списки - это переключаемые контекстные наложения для отображения списков ссылок и многого другого. Они сделаны интерактивными с помощью встроенного плагина JavaScript для выпадающего меню Bootstrap. Они переключаются нажатием, а не наведением курсора; это намеренное дизайнерское решение.

    Выпадающие списки построены на основе сторонней библиотеки Popper, которая обеспечивает динамическое позиционирование и обнаружение области просмотра. Не забудьте включить popper.min.js перед загрузкой JavaScript в Bootstrap или используйте загрузочную программу .bundle.min.js / bootstrap.bundle.js , который содержит Поппера. Popper не используется для размещения раскрывающихся списков на панели навигации, поскольку динамическое позиционирование не требуется.

    Доступность

    Стандарт WAI ARIA определяет фактический виджет role = "menu" , но он специфичен для меню, подобного приложению, которое запускает действия или функции. ARIA Меню может содержать только пункты меню, пункты меню флажков, пункты меню радиокнопок, группы радиокнопок и подменю.

    Выпадающие списки Bootstrap, с другой стороны, разработаны так, чтобы быть общими и применимыми к различным ситуациям и структурам разметки. Например, можно создавать раскрывающиеся списки, содержащие дополнительные входные данные и элементы управления формами, такие как поля поиска или формы входа в систему. По этой причине Bootstrap не ожидает (и не добавляет автоматически) ни один из атрибутов role и aria- , необходимых для истинных меню ARIA . Авторы должны сами включить эти более конкретные атрибуты.

    Однако Bootstrap добавляет встроенную поддержку для большинства стандартных взаимодействий с меню клавиатуры, таких как возможность перемещаться по отдельным элементам .dropdown-item с помощью клавиш курсора и закрывать меню с помощью клавиши ESC .

    Примеры

    Оберните переключатель раскрывающегося списка (ваша кнопка или ссылка) и раскрывающееся меню в .dropdown или другой элемент, который объявляет position: relative; . Выпадающие списки можно запускать из элементов или , чтобы лучше соответствовать вашим потенциальным потребностям.В показанных здесь примерах используются семантические элементы

    , где это необходимо, но поддерживается настраиваемая разметка.

    Одиночная кнопка

    Любой одиночный .btn можно превратить в раскрывающийся список с некоторыми изменениями разметки. Вот как вы можете заставить их работать с элементами

    :

    
Раскрывающийся список кнопка



    

    • Действие
    
    
    • Другое действие
    
    
    • Что-то еще здесь
    
    
    


    И с < a> элементов:

      
     
      
     Ссылка раскрывающегося списка 
      
     
     
     
      Действие  
     
     
      Другое действие  < / li> 
     
      Здесь есть что-то еще  
     
     
     
     
     
      

    Самое приятное то, что вы можете сделать это с любым кнопочный вариант тоже:

     
    
      
        Действие
      
      
    
        
      Действие  
        
      Другое действие  
        
      Здесь что-то еще  
        
     
        
      Отдельная ссылка  
      
      

    Разделить кнопку

    Аналогичным образом создайте раскрывающиеся списки разделенных кнопок с практически той же разметкой, что и раскрывающиеся списки с одной кнопкой, но с добавлением .dropdown-toggle-split для правильного интервала вокруг выпадающего курсора.

    Мы используем этот дополнительный класс, чтобы уменьшить горизонтальное заполнение по обе стороны от каретки на 25% и удалить margin-left , который добавляется для обычных раскрывающихся списков кнопок. Эти дополнительные изменения удерживают курсор в центре разделенной кнопки и обеспечивают область нажатия более подходящего размера рядом с основной кнопкой.

    Выпадающий список вторичного переключателя

     
    
       Действие 
      
         Переключить раскрывающийся список 
      
      
    
        
      Действие  
        
      Другое действие  
        
      Здесь что-то еще  
        
     
        
      Отдельная ссылка  
      
      

    With Caret

    Добавьте атрибут data-tor-caret к .dropdown-menu элемент для отображения небольшого курсора в раскрывающемся меню. Положение каретки по умолчанию - начало сверху , и оно автоматически позиционируется в зависимости от положения раскрывающегося меню.

      
     
      
     Кнопка раскрывающегося списка 
      
     
     
     
      Действие  
     
     
      Другое действие  < / li> 
     
      Здесь есть кое-что еще  
     
     
     
     
      

    Bootstrap Анимированный раскрывающийся список

    Torus Kit расширяет раскрывающийся список Bootstrap по умолчанию с плавной анимацией и новым раскрывающимся списком «Каретка».Добавьте класс .fade к .dropdown.menu , чтобы создать эффект плавного затухания.

    Раскрывающееся меню по умолчанию

    Раскрывающееся меню начальной загрузки по умолчанию с классом .fade .

      
     
      
     Кнопка раскрывающегося списка 
      
     
     
      Действие  
      Другое действие  
      Здесь что-то еще  
     
     
     
      

    Раскрывающийся список курсора

    С помощью Torus Kit можно создавать раскрывающиеся списки с индикатором каретки (треугольник).Просто добавьте атрибут data-tor-caret в .dropdown-menu . Положение курсора по умолчанию - слева вверху , и оно автоматически устанавливается в зависимости от положения раскрывающегося списка.

      
     
      
     Кнопка раскрывающегося списка 
      
     
     
      Действие  
      Другое действие  
      Здесь кое-что еще  
     
     
     
      

    Разделенная кнопка курсора

    Каретка автоматически работает и с разделенными кнопками.

      
     
      Действие  
      
      Переключить раскрывающийся список  
      
     
     
      Действие  
      Другое действие  
      Что-то еще здесь  
     
     
     
      

    Анимация выпадающих элементов

    Поскольку Bootstrap использует .показать класс , когда раскрывающийся список виден, легко создать постепенную анимацию .dropdown-item с помощью эффектов Torus Kit. Не забудьте также включить элемент data-tor-fx-trigger = "show" с по .dropdown-menu .

    Мы используем data-tor-fx-group = ". Dropdown-item => show-T: {fade.in scale.from (75)} delay (/ + 100ms /)" здесь:

      
     
      
     Кнопка раскрывающегося списка 
      
     
     
      Action  
      Другое действие  
      Здесь еще кое-что  
     
     
     
      

    Размер

    Выпадающие списки кнопок работают с кнопками всех размеров, включая кнопки раскрывающегося списка по умолчанию и разделенные.

    Большая разделенная кнопка Переключить раскрывающийся список

     
    
      
        Большая кнопка
      
      
    
        ...
      
    
    
      
        Большая разделенная кнопка
      
      
         Переключить раскрывающийся список 
      
      
    
        ...
      
      

    Маленькая разделенная кнопка Переключить раскрывающийся список

      
    
      
        Маленькая кнопка
      
      
    
        ...
      
    
    
      
        Маленькая кнопка разделения
      
      
         Переключить раскрывающийся список 
      
      
    
        ...
      
      

    Темные раскрывающиеся списки

    Выберите более темные раскрывающиеся списки, чтобы они соответствовали темной панели навигации или индивидуальному стилю, добавив .dropdown-menu-dark к существующему .dropdown-menu .Никаких изменений в раскрывающихся элементах не требуется.

      
     
      
     Кнопка раскрывающегося списка 
      
     
     
     
      Действие  
     
     
      Другое действие  
     
     
      Здесь что-то еще  
     
     
      
     
      Отдельная ссылка  
     
     
     
     
      

    И использование его в навигационной панели:

    Направления

    RTL

    Направления отражаются при использовании Bootstrap в RTL, то есть .dropstart появится справа.

    Dropup

    Запуск раскрывающихся меню над элементами путем добавления .dropup к родительскому элементу.

    Разделить раскрывающееся меню Переключить раскрывающееся меню

     
    
      
        Dropup
      
      
    
        
      
    
    
    
    
      
        Разделить выпадение
      
      
         Переключить раскрывающийся список 
      
      
    
        
      
      

    Dropright

    Вызов раскрывающихся меню справа от элементов путем добавления .отбросить к родительскому элементу.

    Раздельный тумблер Dropright

     
    
      
        Dropright
      
      
    
        
      
    
    
    
    
      
        Разделить падение
      
      
         Переключить вертикальное положение 
      
      
    
        
      
      

    Dropleft

    Активируйте раскрывающиеся меню слева от элементов, добавив .dropstart к родительскому элементу.

     
    
      
        Dropstart
      
      
    
        
      
    
    
    
    
      
    
        
           Переключить Dropstart 
        
        
    
          
        
      
      
        Разделить дропстарт
      
      

    Раньше содержимое выпадающего меню содержало ссылок, но в версии 4 это уже не так.Теперь вы можете дополнительно использовать элементы в раскрывающихся списках вместо s.

    
Раскрывающийся список



    
    
    • Действие
    
    
    • Другое действие
    
    
    • Здесь что-то еще
    
    
    


    Вы также можете создавать неинтерактивные раскрывающиеся элементы с помощью .выпадающий текст . Не стесняйтесь изменять стиль с помощью пользовательских CSS или текстовых утилит.

      
     
     
      Текст выпадающего списка  
     
     
      Действие  
     
     
     < a href = "#"> Другое действие  
     
     
      Что-то еще здесь  
     
     
      

    Активно

    Добавьте .active к элементам в раскрывающемся списке, чтобы сделало их активными .Чтобы передать активное состояние вспомогательным технологиям, используйте атрибут aria-current - используя значение page для текущей страницы или true для текущего элемента в наборе.

      
     
     
      Обычная ссылка  
     
     
      Активная ссылка < / a> 
     
     
      Другая ссылка  
     
     
      

    Отключено

    Добавьте .отключил для элементов в раскрывающемся списке до , пометив их как отключенные .

      
     
     
      Обычная ссылка  
     
     
      Отключенная ссылка  
     
     
      Другая ссылка  
     
     
      

    По умолчанию раскрывающееся меню автоматически размещается на 100% сверху и слева от своего родителя.Вы можете изменить это с помощью направленных классов .drop * , но вы также можете управлять ими с помощью дополнительных классов-модификаторов.

    Добавьте .dropdown-menu-end к .dropdown-menu , чтобы выровнять раскрывающееся меню по правому краю. Направления зеркалируются при использовании Bootstrap в RTL, то есть .dropdown-menu-end появится слева.

    Внимание! Выпадающие списки размещаются благодаря Popper, за исключением случаев, когда они содержатся в навигационной панели.

    Пример меню с выравниванием по правому краю

      
     
      
     Пример меню с выравниванием по правому краю 
      
     
     
     
      Действие  
     
     
      Другое действие  
     
     
      Здесь что-то еще  
     
     
     
     
      

    Отзывчивое выравнивание

    Если вы хотите использовать гибкое выравнивание, отключите динамическое позиционирование, добавив данные -bs-display = "static" и использовать адаптивные классы вариантов.

    Чтобы выровнять справа раскрывающегося меню с заданной точкой останова или больше, добавьте .dropdown-menu {-sm | -md | -lg | -xl | -xxl} -end .

    По левому краю, но по правому краю при большом экране

      
     
      
     По левому краю, но по правому краю при большом экране 
      
     
     
     
      Action  
     
     
      Другое действие  
     
     
      Здесь что-то еще  
     
     
     
     
      

    Для выравнивания оставив раскрывающегося меню с заданной точкой останова или больше, добавьте .dropdown-menu-end и . dropdown-menu {-sm | -md | -lg | -xl | -xxl} -start .

    По правому краю, но по левому краю при большом экране

      
     
      
     По правому краю, но по левому краю при большом экране 
      
     
     
     
      Action  
     
     
      Другое действие  
     
     
      Здесь что-то еще  
     
     
     
     
      

    Обратите внимание, что вы не нужно добавлять атрибут data-bs-display = "static" к кнопкам раскрывающегося списка на панелях навигации, поскольку Popper не используется в панелях навигации.

    Варианты выравнивания

    Воспользовавшись большинством вариантов, показанных выше, вот небольшая демонстрация кухонной мойки с различными вариантами выравнивания раскрывающегося списка в одном месте.

    По левому краю, по правому краю lg По правому краю, по левому lg

      
     
      
     Раскрывающийся список 
     < / button> 
     
     
     
      Пункт меню  
     
     
      Пункт меню  
     
     
      Пункт меню  
     
     
     
     
     
     
     
      
     Меню с выравниванием по правому краю 
      
     
     
     
      Пункт меню  
     
     
      Пункт меню  
     
     
      Пункт меню  
     
     
     
     
     
     
     
     
      
     Влево -выровненный по правому краю lg 
      
     
     
     
      пункт меню  
     
     
      Пункт меню  
     
     
      Пункт меню  
     
     
     
     
     
     
     
     
      
     По правому краю, по левому краю -aligned lg 
      
     
     
     
      Пункт меню  
     
     
      Пункт меню  
     
     
      Пункт меню  
     
     
     
     
     
     
     
     
      
     Dropstart 
      
     
     
     
      Пункт меню   
     
      Пункт меню  
     
     
      Пункт меню  
     
     
     
     
     
     
     
     
      
     Отбросить 
      
     
     
     
      Пункт меню  
     
     
      Пункт меню  
     
     
      Пункт меню  
     
     
     
     
     
     
     
     
      
     Dropup 
      
     
     
     
      Пункт меню  
     
     
      Пункт меню  
     
     
      Пункт меню  
     
     
     
     
     
      

    Добавить заголовок для обозначения разделов действий в любом раскрывающемся меню.

      
     
     
     
     Заголовок раскрывающегося списка 
     
     
     
      Действие  
     
     
      Другое действие  
     
     
      

    Разделители

    Разделите группы связанных пунктов меню разделителем.

      
     
     
      Действие  
     
     
      Другое действие  
     
     
      Здесь что-то еще  
     
     
      
     
      Отдельная ссылка  
     
     
      

    Текст

    Поместите произвольный текст в раскрывающееся меню с текстом и используйте служебные программы для определения интервалов.Обратите внимание, что вам, вероятно, потребуются дополнительные стили размеров, чтобы ограничить ширину меню.

      
     
     
     
     Пример текста, который свободно отображается в раскрывающемся меню. 
     
     
     
     
     А это еще пример текста. 
     
     
     
      

    Формы

    Поместите форму в раскрывающееся меню или превратите ее в раскрывающееся меню и используйте утилиты полей или заполнения, чтобы дать ей необходимое отрицательное пространство.

      
     
     
     
     
     
      Адрес электронной почты