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

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

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

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

import 'mdui/components/segmented-button-group.js';
import 'mdui/components/segmented-button.js';

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

import type { SegmentedButtonGroup } from 'mdui/components/segmented-button-group.js';
import type { SegmentedButton } from 'mdui/components/segmented-button.js';

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

Day

Week

Month

<mdui-segmented-button-group>
  <mdui-segmented-button>Day</mdui-segmented-button>
  <mdui-segmented-button>Week</mdui-segmented-button>
  <mdui-segmented-button>Month</mdui-segmented-button>
</mdui-segmented-button-group>

Установите атрибут selects элемента <mdui-segmented-button-group> в значение single, чтобы включить режим одиночного выбора. В этом случае значением value компонента <mdui-segmented-button-group> будет значение value выбранного <mdui-segmented-button>.

Day

Week

Month

Day

Week

Month

<mdui-segmented-button-group selects="single">
  <mdui-segmented-button value="day">Day</mdui-segmented-button>
  <mdui-segmented-button value="week">Week</mdui-segmented-button>
  <mdui-segmented-button value="month">Month</mdui-segmented-button>
</mdui-segmented-button-group>

<mdui-segmented-button-group selects="single" value="week">
  <mdui-segmented-button value="day">Day</mdui-segmented-button>
  <mdui-segmented-button value="week">Week</mdui-segmented-button>
  <mdui-segmented-button value="month">Month</mdui-segmented-button>
</mdui-segmented-button-group>

Исходный код

Режим множественного выбора

Установите атрибут selects элемента <mdui-segmented-button-group> в значение multiple, чтобы включить режим множественного выбора. В этом случае значением value компонента будет массив значений value выбранных <mdui-segmented-button>.

Обратите внимание: в режиме множественного выбора value является массивом, который можно читать и устанавливать только через JavaScript-свойство.

Day

Week

Month

Day

Week

Month

<mdui-segmented-button-group selects="multiple">
  <mdui-segmented-button value="day">Day</mdui-segmented-button>
  <mdui-segmented-button value="week">Week</mdui-segmented-button>
  <mdui-segmented-button value="month">Month</mdui-segmented-button>
</mdui-segmented-button-group>

<mdui-segmented-button-group selects="multiple" class="demo-multiple">
  <mdui-segmented-button value="day">Day</mdui-segmented-button>
  <mdui-segmented-button value="week">Week</mdui-segmented-button>
  <mdui-segmented-button value="month">Month</mdui-segmented-button>
</mdui-segmented-button-group>

<script>
  // Устанавливаем week и month выбранными по умолчанию
  const group = document.querySelector(".demo-multiple");
  group.value = ["week", "month"];
</script>

Исходный код

Иконка

С помощью атрибутов icon и end-icon у элемента <mdui-segmented-button> можно добавить иконки Material Icons слева и справа от кнопки. Также можно использовать слоты icon и end-icon.

Day

Week

Month

<mdui-segmented-button-group>
  <mdui-segmented-button icon="search">Day</mdui-segmented-button>
  <mdui-segmented-button end-icon="arrow_forward">Week</mdui-segmented-button>
  <mdui-segmented-button>
    Month
    <mdui-icon slot="icon" name="downloading"></mdui-icon>
    <mdui-icon slot="end-icon" name="attach_file"></mdui-icon>
  </mdui-segmented-button>
</mdui-segmented-button-group>

Исходный код

С помощью атрибута selected-icon у элемента <mdui-segmented-button> можно задать иконку выбранного состояния. Также можно использовать слот selected-icon.

Day

Week

<mdui-segmented-button-group selects="multiple">
  <mdui-segmented-button value="day" selected-icon="cloud_done">Day</mdui-segmented-button>
  <mdui-segmented-button value="week">
    <mdui-icon slot="selected-icon" name="cloud_done"></mdui-icon>
    Week
  </mdui-segmented-button>
</mdui-segmented-button-group>

Исходный код

Ссылка

Установите атрибут href у элемента <mdui-segmented-button>, чтобы превратить кнопку в ссылку. При этом также можно использовать связанные с ссылками атрибуты: download, target, rel.

Link

Week

Month

<mdui-segmented-button-group>
  <mdui-segmented-button href="https://www.mdui.org" target="_blank">Link</mdui-segmented-button>
  <mdui-segmented-button>Week</mdui-segmented-button>
  <mdui-segmented-button>Month</mdui-segmented-button>
</mdui-segmented-button-group>

Исходный код

Отключенное состояние и состояние загрузки

Добавьте атрибут disabled к элементу <mdui-segmented-button-group>, чтобы отключить всю группу сегментированных кнопок.

Day

Week

Month

<mdui-segmented-button-group disabled>
  <mdui-segmented-button>Day</mdui-segmented-button>
  <mdui-segmented-button>Week</mdui-segmented-button>
  <mdui-segmented-button>Month</mdui-segmented-button>
</mdui-segmented-button-group>

Исходный код

Добавьте атрибут disabled к элементу <mdui-segmented-button>, чтобы отключить конкретную кнопку; добавьте атрибут loading, чтобы добавить состояние загрузки.

Day

Week

Month

Year

<mdui-segmented-button-group>
  <mdui-segmented-button>Day</mdui-segmented-button>
  <mdui-segmented-button disabled>Week</mdui-segmented-button>
  <mdui-segmented-button loading>Month</mdui-segmented-button>
  <mdui-segmented-button disabled loading>Year</mdui-segmented-button>
</mdui-segmented-button-group>

Исходный код

`mdui-segmented-button-group` API

Свойства

Атрибут	Свойство	Тип	По умолчанию
`full-width`	`fullWidth`	`boolean`	`false`
Определяет, растягивать ли на всю ширину родительского элемента.
`selects`	`selects`	`'single' \| 'multiple'`	-
Режим выбора сегментированных кнопок. По умолчанию выбор отключён. Возможные значения: `single` — одиночный выбор `multiple` — множественный выбор
`disabled`	`disabled`	`boolean`	`false`
Определяет, отключена ли группа.
`required`	`required`	`boolean`	`false`
Определяет, обязательно ли выбрать при отправке формы.
`form`	`form`	`string`	-
Связанный элемент `<form>`. В качестве значения укажите `id` элемента `<form>` на той же странице. Если свойство не задано, элемент должен быть дочерним по отношению к `<form>`. С этим свойством элемент можно разместить в любом месте страницы, а не только внутри `<form>`.
`name`	`name`	`string`	`''`
Имя при отправке формы, будет отправлено вместе с данными формы.
`value`	`value`	`string \| string[]`	`''`
Значение текущего выбранного `<mdui-segmented-button>`. Примечание: HTML-атрибут этого свойства всегда является строкой; задать начальное значение через HTML-атрибут можно только при `selects="single"`. JavaScript-свойство этого свойства является строкой при `selects="single"` и массивом строк при `selects="multiple"`. Поэтому при `selects="multiple"` изменить это значение можно только через JavaScript-свойство.
	`defaultValue`	`string \| string[]`	`''`
Значение по умолчанию. При сбросе формы восстанавливается именно оно. Это свойство задаётся только через JavaScript.
	`validity`	`ValidityState`	-
Объект, содержащий состояние валидации формы. См. `ValidityState`.
	`validationMessage`	`string`	-
Если проверка формы не пройдена, это свойство содержит сообщение об ошибке. Если проверка пройдена, это свойство будет пустой строкой.

Методы

Название	Параметры	Возвращаемое значение
`checkValidity`		`boolean`
Проверяет, прошло ли поле формы валидацию. Если не прошло, возвращает `false` и вызывает событие `invalid`; если прошло, возвращает `true`.
`reportValidity`		`boolean`
Проверяет, прошло ли поле формы валидацию. Если не прошло, возвращает `false` и вызывает событие `invalid`; если прошло, возвращает `true`. Если проверка не пройдена, также отображает сообщение об ошибке валидации в компоненте.
`setCustomValidity`	`message: string`	`void`
Устанавливает пользовательский текст сообщения об ошибке. Пока задан непустой текст, поле считается не прошедшим проверку.

События

Название
`change`
Срабатывает при изменении выбранного значения.
`invalid`
Возникает, когда поле формы не проходит валидацию.

Slots

Название
(по умолчанию)
Компоненты `<mdui-segmented-button>`.

Пользовательские CSS-свойства

Название
`--shape-corner`
Размер скругления углов компонента. Можно указать конкретное значение в пикселях, но рекомендуется использовать дизайн-токены.

`mdui-segmented-button` API

Свойства

Атрибут	Свойство	Тип	По умолчанию
`icon`	`icon`	`string`	-
Имя иконки Material Icons слева. Можно задать через `slot="icon"`.
`end-icon`	`endIcon`	`string`	-
Имя иконки Material Icons справа. Можно задать через `slot="end-icon"`.
`selected-icon`	`selectedIcon`	`string`	-
Имя иконки Material Icons в выбранном состоянии. Можно задать через `slot="selected-icon"`.
`href`	`href`	`string`	-
Целевой URL ссылки. Если задано это свойство, компонент будет отображаться как элемент `<a>` и можно использовать свойства, связанные со ссылками.
`download`	`download`	`string`	-
Имя файла для скачивания при переходе по ссылке. Примечание: Это свойство действует только при заданном свойстве `href`.
`target`	`target`	`'_blank' \| '_parent' \| '_self' \| '_top'`	-
Определяет, где будет открыта ссылка. Возможные значения: `_blank` — открывает ссылку в новом окне `_parent` — открывает ссылку в родительском фрейме `_self` — открывает ссылку в текущем фрейме (по умолчанию) `_top` — открывает ссылку во всём окне Примечание: Это свойство действует только при заданном свойстве `href`.
`rel`	`rel`	`'alternate' \| 'author' \| 'bookmark' \| 'external' \| 'help' \| 'license' \| 'me' \| 'next' \| 'nofollow' \| 'noreferrer' \| 'opener' \| 'prev' \| 'search' \| 'tag'`	-
Определяет тип связи между текущим документом и связанным документом. Возможные значения: `alternate` — альтернативная версия текущего документа `author` — автор текущего документа или статьи `bookmark` — постоянная ссылка на ближайший родительский раздел `external` — ссылка ведёт на другой сайт `help` — ссылка на соответствующую справочную документацию `license` — основное содержимое текущего документа лицензируется по лицензии связанного файла `me` — текущий документ представляет владельца связанного контента `next` — текущий документ является частью серии, а цитируемый документ — следующим в серии `nofollow` — не передавать ссылке вес `noreferrer` — не передаёт заголовок `Referer`. Эффект аналогичен `noopener` `opener` — если гиперссылка создаёт контекст просмотра верхнего уровня (то есть значение атрибута `target` равно `_blank`), создаётся вспомогательный контекст просмотра `prev` — текущий документ является частью серии, а цитируемый документ — предыдущим в серии `search` — содержит ссылку на ресурс, который можно использовать для поиска по текущему файлу и связанным с ним страницам `tag` — указывает тег, относящийся к текущему документу (определяется по указанному адресу) Примечание: Доступно только при заданном свойстве `href`.
`autofocus`	`autofocus`	`boolean`	`false`
Определяет, будет ли элемент автоматически получать фокус после загрузки страницы.
`tabindex`	`tabIndex`	`number`	-
Порядок перехода к элементу при нажатии клавиши Tab.
`disabled`	`disabled`	`boolean`	`false`
Отключает элемент.
`loading`	`loading`	`boolean`	`false`
Переводит элемент в состояние загрузки.
`name`	`name`	`string`	`''`
Имя кнопки, которое будет отправлено вместе с данными формы. Примечание: Это свойство действует, только если не задано свойство `href`.
`value`	`value`	`string`	`''`
Значение кнопки, которое будет отправлено вместе с данными формы. Примечание: Это свойство действует, только если не задано свойство `href`.
`type`	`type`	`'submit' \| 'reset' \| 'button'`	`'button'`
Тип кнопки. По умолчанию `button`. Возможные значения: `submit` — эта кнопка отправляет данные формы на сервер `reset` — эта кнопка сбрасывает все компоненты к начальным значениям `button` — эта кнопка не имеет поведения по умолчанию Примечание: Это свойство действует, только если не задано свойство `href`.
`form`	`form`	`string`	-
Связанный элемент `<form>`. В качестве значения укажите `id` элемента `<form>` на той же странице. Если свойство не задано, элемент должен быть дочерним по отношению к `<form>`. С этим свойством элемент можно разместить в любом месте страницы, а не только внутри `<form>`. Примечание: Это свойство действует, только если не задано свойство `href`.
`formaction`	`formAction`	`string`	-
Задаёт URL-адрес для отправки формы. Если это свойство задано, оно переопределяет атрибут `action` элемента `<form>`. Примечание: Это свойство действует, только если не задано свойство `href` и `type="submit"`.
`formenctype`	`formEnctype`	`'application/x-www-form-urlencoded' \| 'multipart/form-data' \| 'text/plain'`	-
Определяет способ кодирования данных при отправке формы на сервер. Возможные значения: `application/x-www-form-urlencoded` — значение по умолчанию, если атрибут не указан `multipart/form-data` — используется, когда форма содержит элемент `<input type="file">` `text/plain` — добавлено в HTML5; используется для отладки Если это свойство задано, оно переопределяет атрибут `enctype` элемента `<form>`. Примечание: Это свойство действует, только если не задано свойство `href` и `type="submit"`.
`formmethod`	`formMethod`	`'post' \| 'get'`	-
Определяет HTTP-метод, который используется при отправке формы. Возможные значения: `post` — данные формы отправляются на сервер в теле запроса `get` — данные формы добавляются к URI формы после символа `?`, и полученный URI отправляется на сервер. Используется, если форма не имеет побочных эффектов и содержит только ASCII-символы. Если это свойство задано, оно переопределяет атрибут `method` элемента `<form>`. Примечание: Это свойство действует, только если не задано свойство `href` и `type="submit"`.
`formnovalidate`	`formNoValidate`	`boolean`	`false`
Если задано, проверка формы при отправке не выполняется. Если задано, переопределяет атрибут `novalidate` элемента `<form>`. Примечание: Это свойство действует, только если не задано свойство `href` и `type="submit"`.
`formtarget`	`formTarget`	`'_self' \| '_blank' \| '_parent' \| '_top'`	-
Определяет, где будет показан ответ, полученный после отправки формы. Возможные значения: `_self` — по умолчанию, открывается в текущем фрейме `_blank` — открывается в новом окне `_parent` — открывается в родительском фрейме `_top` — открывается во всём окне Если это свойство задано, оно переопределяет атрибут `target` элемента `<form>`. Примечание: Это свойство действует, только если не задано свойство `href` и `type="submit"`.
	`validity`	`ValidityState`	-
Объект, содержащий состояние валидации формы. См. `ValidityState`.
	`validationMessage`	`string`	-
Если проверка формы не пройдена, это свойство содержит сообщение об ошибке. Если проверка пройдена, это свойство будет пустой строкой.

Методы

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

События

Название
`focus`
Срабатывает при получении фокуса.
`blur`
Срабатывает при потере фокуса.
`invalid`
Возникает, когда поле формы не проходит валидацию.

Slots

Название
(по умолчанию)
Текстовое содержимое сегментированной кнопки.
`icon`
Иконка слева.
`selected-icon`
Иконка слева в выбранном состоянии.
`end-icon`
Иконка справа.

CSS Parts

Название
`button`
Внутренний элемент `<button>` или `<a>`.
`icon`
Иконка слева.
`selected-icon`
Иконка слева в выбранном состоянии.
`end-icon`
Иконка справа.
`label`
Текстовое содержимое.
`loading`
Элемент `<mdui-circular-progress>` в состоянии загрузки.

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

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

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

Slider Слайдер

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

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

Примеры

Полная ширина

Режим одиночного выбора

Режим множественного выбора

Иконка

Ссылка

Отключенное состояние и состояние загрузки

`mdui-segmented-button-group` API

Свойства

Методы

События

Slots

Пользовательские CSS-свойства

`mdui-segmented-button` API

Свойства

Методы

События

Slots

CSS Parts