Dropdown toggle что это
Выпадающие списки
Переключайте контекстные наложения для отображения списков ссылок и многого другого с помощью плагина выпадающего списка Bootstrap.
Обзор
Доступность
The WAI ARIA стандарт определяет фактический виджет role=»menu» widget, но это характерно для меню, похожего на приложение, которое запускает действия или функции. Меню ARIA могут содержать только пункты меню, пункты меню флажков, пункты меню радиокнопок, группы радиокнопок и подменю.
Примеры
Отдельная кнопка
Самое приятное то, что Вы можете сделать это и с любым вариантом кнопки:
Отдельная кнопка
Размеры
Выпадающие списки кнопок работают с кнопками любого размера, включая кнопку по умолчанию и разделенную кнопку выпадающего списка.
Темные выпадающие списки
И использовать его в навигационной панели:
Направления
Вверх
Вправо
Влево
Элементы меню
Активный
Отключенный
Выравнивание меню
Отзывчивое выравнивание
Если Вы хотите использовать адаптивное выравнивание, отключите динамическое позиционирование, добавив атрибут data-bs-display=»static» и используйте гибкие классы вариантов.
Обратите внимание, что Вам не нужно добавлять атрибут data-bs-display=»static» к кнопке выпадающего списка в навигационных панелях, поскольку Popper не используется в навигационных панелях.
Варианты выравнивания
Воспользовавшись большинством вариантов, показанных выше, вот небольшая демонстрация кухонной мойки с различными вариантами выравнивания раскрывающегося списка в одном месте.
Содержание меню
Заголовки
Добавьте заголовок для обозначения разделов действий в любом выпадающем меню.
Заголовок выпадающего списка
Разделители
Разделите группы связанных пунктов меню разделителем.
Текст
Поместите произвольный текст в выпадающее меню с текстом и используйте утилиты отступов. Обратите внимание, что Вам, вероятно, потребуются дополнительные стили размеров, чтобы ограничить ширину меню.
Пример текста, который свободно перемещается в выпадающем меню.
И это еще один пример текста.
Формы
Поместите форму в выпадающее меню или превратите ее в выпадающее меню и используйте утилиты полей или отступов, чтобы дать ей необходимое отрицательное пространство.
Параметры выпадающего списка
Поведение автоматического закрытия
Переменные
Переменные для всех выпадающих списков:
Переменные для курсоров на основе CSS, которые указывают на интерактивность раскрывающегося списка:
Миксины
Использование
Через атрибуты данных
Добавьте data-bs-toggle=»dropdown» к ссылке или кнопке, чтобы переключить выпадающий список.
Через JavaScript
Вызов выпадающих списков через JavaScript:
data-bs-toggle=»dropdown» по-прежнему требуется
Параметры
Смещение раскрывающегося списка относительно его цели. Вы можете передать строку в атрибутах данных со значениями, разделенными запятыми, например: data-bs-offset=»10,20″
Дополнительную информацию смотрите в offset документации Popper.
Смещение раскрывающегося списка относительно его цели. Вы можете передать строку в атрибутах данных со значениями, разделенными запятыми, например: data-bs-offset=»10,20″
Дополнительную информацию смотрите в offset документации Popper.
Настройте поведение автоматического закрытия раскрывающегося списка:
Настройте поведение автоматического закрытия раскрывающегося списка:
Чтобы изменить конфигурацию Popper по умолчанию для Bootstrap, смотрите конфигурацию Popper.
Когда функция используется для создания конфигурации Popper, она вызывается с объектом, который содержит конфигурацию Popper по умолчанию для Bootstrap. Это поможет Вам использовать и объединить настройки по умолчанию с Вашей собственной конфигурацией. Функция должна возвращать объект конфигурации для Popper.
Использование функции с popperConfig
Методы
| Метод | Описание |
|---|---|
| toggle | Переключает выпадающее меню данной панели навигации или навигации с вкладками. |
| show | Показывает выпадающее меню данной панели навигации или навигации с вкладками. |
| hide | Скрывает выпадающее меню данной панели навигации или навигации с вкладками. |
| update | Обновляет положение выпадающего списка элемента. |
| dispose | Уничтожает выпадающий список элемента. (Удаляет сохраненные данные в элементе DOM) |
| getInstance | Статический метод, который позволяет вам получить экземпляр раскрывающегося списка, связанный с элементом DOM, вы можете использовать его следующим образом: bootstrap.Dropdown.getInstance(element) |
| getOrCreateInstance | Статический метод, который возвращает раскрывающийся список, связанный с элементом DOM, или создает новый, если он не был инициализирован. Вы можете использовать это так: bootstrap.Dropdown.getOrCreateInstance(element) |
События
Все выпадающие события запускаются в переключающемся элементе, а затем всплывают. Таким образом, Вы также можете добавить прослушивателей событий в родительский элемент. hide.bs.dropdown и hidden.bs.dropdown имеют свойство clickEvent (только если исходный тип события click ), который содержит объект события для события клика.
| Метод | Описание |
|---|---|
| show.bs.dropdown | Срабатывает немедленно при вызове метода экземпляра show. |
| shown.bs.dropdown | Запускается, когда выпадающий список становится видимым для пользователя и переходы CSS завершены. |
| hide.bs.dropdown | Срабатывает немедленно при вызове метода экземпляра hide. |
| hidden.bs.dropdown | Запускается, когда выпадающий список перестает быть скрытым от пользователя и переходы CSS завершены. |
Компоненты
Более десятка повторно используемых компонентов построены так, чтобы обеспечить кнопки, выпадающие меню, группы ввода, навигации, оповещения, и многое другое.
Выпадающие меню
Раскрывающиеся списки переключаемой, контекстная накладки для отображения списков ссылок и более. Они сделаны интерактивными с включенным Bootstrap выпадающего JavaScript плагин. Они переключаются нажатием, не парит; это преднамеренное дизайнерское решение.
Содержание
Примеры
Одиночная кнопка выпадающего меню
Самое приятное, что вы можете сделать это с любым вариантом кнопки:
Split кнопка с выпадающим меню
Изменение размера
Кнопка меню работы с кнопками всех размеров, в том числе по умолчанию и секущихся выпадающих кнопок.
Вариант списка сверху
Пункты меню
Исторически выпадающем меню had чтобы быть одной, но это уже не в случае с v4. Теперь при необходимости можно использовать элементы в раскрывающихся списках, а не просто ы.
Выравнивание меню
Внимание! меню расположены только с CSS и может потребоваться некоторые дополнительные стили для точного выравнивания.
Заголовки меню
Добавьте заголовок чтобы маркировать участки в любом выпадающего меню.
Dropdown header
Делители меню
Отдельные группы связанных элементов меню с делителем.
Заблокированы части меню
Использование
Примечание: data-toggle=»dropdown» атрибут является основанием для закрытия выпадающего меню на уровне приложения, так что это хорошая идея, чтобы всегда использовать его.
С помощью данных атрибутов
Добавить data-toggle=»dropdown» на ссылку или кнопку для переключения в меню.
Через JavaScript
Вызвать меню через JavaScript:
data-toggle=»dropdown» еще требуется
Независимо от того, вызываете ли вы свой выпадающий список через JavaScript или вместо этого используете data-api, data-toggle=»dropdown» всегда должно присутствовать на спусковом элементе раскрывающегося меню.
Варианты
Методы
| Способ | Описание |
|---|---|
| $().dropdown(‘toggle’) | Переключает меню данной панели навигации и вкладок навигации. |
События
| Событие | Описание |
|---|---|
| show.bs.dropdown | Это событие немедленно срабатывает при вызове метода экземпляра-шоу называется. |
| shown.bs.dropdown | Это событие запускается, когда выпадающее меню становится видимым для пользователя (будет ждать CSS переходы для завершения). |
| hide.bs.dropdown | Это событие немедленно уволили, когда скрывать метод экземпляра называется. |
| hidden.bs.dropdown | Это событие запускается, когда в списке есть, который скрыт от пользователя (будет ждать CSS переходы для завершения). |
Спроектированы и построены со всей любовью в мире @mdo и @fat. Поддерживается основной командой с помощью наших спонсоров.
Сейчас v4.0.0-alpha.4. Код лицензии MIT, документы CC BY 3.0.
Dropdowns (выпадающие списки)
Переключайте контекстные наложения для отображения списков ссылок и многого другого с помощью плагина раскрывающегося списка Bootstrap.
Обзор
Выпадающие списки созданы на основе сторонней библиотеки Popper.js, которая обеспечивает динамическое позиционирование и обнаружение области просмотра. Обязательно включите popper.min.js перед JavaScript в Bootstrap или используйте bootstrap.bundle.min.js /, bootstrap.bundle.js который содержит Popper.js. Popper.js не используется для размещения раскрывающихся списков на панели навигации, хотя динамическое позиционирование не требуется.
Доступность
Стандарт WAI ARIA определяет фактический role=»menu» виджет, но он специфичен для меню, похожего на приложения, которое запускает действия или функции. Меню ARIA могут содержать только пункты меню, пункты меню флажков, пункты меню радиокнопок, группы радиокнопок и подменю.
Примеры
Одна кнопка
Самое приятное то, что вы можете сделать это и с любым вариантом кнопки:
Кнопка разделения
Мы используем этот дополнительный класс, чтобы уменьшить горизонтальность padding по обе стороны от курсора на 25% и удалить margin-left добавляемый для обычных раскрывающихся списков кнопок. Эти дополнительные изменения удерживают курсор в центре разделенной кнопки и обеспечивают область нажатия более подходящего размера рядом с основной кнопкой.
Размеры
Выпадающие кнопки работают с кнопками всех размеров, включая кнопки по умолчанию и кнопки с разделенным раскрывающимся списком.
Темные выпадающие списки
И использовать его в навигационной панели:
Направления
Dropup
Dropright
Dropleft
Пункты меню
Active (активный)
Disabled (отключенный)
Выравнивание меню
Отзывчивое выравнивание
Обратите внимание, что вам не нужно добавлять атрибут data-display=»static» к раскрывающимся кнопкам на панели навигации, поскольку Popper.js не используется в панелях навигации.
Содержание меню
Заголовки
Добавьте заголовок для обозначения разделов действий в любом раскрывающемся меню.
Dropdown header
Разделители
Разделите группы связанных пунктов меню разделителем.
Текст
Поместите произвольный текст в раскрывающееся меню с текстом и используйте служебные программы для определения интервалов. Обратите внимание, что вам, вероятно, потребуются дополнительные стили размеров, чтобы ограничить ширину меню.
Some example text that’s free-flowing within the dropdown menu.
And this is more example text.
Формы
Поместите форму в раскрывающееся меню или превратите ее в раскрывающееся меню и используйте утилиты полей или заполнения, чтобы дать ей необходимое отрицательное пространство.
Параметры раскрывающегося списка
Применение
Через атрибуты данных
Добавьте data-toggle=»dropdown» ссылку или кнопку, чтобы переключить раскрывающийся список.
Через JavaScript
Вызов выпадающих списков через JavaScript:
data-toggle=»dropdown» все еще требуется
Независимо от того, вызываете ли вы раскрывающийся список через JavaScript или вместо этого используете data-api, data-toggle=»dropdown» всегда требуется присутствие в элементе триггера раскрывающегося списка.