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

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

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

Вызов через классы CSS
Вызов через пользовательские атрибуты (если компоненты создаются динамически, необходимо вызвать mdui.mutation() для инициализации)
Вызов через JavaScript

Связанное чтение

Стиль

Нативный select с одиночным выбором

Просто добавьте класс .mdui-select к элементу <select>, чтобы применить стилизованное оформление без использования JavaScript.

Пример

<select class="mdui-select">
  <option value="1" selected>State 1</option>
  <option value="2">State 2</option>
  <option value="3">State 3</option>
  <option value="4">State 4</option>
  <option value="5">State 5</option>
  <option value="6">State 6</option>
</select>

Нативный select с множественным выбором

Также можно добавить класс .mdui-select к элементу <select multiple> для множественного выбора, но не все браузеры корректно отображают этот стиль.

Пример

<select multiple size="8" class="mdui-select">
  <optgroup label="Fonts">
    <option>Roboto</option>
    <option>Calibri</option>
    <option>Courier New</option>
    <option>Verdana</option>
  </optgroup>
  <optgroup label="Size">
    <option>50%</option>
    <option>75%</option>
    <option>90%</option>
    <option>100%</option>
  </optgroup>
  <optgroup label="header">
    <option>h1</option>
    <option>h2</option>
    <option>h3</option>
    <option>h4</option>
  </optgroup>
</select>

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

Вызов через атрибуты

Этот способ не требует написания JavaScript-кода. Просто добавьте класс .mdui-select и атрибут mdui-select="options" к элементу <select>.

Если компоненты создаются динамически, необходимо вызвать mdui.mutation() для инициализации.

Пример

<select class="mdui-select" mdui-select>
  <option value="1">State 1</option>
  <option value="2">State 2</option>
  <option value="3" disabled>State 3</option>
  <option value="4">State 4</option>
  <option value="5">State 5</option>
  <option value="6">State 6</option>
</select>

Пример

<select class="mdui-select" mdui-select="{position: 'top'}">
  <option value="1">State 1</option>
  <option value="2">State 2</option>
  <option value="3" disabled>State 3</option>
  <option value="4">State 4</option>
  <option value="5">State 5</option>
  <option value="6">State 6</option>
</select>

Пример

<select class="mdui-select" mdui-select="{position: 'bottom'}">
  <option value="1">State 1</option>
  <option value="2">State 2</option>
  <option value="3" disabled>State 3</option>
  <option value="4">State 4</option>
  <option value="5">State 5</option>
  <option value="6">State 6</option>
</select>

Вызов через JavaScript

Инициализация компонента:

// selector — это CSS-селектор, DOM-элемент или HTML-строка для элемента <select>
// options — параметры конфигурации, см. список ниже
var inst = new mdui.Select(selector, options);

Пример

<select class="mdui-select" id="demo-js">
  <option value="1">State 1</option>
  <option value="2">State 2</option>
  <option value="3" disabled>State 3</option>
  <option value="4">State 4</option>
  <option value="5">State 5</option>
  <option value="6">State 6</option>
</select>

<script>
  var inst = new mdui.Select('#demo-js');
</script>

Параметр

Имя параметра	Тип	По умолчанию	Описание
`position`	`string`	`auto`	Расположение меню выбора. Возможные значения: `auto`, `top`, `bottom`
`gutter`	`int`	`16`	Минимальный отступ меню выбора от верхнего и нижнего краев окна (в пикселях). Работает только при `position` = `auto`.

Метод

Имя метода	Описание
`open()`	Открыть выпадающее меню.
`close()`	Закрыть выпадающее меню.
`toggle()`	Переключить состояние выпадающего меню.
`handleUpdate()`	Если вы динамически изменили содержимое элемента `<select>`, вызовите этот метод для обновления меню выбора.
`getState()`	Возвращает текущее состояние выпадающего меню. Возможные состояния: `opening`, `opened`, `closing`, `closed`.

Событие

Имя события	Описание	Цель	Параметры
`open.mdui.select`	Событие срабатывает, когда начинается анимация открытия меню.	`<select class="mdui-select"></select>`	`event._detail.inst`: экземпляр
`opened.mdui.select`	Событие срабатывает, когда анимация открытия меню завершена.
`close.mdui.select`	Событие срабатывает, когда начинается анимация закрытия меню.
`closed.mdui.select`	Событие срабатывает, когда анимация закрытия меню завершена.

Список CSS-классов

Имя класса	Описание
`.mdui-select`	Определяет компонент Select.

Плавающая кнопка (FAB)

Разделитель