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

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

На этой странице описывается использование компонента <mdui-select>. Об использовании пунктов выпадающего меню см. <mdui-menu-item>.

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

При необходимости импортируйте компоненты:

import 'mdui/components/select.js';
import 'mdui/components/menu-item.js';

При необходимости импортируйте типы TypeScript:

import type { Select } from 'mdui/components/select.js';
import type { MenuItem } from 'mdui/components/menu-item.js';

Пример использования:

Item 1

Item 2

<mdui-select value="item-1">
  <mdui-menu-item value="item-1">Item 1</mdui-menu-item>
  <mdui-menu-item value="item-2">Item 2</mdui-menu-item>
</mdui-select>

С помощью атрибутов prefix и suffix можно добавить текст слева и справа от выпадающего списка. Также можно использовать слоты prefix и suffix. Этот текст отображается только когда выпадающий список в фокусе или имеет значение.

Item 1

Item 2

Item 1

Item 2

$ /100

<mdui-select value="item-1" prefix="$" suffix="/100">
  <mdui-menu-item value="item-1">Item 1</mdui-menu-item>
  <mdui-menu-item value="item-2">Item 2</mdui-menu-item>
</mdui-select>

<br/><br/>

<mdui-select value="item-1">
  <mdui-menu-item value="item-1">Item 1</mdui-menu-item>
  <mdui-menu-item value="item-2">Item 2</mdui-menu-item>
  <span slot="prefix" style="color: blue">$</span>
  <span slot="suffix" style="color: blue">/100</span>
</mdui-select>

Исходный код

API

Свойства

Атрибут	Свойство	Тип	По умолчанию
`variant`	`variant`	`'filled' \| 'outlined'`	`'filled'`
Стиль выпадающего списка. Возможные значения: `filled` — список с фоновым цветом, более выраженный визуальный акцент `outlined` — список с рамкой, менее выраженный визуальный акцент
`multiple`	`multiple`	`boolean`	`false`
Определяет, поддерживается ли множественный выбор.
`name`	`name`	`string`	`''`
Имя поля выбора, будет отправлено вместе с данными формы.
`value`	`value`	`string \| string[]`	`''`
Значение поля выбора, будет отправлено вместе с данными формы. Если атрибут `multiple` не указан, значение — строка; если указан, значение — массив строк. HTML-атрибут может задавать только строковое значение; для задания массива используйте JavaScript-свойство.
	`defaultValue`	`string \| string[]`	`''`
Значение по умолчанию. При сбросе формы восстанавливается именно оно. Это свойство задаётся только через JavaScript.
`label`	`label`	`string`	-
Текст метки.
`placeholder`	`placeholder`	`string`	-
Текст-заполнитель.
`helper`	`helper`	`string`	-
Вспомогательный текст внизу поля выбора. Можно задать через `slot="helper"`.
`clearable`	`clearable`	`boolean`	`false`
Определяет, можно ли очистить выбранное значение.
`clear-icon`	`clearIcon`	`string`	-
Имя иконки Material Icons для кнопки очистки справа, когда поле выбора можно очистить. Можно задать через `slot="clear-icon"`.
`placement`	`placement`	`'auto' \| 'bottom' \| 'top'`	`'auto'`
Расположение выпадающего списка. Возможные значения: `auto` — автоматическое определение положения `bottom` — снизу `top` — сверху
`end-aligned`	`endAligned`	`boolean`	`false`
Определяет, выравнивать ли текст по правому краю.
`prefix`	`prefix`	`string`	-
Текст-префикс поля выбора. Отображается только при фокусе или когда поле выбора имеет значение. Можно задать через `slot="prefix"`.
`suffix`	`suffix`	`string`	-
Текст-суффикс поля выбора. Отображается только при фокусе или когда поле выбора имеет значение. Можно задать через `slot="suffix"`.
`icon`	`icon`	`string`	-
Имя иконки Material Icons для префикса слева. Можно задать через `slot="icon"`.
`end-icon`	`endIcon`	`string`	-
Имя иконки Material Icons для суффикса справа. Можно задать через `slot="end-icon"`.
`error-icon`	`errorIcon`	`string`	-
Имя иконки Material Icons справа при ошибке валидации поля формы. Можно задать через `slot="error-icon"`.
`form`	`form`	`string`	-
Связанный элемент `<form>`. В качестве значения укажите `id` элемента `<form>` на той же странице. Если свойство не задано, элемент должен быть дочерним по отношению к `<form>`. С этим свойством элемент можно разместить в любом месте страницы, а не только внутри `<form>`.
`readonly`	`readonly`	`boolean`	`false`
Только для чтения.
`disabled`	`disabled`	`boolean`	`false`
Определяет, отключён ли компонент.
`required`	`required`	`boolean`	`false`
Определяет, обязательно ли для заполнения при отправке формы.
	`validity`	`ValidityState`	-
Объект, содержащий состояние валидации формы. См. `ValidityState`.
	`validationMessage`	`string`	-
Если проверка формы не пройдена, это свойство содержит сообщение об ошибке. Если проверка пройдена, это свойство будет пустой строкой.
`autofocus`	`autofocus`	`boolean`	`false`
Определяет, будет ли элемент автоматически получать фокус после загрузки страницы.
`tabindex`	`tabIndex`	`number`	-
Порядок перехода к элементу при нажатии клавиши Tab.

Методы

Название	Параметры	Возвращаемое значение
`checkValidity`		`boolean`
Проверяет, прошло ли поле формы валидацию. Если не прошло, возвращает `false` и вызывает событие `invalid`; если прошло, возвращает `true`.
`reportValidity`		`boolean`
Проверяет, прошло ли поле формы валидацию. Если не прошло, возвращает `false` и вызывает событие `invalid`; если прошло, возвращает `true`. Если проверка не пройдена, также отображает сообщение об ошибке валидации в компоненте.
`setCustomValidity`	`message: string`	`void`
Устанавливает пользовательский текст сообщения об ошибке. Пока задан непустой текст, поле считается не прошедшим проверку.
`click`		`void`
Имитирует щелчок мыши по элементу.
`focus`	`options: FocusOptions` (Опционально)	`void`
Устанавливает фокус на текущий элемент. В качестве аргумента можно передать объект со свойством: `preventScroll`: по умолчанию после получения фокуса страница прокручивается, чтобы элемент появился в области видимости. Чтобы этого избежать, задайте для этого свойства значение `true`.
`blur`		`void`
Убирает фокус с текущего элемента.

События

Название
`focus`
Срабатывает при получении фокуса.
`blur`
Срабатывает при потере фокуса.
`change`
Срабатывает при изменении выбранного значения.
`invalid`
Возникает, когда поле формы не проходит валидацию.
`clear`
Срабатывает при клике на кнопку очистки, добавленную свойством `clearable`. Можно отменить очистку, вызвав `event.preventDefault()`.

Slots

Название
(по умолчанию)
Элементы `<mdui-menu-item>`.
`icon`
Иконка слева.
`end-icon`
Иконка справа.
`error-icon`
Иконка справа в состоянии ошибки валидации.
`prefix`
Текст слева.
`suffix`
Текст справа.
`clear-button`
Кнопка очистки.
`clear-icon`
Иконка внутри кнопки очистки.
`helper`
Вспомогательный текст внизу.

CSS Parts

Название
`chips`
Контейнер для чипов выбранных значений при множественном выборе.
`chip`
Чип каждого выбранного значения при множественном выборе.
`chip__button`
Элемент `<button>` внутри чипа.
`chip__label`
Текст внутри чипа.
`chip__delete-icon`
Иконка удаления внутри чипа.
`text-field`
Текстовое поле, элемент `<mdui-text-field>`.
`text-field__container`
Контейнер текстового поля внутри text-field.
`text-field__icon`
Иконка слева внутри text-field.
`text-field__end-icon`
Иконка справа внутри text-field.
`text-field__error-icon`
Иконка справа в состоянии ошибки валидации внутри text-field.
`text-field__prefix`
Текст слева внутри text-field.
`text-field__suffix`
Текст справа внутри text-field.
`text-field__label`
Текст метки внутри text-field.
`text-field__input`
Элемент `<input>` внутри text-field.
`text-field__clear-button`
Кнопка очистки внутри text-field.
`text-field__clear-icon`
Иконка внутри кнопки очистки внутри text-field.
`text-field__supporting`
Контейнер вспомогательной информации внизу text-field, включая helper и error.
`text-field__helper`
Вспомогательный текст внизу text-field.
`text-field__error`
Текст ошибки внизу text-field.
`menu`
Выпадающее меню, элемент `<mdui-menu>`.

Предыдущая глава

RangeSlider Слайдер диапазона

Следующая глава

SegmentedButton Сегментированная кнопка

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

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

Примеры

Форма

Поддержка множественного выбора

Вспомогательный текст

Режим только для чтения

Отключенное состояние

Возможность очистки

Положение выпадающего меню

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

Префиксные и суффиксные текст и иконки

API

Свойства

Методы

События

Slots

CSS Parts