# Обзор Давайте начнём использовать mdui с подключения через CDN и простейшего шаблона страницы. > Вы читаете документацию mdui 2! > > Если вам нужна документация mdui 1, посетите [www.mdui.org/docs/](https://www.mdui.org/docs/). ## Быстрый старт {#getting-started} Самый простой способ начать использовать mdui — подключить CSS и JS файлы непосредственно с CDN. Если вы хотите установить mdui через npm, обратитесь к разделу [Установка](/ru/docs/2/getting-started/installation). **Подключение файлов** Добавьте следующий код в раздел `` вашей страницы: ```html ``` Если вы используете атрибуты иконок компонентов (например, атрибут `icon` в ``), дополнительно подключите CSS-файл с иконками. См. [Использование иконок Material Icons](/ru/docs/2/components/icon#usage-material-icons). mdui не зависит от сторонних библиотек. После подключения указанных файлов всё работает. ## Простейший шаблон страницы {#template} Ниже приведён простейший шаблон страницы. Вы можете добавлять в него компоненты и контент для построения сайта. ```html Привет, мир! Привет, мир! ``` # Установка Вы можете установить mdui через npm или подключить через CDN. Рекомендуется устанавливать через npm. ## Установка через npm {#npm} ```bash npm install mdui --save ``` ### Полный импорт {#full-import} В точке входа вашего проекта импортируйте следующие два файла, чтобы использовать все компоненты mdui: ```js import 'mdui/mdui.css'; import 'mdui'; ``` Вы также можете импортировать необходимые функции непосредственно из mdui. Например, чтобы импортировать функцию [`snackbar`](/ru/docs/2/functions/snackbar), сделайте следующее: ```js import { snackbar } from 'mdui'; ``` Показать все функции, которые можно импортировать из 'mdui' 
import {
  $,
  dialog,
  alert,
  confirm,
  prompt,
  snackbar,
  getTheme,
  setTheme,
  getColorFromImage,
  setColorScheme,
  removeColorScheme,
  loadLocale,
  setLocale,
  getLocale,
  throttle,
  observeResize,
  breakpoint
} from 'mdui';
 ### Выборочный импорт {#cherry-picking} Для оптимизации размера проекта вы можете импортировать только необходимые компоненты и функции. Например, если вам нужен только компонент [``](/ru/docs/2/components/button) и функция [`snackbar`](/ru/docs/2/functions/snackbar), сделайте следующее: ```js // CSS-файл всегда нужно импортировать import 'mdui/mdui.css'; // Импорт компонента import 'mdui/components/button.js'; // Импорт функции snackbar import { snackbar } from 'mdui/functions/snackbar.js'; ``` На странице документации каждого компонента или функции подробно описывается, как выполнить выборочный импорт. Показать все компоненты и функции, поддерживающие выборочный импорт 
import 'mdui/components/avatar.js';
import 'mdui/components/badge.js';
import 'mdui/components/bottom-app-bar.js';
import 'mdui/components/button.js';
import 'mdui/components/button-icon.js';
import 'mdui/components/card.js';
import 'mdui/components/checkbox.js';
import 'mdui/components/chip.js';
import 'mdui/components/circular-progress.js';
import 'mdui/components/collapse.js';
import 'mdui/components/collapse-item.js';
import 'mdui/components/dialog.js';
import 'mdui/components/divider.js';
import 'mdui/components/dropdown.js';
import 'mdui/components/fab.js';
import 'mdui/components/icon.js';
import 'mdui/components/layout.js';
import 'mdui/components/layout-item.js';
import 'mdui/components/layout-main.js';
import 'mdui/components/linear-progress.js';
import 'mdui/components/list.js';
import 'mdui/components/list-item.js';
import 'mdui/components/list-subheader.js';
import 'mdui/components/menu.js';
import 'mdui/components/menu-item.js';
import 'mdui/components/navigation-bar.js';
import 'mdui/components/navigation-bar-item.js';
import 'mdui/components/navigation-drawer.js';
import 'mdui/components/navigation-rail.js';
import 'mdui/components/navigation-rail-item.js';
import 'mdui/components/radio.js';
import 'mdui/components/radio-group.js';
import 'mdui/components/range-slider.js';
import 'mdui/components/ripple.js';
import 'mdui/components/segmented-button.js';
import 'mdui/components/segmented-button-group.js';
import 'mdui/components/select.js';
import 'mdui/components/slider.js';
import 'mdui/components/snackbar.js';
import 'mdui/components/switch.js';
import 'mdui/components/tab.js';
import 'mdui/components/tab-panel.js';
import 'mdui/components/tabs.js';
import 'mdui/components/text-field.js';
import 'mdui/components/tooltip.js';
import 'mdui/components/top-app-bar.js';
import 'mdui/components/top-app-bar-title.js';
import { $ } from 'mdui/jq.js';
import { alert } from 'mdui/functions/alert.js';
import { breakpoint } from 'mdui/functions/breakpoint.js';
import { confirm } from 'mdui/functions/confirm.js';
import { dialog } from 'mdui/functions/dialog.js';
import { getColorFromImage } from 'mdui/functions/getColorFromImage.js';
import { getLocale } from 'mdui/functions/getLocale.js';
import { getTheme } from 'mdui/functions/getTheme.js';
import { loadLocale } from 'mdui/functions/loadLocale.js';
import { observeResize } from 'mdui/functions/observeResize.js';
import { prompt } from 'mdui/functions/prompt.js';
import { removeColorScheme } from 'mdui/functions/removeColorScheme.js';
import { setColorScheme } from 'mdui/functions/setColorScheme.js';
import { setLocale } from 'mdui/functions/setLocale.js';
import { setTheme } from 'mdui/functions/setTheme.js';
import { snackbar } from 'mdui/functions/snackbar.js';
import { throttle } from 'mdui/functions/throttle.js';
 ## CDN {#cdn} Вы можете использовать теги `` и ` Нажми меня ``` ### Использование ES-модульной сборки {#es-module} Следующий пример показывает, как использовать ES-модульную сборку mdui. В этой сборке вы можете использовать синтаксис ES-модулей для импорта mdui из CDN: ```html Нажми меня ``` # Быстрый старт Компоненты mdui — это стандартные веб-компоненты (Web Components). Вы можете использовать их как обычные теги `
`. В документации каждого компонента подробно описан его полный API, включая атрибуты, методы, события, слоты, CSS Part и пользовательские CSS-свойства. Эта глава познакомит вас с основами использования Web Components. ## Атрибуты {#attribute} У компонентов есть HTML-атрибуты и JavaScript-свойства. Обычно они соответствуют друг другу и синхронизируются. То есть, когда вы изменяете HTML-атрибут, JavaScript-свойство также изменяется, и наоборот. HTML-атрибуты можно задать непосредственно в HTML-строке компонента, а также читать и изменять с помощью методов `getAttribute` и `setAttribute`: ```html Нажми меня ``` JavaScript-свойства можно напрямую читать или устанавливать у экземпляра компонента: ```html Нажми меня ``` Некоторые свойства имеют тип boolean. Для них наличие HTML-атрибута означает, что JavaScript-свойство равно `true`, отсутствие — `false`. Однако для совместимости с некоторыми фреймворками mdui также считает строковое значение `'false'` как булево `false`. ```html ``` Иногда значения атрибутов могут быть массивами, объектами или функциями. В этом случае существует только JavaScript-свойство, и соответствующего HTML-атрибута нет. Например, у компонента [``](/ru/docs/2/components/slider) свойство [`labelFormatter`](/ru/docs/2/components/slider#attributes-labelFormatter) является функцией, и его можно задать только через JavaScript: ```html ``` В качестве примера приведём фрагмент документации компонента [``](/ru/docs/2/components/slider): | HTML-атрибут | JavaScript-свойство | reflect | | ------------ | ------------------- | -------------------------------------------------------------------------------------- | | `name` | `name` | | | `value` | `value` | | | | `labelFormatter` | | У этого компонента атрибут `name` имеет и HTML-атрибут, и JavaScript-свойство, и колонка `reflect` показывает, что при изменении JavaScript-свойства синхронно обновляется HTML-атрибут. Для свойства `value` изменение JavaScript-свойства не обновляет HTML-атрибут. Свойство `labelFormatter` существует только как JavaScript-свойство. ## Методы {#method} Некоторые компоненты предоставляют публичные методы. Вы можете вызывать их для реализации различных функций. Например, метод [`focus()`](/ru/docs/2/components/text-field#methods-focus) компонента [``](/ru/docs/2/components/text-field) устанавливает фокус на текстовое поле. ```html ``` Все доступные методы и их параметры можно посмотреть на странице документации каждого компонента. ## События {#event} Некоторые компоненты генерируют события при выполнении определённых действий. Например, компонент [``](/ru/docs/2/components/dialog) генерирует событие [`open`](/ru/docs/2/components/dialog#events-open) при открытии. Вы можете прослушивать это событие для выполнения пользовательских действий. ```html Диалог ``` Список всех доступных событий и их параметров можно посмотреть на странице документации каждого компонента. Если вы используете mdui в других фреймворках (например, Vue, React, Angular), вы можете использовать синтаксис фреймворка для привязки событий. Однако некоторые фреймворки (например, React) поддерживают привязку только стандартных событий (например, `click`), но не пользовательских (например, `open`). Поэтому в React для привязки пользовательских событий необходимо получить ссылку на элемент и использовать метод `addEventListener`. Дополнительную информацию об использовании mdui с React см. в разделе [Интеграция с фреймворками - React](/ru/docs/2/frameworks/react). ## Слоты (Slot) {#slot} Многие компоненты предоставляют слоты для вставки пользовательского HTML-содержимого внутрь компонента. Самый распространённый — это слот по умолчанию (default slot), который представляет собой обычный HTML или текст внутри компонента. Например, слот по умолчанию компонента [``](/ru/docs/2/components/button) используется для установки текста кнопки. В примере "Нажми меня" — это содержимое слота по умолчанию: ```html Нажми меня ``` Некоторые компоненты также предоставляют именованные слоты. Для именованного слота необходимо указать атрибут `slot` с именем слота. В следующем примере компонент [``](/ru/docs/2/components/icon) указывает `slot="start"`, что означает использование именованного слота [`start`](/ru/docs/2/components/button#slots-icon), который вставит иконку внутрь компонента слева: ```html Настройки ``` Если компонент использует несколько именованных слотов, порядок их следования не важен, браузер автоматически разместит их в нужных местах. Список всех поддерживаемых слотов можно посмотреть на странице документации каждого компонента. ## Пользовательские CSS-свойства {#css-custom-properties} Пользовательские CSS-свойства — это переменные в CSS. mdui определяет ряд [глобальных пользовательских CSS-свойств](/ru/docs/2/styles/design-tokens), которые используются внутри компонентов. Вы можете изменять эти свойства, чтобы глобально менять стили компонентов mdui. Например, следующий код уменьшает скругление углов у всех компонентов: ```css :root { --mdui-shape-corner-extra-small: 0.125rem; --mdui-shape-corner-small: 0.25rem; --mdui-shape-corner-medium: 0.375rem; --mdui-shape-corner-large: 0.5rem; --mdui-shape-corner-extra-large: 0.875rem; } ``` Вы также можете изменять пользовательские CSS-свойства в локальной области видимости. Например, следующий код уменьшит скругление углов только внутри элемента с классом `sharp` и его дочерних элементов: ```css .sharp { --mdui-shape-corner-extra-small: 0.125rem; --mdui-shape-corner-small: 0.25rem; --mdui-shape-corner-medium: 0.375rem; --mdui-shape-corner-large: 0.5rem; --mdui-shape-corner-extra-large: 0.875rem; } ``` Некоторые компоненты также предоставляют специфические для них пользовательские CSS-свойства, область действия которых ограничена конкретным компонентом, поэтому они не имеют префикса `--mdui`. Например, следующий код изменяет свойство `--z-index` компонента [``](/ru/docs/2/components/dialog), чтобы изменить его `z-index`: ```css mdui-dialog { --z-index: 3000; } ``` Список поддерживаемых пользовательских CSS-свойств для каждого компонента можно посмотреть на его странице документации. ## CSS Part {#css-part} Компоненты mdui используют Shadow DOM для изоляции стилей и поведения. Обычные CSS-селекторы не могут выбирать элементы внутри Shadow DOM. Поэтому некоторые компоненты добавляют атрибут `part` к элементам в Shadow DOM. Вы можете использовать CSS-селектор `::part` для выбора этих элементов и переопределения их стилей. Например, следующий код использует part `button` для изменения внутренних отступов кнопки, а также part `label`, `icon`, `end-icon` для изменения цвета текста, левой и правой иконок соответственно: ```html Кнопка ``` Структуру элементов Shadow DOM и их стили по умолчанию можно изучить с помощью инструментов разработчика в браузере. Прежде чем использовать CSS Part, убедитесь, что ваши потребности нельзя удовлетворить с помощью глобальных пользовательских CSS-свойств или специфических для компонента пользовательских CSS-свойств. Если можно, лучше использовать CSS-свойства для кастомизации стилей. Список всех публичных `part` для каждого компонента можно посмотреть на его странице документации. ## Механизм обновления компонентов {#update-mechanism} Компоненты mdui разработаны на основе [Lit](https://lit.dev/). Lit — это лёгкая библиотека, упрощающая разработку Web Components. При использовании компонентов mdui вам может потребоваться понимать механизм их рендеринга и обновления. Когда вы изменяете свойство компонента mdui, компонент перерисовывается. Однако этот процесс перерисовки происходит не синхронно. Если вы изменяете несколько свойств одновременно, Lit кэширует эти изменения до следующего цикла обновления, чтобы каждый компонент перерисовывался только один раз, независимо от количества изменений свойств. Кроме того, перерисовываются только изменённые части Shadow DOM. В следующем примере мы устанавливаем JavaScript-свойство `disabled` кнопки в `true`, а затем сразу проверяем HTML-атрибут. Но поскольку перерисовка ещё не произошла, полученный HTML-атрибут всё ещё `false`: ```js const button = document.querySelector('mdui-button'); button.disabled = true; console.log(button.hasAttribute('disabled')); // false ``` Чтобы дождаться завершения перерисовки после изменения свойства, можно использовать свойство `updateComplete` компонента. Это свойство возвращает Promise, который разрешается (resolve) после того, как компонент завершит перерисовку: ```js const button = document.querySelector('mdui-button'); button.disabled = true; button.updateComplete.then(() => { console.log(button.hasAttribute('disabled')); // true }); ``` # Поддержка TypeScript mdui написан на TypeScript, поэтому обеспечивает хорошую поддержку TypeScript. Все официальные библиотеки mdui поставляются с файлами типов, которые можно использовать напрямую. ## Типы экземпляров компонентов {#instance} Иногда вам может понадобиться привести переменную JavaScript к типу экземпляра компонента mdui. Для этого вы можете импортировать соответствующий тип компонента непосредственно из mdui. Например, импорт типа Tooltip из файла компонента: ```ts import type { Tooltip } from 'mdui/components/tooltip.js'; ``` Или импорт типа Tooltip напрямую из mdui: ```ts import type { Tooltip } from 'mdui'; ``` Затем вы можете привести переменную JavaScript к типу Tooltip: ```ts const tooltip = document.querySelector('mdui-tooltip') as Tooltip; ``` Теперь ваша IDE будет автоматически подсказывать свойства и методы переменной `tooltip`. Если вы добавите прослушиватель событий на переменную `tooltip`, IDE также будет подсказывать имена событий, типы событий и значение `this` внутри функции обратного вызова: ```ts tooltip.addEventListener('open', function (event) {}); ``` ## Типы событий {#event} Каждый компонент экспортирует интерфейс, который отображает имена событий компонента и соответствующие им типы объектов событий. Имя интерфейса — `${имяКомпонента}EventMap`. Например, компонент Tooltip экспортирует интерфейс `TooltipEventMap`: ```ts export interface TooltipEventMap { open: CustomEvent; opened: CustomEvent; close: CustomEvent; closed: CustomEvent; } ``` Вы можете импортировать этот интерфейс из файла компонента: ```ts import type { TooltipEventMap } from 'mdui/components/tooltip.js'; ``` Или напрямую из mdui: ```ts import type { TooltipEventMap } from 'mdui'; ``` Обратите внимание, что этот интерфейс содержит только специфичные для компонента события, но компоненты mdui наследуются от `HTMLElement`, поэтому они также поддерживают события `HTMLElement`. Вы можете использовать пересечение типов (intersection type), чтобы получить все типы событий компонента: ```ts type TooltipAndHTMLElementEventMap = TooltipEventMap & HTMLElementEventMap; ``` # Поддержка IDE mdui оптимизирован для VS Code и WebStorm. В этих средах вы получите автодополнение кода, подсказки при наведении и другие возможности. ## VS Code {#vscode} ### При использовании mdui через npm {#vscode-npm} Если вы установили mdui через npm, выполните следующие шаги, чтобы включить поддержку IDE в текущем проекте: 1. В корне проекта создайте папку `.vscode`. 2. В папке `.vscode` создайте файл `settings.json`. 3. Добавьте в `settings.json` следующий код: ```json { "html.customData": ["./node_modules/mdui/html-data.en.json"], "css.customData": ["./node_modules/mdui/css-data.en.json"] } ``` Если файл `settings.json` уже существует, просто добавьте эти две строки в корневой объект JSON. После внесения изменений перезапустите VS Code. ### При использовании mdui через CDN {#vscode-cdn} Если вы подключаете mdui через CDN, вы можете установить расширение VS Code для mdui. В магазине расширений VS Code найдите `mdui` и установите первый результат, или [нажмите здесь для установки](vscode:extension/zdhxiong.mdui). После установки поддержка IDE будет включена для всех проектов. Рекомендуется сначала установить mdui через npm и настроить `settings.json`, а не устанавливать расширение VS Code, чтобы версия поддержки IDE соответствовала используемой версии mdui. ## WebStorm {#webstorm} ### При использовании mdui через npm {#webstorm-npm} Если вы установили mdui через npm, выполните следующие шаги, чтобы включить поддержку IDE в текущем проекте: 1. В корневой объект файла `package.json` вашего проекта добавьте следующий код: ```json { "web-types": ["./node_modules/mdui/web-types.en.json"] } ``` Если в файле `package.json` уже есть свойство `web-types`, просто добавьте `./node_modules/mdui/web-types.en.json` в массив. После внесения изменений перезапустите WebStorm. ### При использовании mdui через CDN {#webstorm-cdn} Если вы подключаете mdui через CDN, вы можете установить плагин WebStorm для mdui. В магазине плагинов WebStorm найдите `mdui` и установите первый результат. После установки поддержка IDE будет включена для всех проектов. Рекомендуется сначала установить mdui через npm для поддержки IDE, а не устанавливать плагин WebStorm, чтобы версия поддержки IDE соответствовала используемой версии mdui. ## Различия в поддержке между VS Code и WebStorm {#difference} Поддержка mdui в VS Code и WebStorm отличается. В таблице ниже приведены подробные различия: | Где доступны автодополнение и подсказки | VS Code | WebStorm | | ----------------------------------------------------------- | ---------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | | Имена HTML-тегов | | | | Имена атрибутов в HTML-тегах | | | | Перечисляемые значения атрибутов в HTML-тегах | | (не показывает комментарии к значениям) | | Имена событий в HTML-тегах | | | | Значения атрибута `name` для slot в HTML | | | | Имена `part` в селекторе `::part()` в CSS | | | | Имена пользовательских CSS-свойств внутри компонентов в CSS | | | | Имена глобальных пользовательских CSS-свойств в CSS | | | | Глобальные имена классов в CSS | | | # Локализация В mdui по умолчанию используется английский язык. Для использования других языков требуется настройка локализации. ## Использование {#usage} mdui предоставляет три функции для реализации локализации: - [`loadLocale`](/ru/docs/2/functions/loadLocale): загружает языковой пакет. Параметр — функция, которая получает код языка и возвращает Promise, который разрешается (resolve) в соответствующий языковой пакет. Вызовите эту функцию в точке входа вашего приложения. - [`setLocale`](/ru/docs/2/functions/setLocale): переключает на указанный язык. Параметр — новый код языка, возвращает Promise, который разрешается после завершения загрузки языкового пакета. - [`getLocale`](/ru/docs/2/functions/getLocale): возвращает текущий код языка. Пример использования: ```js import { loadLocale } from 'mdui/functions/loadLocale.js'; import { setLocale } from 'mdui/functions/setLocale.js'; import { getLocale } from 'mdui/functions/getLocale.js'; // В точке входа приложения вызовите loadLocale для загрузки языковых пакетов loadLocale((locale) => import(`../node_modules/mdui/locales/${locale}.js`)); // Вызовите эту функцию, когда нужно переключить язык. Promise разрешится после успешного переключения setLocale('zh-cn').then(() => { // getLocale вернёт текущий код языка console.log(getLocale()); // zh-cn }); ``` ## Событие состояния {#event} При начале, завершении или ошибке переключения языка на объекте `window` генерируется событие `mdui-localize-status`. Вы можете прослушивать его для выполнения пользовательских действий, например, сохранения кода языка в Cookie. Свойство `detail.status` события описывает текущее состояние. Возможные значения: `loading`, `ready`, `error`:
detail.status Описание
loading

Начата загрузка нового языкового пакета.

Объект detail содержит:

  • loadingLocale: код загружаемого языка.
ready

Новый языковой пакет успешно загружен.

Объект detail содержит:

  • readyLocale: код загруженного языка.
error

Не удалось загрузить новый языковой пакет.

Объект detail содержит:

  • errorLocale: код языка, для которого произошла ошибка загрузки.
  • errorMessage: сообщение об ошибке загрузки.
Пример использования: ```js window.addEventListener('mdui-localize-status', (event) => { if (event.detail.status === 'loading') { console.log( `Начинаем загрузку языкового пакета: ${event.detail.loadingLocale}`, ); } else if (event.detail.status === 'ready') { console.log(`Языковой пакет ${event.detail.readyLocale} успешно загружен`); } else if (event.detail.status === 'error') { console.error( `Не удалось загрузить языковой пакет ${event.detail.errorLocale}: ${event.detail.errorMessage}`, ); } }); ``` ## Способы загрузки языковых пакетов {#load-locale} ### Ленивая загрузка {#lazy-load} Использование [динамического импорта](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/import) позволяет загружать языковой пакет только при переключении на соответствующий язык. Это наиболее рекомендуемый способ. ```js import { loadLocale } from 'mdui/functions/loadLocale.js'; loadLocale((locale) => import(`../node_modules/mdui/locales/${locale}.js`)); ``` ### Предзагрузка {#pre-load} Загрузите все необходимые языковые пакеты при загрузке страницы. Это ускорит переключение языка, так как загрузка не потребуется в момент переключения. ```js import { loadLocale } from 'mdui/functions/loadLocale.js'; const localizedTemplates = new Map([ ['zh-cn', import(`../node_modules/mdui/locales/zh-cn.js`)], ['zh-tw', import(`../node_modules/mdui/locales/zh-tw.js`)], ]); loadLocale(async (locale) => localizedTemplates.get(locale)); ``` ### Статический импорт {#static-imports} Этот способ позволяет объединить все необходимые языковые пакеты с вашим кодом в один файл сборки, без необходимости отдельной загрузки. ```js import { loadLocale } from 'mdui/functions/loadLocale.js'; import * as locale_zh_cn from 'mdui/locales/zh-cn.js'; import * as locale_zh_tw from 'mdui/locales/zh-tw.js'; const localizedTemplates = new Map([ ['zh-cn', locale_zh_cn], ['zh-tw', locale_zh_tw], ]); loadLocale(async (locale) => localizedTemplates.get(locale)); ``` ## Загрузка языковых пакетов через CDN {#cdn} Если вы используете mdui через CDN, вы можете загружать языковые пакеты непосредственно из CDN. Пример использования: ```html ``` ## Поддерживаемые языки {#languages} В настоящее время mdui поддерживает следующие языки: | Язык | Код языка | | -------------------------------- | --------- | | Арабский | ar-eg | | Азербайджанский | az-az | | Болгарский | bg-bg | | Бенгальский (Бангладеш) | bn-bd | | Белорусский | be-by | | Каталанский | ca-es | | Чешский | cs-cz | | Датский | da-dk | | Немецкий | de-de | | Греческий | el-gr | | Английский | en-gb | | Английский (США) | en-us | | Испанский | es-es | | Эстонский | et-ee | | Персидский | fa-ir | | Финский | fi-fi | | Французский (Бельгия) | fr-be | | Французский (Канада) | fr-ca | | Французский (Франция) | fr-fr | | Ирландский | ga-ie | | Галисийский (Испания) | gl-es | | Иврит | he-il | | Хинди | hi-in | | Хорватский | hr-hr | | Венгерский | hu-hu | | Армянский | hy-am | | Индонезийский | id-id | | Итальянский | it-it | | Исландский | is-is | | Японский | ja-jp | | Грузинский | ka-ge | | Кхмерский | km-kh | | Севернокурдский | kmr-iq | | Каннада | kn-in | | Казахский | kk-kz | | Корейский | ko-kr | | Литовский | lt-lt | | Латышский | lv-lv | | Македонский | mk-mk | | Малаялам | ml-in | | Монгольский | mn-mn | | Малайский (Малайзия) | ms-my | | Норвежский | nb-no | | Непальский | ne-np | | Нидерландский (Бельгия) | nl-be | | Нидерландский | nl-nl | | Польский | pl-pl | | Португальский (Бразилия) | pt-br | | Португальский | pt-pt | | Румынский | ro-ro | | Русский | ru-ru | | Словацкий | sk-sk | | Сербский | sr-rs | | Словенский | sl-si | | Шведский | sv-se | | Тамильский | ta-in | | Тайский | th-th | | Турецкий | tr-tr | | Урду (Пакистан) | ur-pk | | Украинский | uk-ua | | Вьетнамский | vi-vn | | Упрощённый китайский | zh-cn | | Традиционный китайский (Гонконг) | zh-hk | | Традиционный китайский (Тайвань) | zh-tw | ## Добавление нового перевода {#contribute} Чтобы добавить новый перевод или улучшить существующий, создайте Pull Request на Github. Языковые пакеты находятся в [`packages/mdui/src/xliff`](https://github.com/zdhxiong/mdui/tree/v2/packages/mdui/src/xliff). Вы можете редактировать их прямо на Github. # Часто задаваемые вопросы Ниже собраны часто задаваемые вопросы сообщества mdui и официальные ответы. Прежде чем задать вопрос, рекомендуется поискать похожие проблемы. ## Почему компоненты не отображаются при использовании самозакрывающихся тегов? {#no-self-closing} mdui — это библиотека компонентов, основанная на Web Components. Спецификация Web Components не поддерживает самозакрывающиеся теги, поэтому для компонентов mdui необходимо указывать закрывающий тег. ```html ``` ## Как скрыть компоненты до их загрузки? {#waiting-load} Поскольку компоненты mdui регистрируются через JavaScript, до загрузки и регистрации JS-файла компоненты могут временно отображаться без стилей. Есть два способа решить эту проблему: Первый способ — использовать CSS-псевдокласс [`:defined`](https://developer.mozilla.org/ru/docs/Web/CSS/Reference/Selectors/:defined), чтобы скрыть незарегистрированные компоненты mdui. Следующий CSS-код скроет все незарегистрированные компоненты mdui и покажет их сразу после регистрации: ```css :not(:defined) { visibility: hidden; } ``` Второй способ — использовать метод [`customElements.whenDefined()`](https://developer.mozilla.org/en-US/docs/Web/API/CustomElementRegistry/whenDefined). Этот метод возвращает promise, который разрешается (resolve), когда указанный компонент будет зарегистрирован. Чтобы обработать ситуации, когда какой-либо компонент по какой-то причине не загрузится, можно использовать [`Promise.allSettled()`](https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/Promise/allSettled). В следующем примере `` сначала скрывается с помощью `opacity: 0`, а после регистрации компонентов страница плавно появляется. Также используется `Promise.allSettled()` для ожидания завершения всех промисов, чтобы страница отобразилась, даже если какой-то компонент не загрузится: ```html ``` # LLMs.txt mdui предоставляет `llms.txt` и `llms-full.txt`, чтобы передавать LLM (большим языковым моделям) точный контекст, который можно использовать как цитату, и ИИ мог предоставлять более точные и надёжные ответы на вопросы, связанные с mdui. ## Использование llms.txt для предоставления контекста ИИ {#context} Два варианта доступа: - `llms.txt`: https://www.mdui.org/ru/docs/2/llms.txt - `llms-full.txt`: https://www.mdui.org/ru/docs/2/llms-full.txt `llms.txt` — это краткий индекс, подходящий для моделей, имеющих доступ к Интернету, которые могут загружать нужные Markdown-страницы по ссылкам, или для получения общего обзора проекта. `llms-full.txt` содержит полный контекст, включая всё содержимое страниц из `llms.txt`, и подходит для случаев, когда модель не имеет доступа к Интернету или когда необходимо предоставить полный контекст целиком. ## Markdown-версия документации {#md-mirror} Для каждой страницы документации предусмотрена соответствующая Markdown-версия: просто добавьте `.md` в конец URL страницы (для главной страницы добавьте `index.md`). Например: https://www.mdui.org/ru/docs/2/components/button → https://www.mdui.org/ru/docs/2/components/button.md https://www.mdui.org/ru/docs/2/ → https://www.mdui.org/ru/docs/2/index.md Вы можете использовать эту Markdown-ссылку или её текстовое содержимое в качестве контекста для получения более точного ответа. ## Как использовать в ChatGPT, Claude и других LLM {#how-to-use} В зависимости от того, поддерживает ли модель доступ в Интернет или загрузку файлов, выберите один из следующих способов или их сочетание: 1. Прямая вставка: вставьте содержимое `llms-full.txt` в качестве системного запроса или первого сообщения. Пример: "Ниже приведён контекст mdui. Пожалуйста, строго придерживайтесь его при ответах на последующие вопросы; в случае противоречий приоритет имеет данный контекст:\n\n[вставьте содержимое llms-full.txt]". 2. Загрузка файла: загрузите `llms-full.txt` (или `llms.txt`) и в первом сообщении укажите "Используй предоставленную документацию как основной контекст". Пример: "На основе предоставленной документации mdui, приведи использование и распространённые ошибки ``". 3. Чтение по ссылке: укажите в разговоре ссылку на `llms.txt` или `llms-full.txt`. Пример: "Пожалуйста, прочитай и используй https://www.mdui.org/ru/docs/2/llms-full.txt в качестве контекста, отвечай на мои вопросы о mdui". 4. Указание на конкретную страницу: если обсуждается только конкретный компонент/функция, просто укажите Markdown-адрес этой страницы. Пример: "Пожалуйста, прочитай https://www.mdui.org/ru/docs/2/components/button.md и на основе этого документа приведи три лучшие практики". **Подсказка**: Нажмите на иконку в правом верхнем углу страницы, чтобы скопировать соответствующие ссылки, открыть Markdown-версию текущей страницы или открыть текущую страницу или `llms-full.txt` в ChatGPT в качестве контекста. # MCP-сервер mdui предоставляет специализированный [MCP-сервер (Model Context Protocol)](https://modelcontextprotocol.io/) `@mdui/mcp`, позволяющий AI-агентам запрашивать информацию о компонентах, иконках, пользовательских CSS-свойствах и документации локально. Он может использоваться с такими инструментами разработки, как Claude Code, Cursor, GitHub Copilot, для помощи в генерации кода и более эффективного использования компонентов и стилей mdui. ## Инструменты {#tools} MCP-сервер mdui предоставляет AI-агентам следующие инструменты: - `list_components`: Получить список всех компонентов mdui. - `get_component_metadata`: Получить подробные метаданные API одного компонента. - `list_css_classes`: Получить список глобальных CSS-классов. - `list_css_variables`: Получить список глобальных пользовательских CSS-свойств. - `list_documents`: Получить список всех документов. - `get_document`: Получить полное содержимое одного документа. - `list_icon_codes`: Получить список кодов иконок, которые можно использовать в атрибутах или API. - `list_icon_components`: Получить список автономных компонентов иконок и их импорты в формате ESM. ## Использование {#usage} MCP-сервер поддерживает только [транспорт stdio](https://modelcontextprotocol.io/specification/2025-06-18/basic/transports#stdio). Его можно использовать напрямую в клиентах, таких как VS Code, Cursor, Claude Code, Windsurf, Zed, а также в AI-агентах, поддерживающих протокол stdio. ### VS Code {#vscode} > Убедитесь, что установлены расширения [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) и [GitHub Copilot Chat](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot-chat). 1. Создайте `.vscode/mcp.json` в корне проекта и добавьте следующую конфигурацию: ```json { "servers": { "mdui": { "command": "npx", "args": ["-y", "@mdui/mcp"] } } } ``` 2. Нажмите кнопку "Запустить" в файле `mcp.json`. 3. Начните разговор в GitHub Copilot Chat. ### Cursor {#cursor} 1. Создайте или отредактируйте `.cursor/mcp.json` в корне проекта, добавьте следующую конфигурацию: ```json { "mcpServers": { "mdui": { "command": "npx", "args": ["-y", "@mdui/mcp"] } } } ``` 2. Перейдите в Settings > Cursor Settings > MCP & Integrations, включите сервер mdui. 3. Начните разговор в Cursor Chat. ### Claude Code {#claude-code} 1. Выполните в терминале следующую команду для добавления MCP-сервера mdui: ```bash claude mcp add mdui -- npx -y @mdui/mcp ``` 2. Затем выполните `claude` для запуска сессии. 3. Начните вводить запросы для работы. ### Windsurf {#windsurf} 1. Перейдите в Settings > Windsurf Settings > Cascade 2. Нажмите Manage MCPs, затем "View raw config", добавьте в файл конфигурации: ```json { "mcpServers": { "mdui": { "command": "npx", "args": ["-y", "@mdui/mcp"] } } } ``` > Если MCP-сервер не появился автоматически, нажмите «Refresh», чтобы обновить список. 3. Начните разговор. ### Zed {#zed} 1. Откройте Settings > Open Settings, добавьте следующую конфигурацию в файл `settings.json`: ```json { "context_servers": { "mdui": { "source": "custom", "command": "npx", "args": ["-y", "@mdui/mcp"] } } } ``` 2. Начните работу. ### Пользовательский MCP-клиент {#custom} При использовании пользовательского MCP-клиента в локальной среде или среде разработки добавьте этот сервер в файл конфигурации клиента. Например: ```json { "mcpServers": { "mdui": { "command": "npx", "args": ["-y", "@mdui/mcp"] } } } ``` # Тёмный режим Все компоненты mdui поддерживают тёмный режим и могут автоматически переключать тему в зависимости от настроек операционной системы. Вы можете в любой момент нажать на иконку в правом верхнем углу этой документации, чтобы переключить тему и увидеть, как выглядят компоненты в разных режимах. Чтобы использовать тёмный режим, просто добавьте класс `mdui-theme-dark` на элемент ``: ```html ``` Чтобы тема автоматически переключалась в зависимости от настроек ОС, добавьте класс `mdui-theme-auto` на ``: ```html ``` Также можно использовать разные темы в разных частях страницы. Например, в следующем примере на `` установлен тёмный режим, но на один `
` добавлен класс `mdui-theme-light`, поэтому внутри этого div будет светлая тема, а остальная часть страницы — тёмная: ```html
``` Помимо непосредственного добавления CSS-классов, mdui предоставляет две функции для удобной работы с темой: - [`getTheme`](/ru/docs/2/functions/getTheme): получить тему текущей страницы или указанного элемента. - [`setTheme`](/ru/docs/2/functions/setTheme): установить тему для текущей страницы или указанного элемента. --- Обратите внимание, что mdui устанавливает стили `color` и `background-color` для селекторов `:root`, `.mdui-theme-light`, `.mdui-theme-dark`, `.mdui-theme-auto`. Если эти стили по умолчанию вам не подходят, вы можете переопределить их. В следующем примере фон страницы в светлой теме устанавливается в чистый белый, текст — в чисто чёрный; в тёмной теме фон — чисто чёрный, текст — чисто белый: ```css :root, .mdui-theme-light { color: #000; background-color: #fff; } .mdui-theme-dark { color: #fff; background-color: #000; } @media (prefers-color-scheme: dark) { .mdui-theme-auto { color: #fff; background-color: #000; } } ``` # Динамический цвет mdui предоставляет функционал динамического цвета. Достаточно задать один цвет, и mdui автоматически сгенерирует полную цветовую схему. Кроме того, mdui умеет извлекать основной цвет из указанного изображения и генерировать схему на его основе. Вы можете в любой момент нажать на иконку в правом верхнем углу этой документации, чтобы переключить цветовую схему и посмотреть, как выглядят компоненты в разных схемах. Цветовая схема — это набор CSS-свойств. Все компоненты mdui используют эти свойства для цветов, поэтому изменение схемы обновляет все компоненты. Полный список CSS-свойств см. в разделе [Дизайн-токены — Цвет](/ru/docs/2/styles/design-tokens#color). ## Генерация цветовой схемы {#color-scheme} Для генерации цветовой схемы используйте функцию [`setColorScheme`](/ru/docs/2/functions/setColorScheme). Она принимает шестнадцатеричное значение цвета и генерирует схему, устанавливая её на элемент ``. Например: ```js import { setColorScheme } from 'mdui/functions/setColorScheme.js'; // Генерация схемы на основе #0061a4 и установка на setColorScheme('#0061a4'); ``` Вторым параметром можно указать `target` — элемент, на котором будет установлена схема: ```js import { setColorScheme } from 'mdui/functions/setColorScheme.js'; // Генерация схемы на основе #0061a4 и установка на элемент .foo setColorScheme('#0061a4', { target: document.querySelector('.foo'), }); ``` По умолчанию генерируемая схема включает только цвета, перечисленные в [Дизайн-токены — Цвет](/ru/docs/2/styles/design-tokens#color). Вы можете указать параметр `customColors`, чтобы добавить или переопределить пользовательские группы цветов. Например: ```js import { setColorScheme } from 'mdui/functions/setColorScheme.js'; // Генерация схемы на основе #0061a4, переопределение группы error и добавление группы music setColorScheme('#0061a4', { customColors: [ { name: 'error', value: '#69F0AE', }, { name: 'music', value: '#FFC107', }, ], }); ``` Каждая пользовательская цветовая группа создаёт четыре CSS-свойства: - `--mdui-color-{name}` - `--mdui-color-on-{name}` - `--mdui-color-{name}-container` - `--mdui-color-on-{name}-container` Где `{name}` — это имя из `customColors`. Если имя совпадает с существующим (например, `primary`, `secondary`, `tertiary`, `error`), то соответствующие стандартные свойства будут переопределены указанным цветом. Например, в примере выше цвет `error` (используемый для обозначения ошибок) заменён на зелёный, поэтому все компоненты mdui будут показывать ошибки зелёным. Если имя новое (например, `music`), то будут созданы дополнительные CSS-свойства, которые можно использовать в своих стилях: ```html
Music
Music Container
``` Для удаления сгенерированной схемы используйте функцию [`removeColorScheme`](/ru/docs/2/functions/removeColorScheme). По умолчанию она удаляет схему с ``, но можно указать конкретный элемент. ## Извлечение цвета из изображения {#from-wallpaper} mdui предоставляет функцию [`getColorFromImage`](/ru/docs/2/functions/getColorFromImage), которая извлекает основной цвет из заданного объекта `Image`. Функция возвращает Promise, который разрешается (resolve) с шестнадцатеричным значением цвета. Полученный цвет можно передать в `setColorScheme`: ```js import { getColorFromImage } from 'mdui/functions/getColorFromImage.js'; import { setColorScheme } from 'mdui/functions/setColorScheme.js'; const image = new Image(); image.src = 'image1.png'; getColorFromImage(image).then((color) => setColorScheme(color)); ``` # Типографика mdui предоставляет CSS-классы `mdui-prose` и `mdui-table` для оптимизации стилей текста и таблиц. ## Оформление текста {#prose} Добавьте класс `mdui-prose` к родительскому элементу вашего текстового контента, чтобы улучшить отображение статьи, включая стили таблиц `` внутри статьи. Например : ```html

Заголовок

Текст статьи

``` ## Стили таблиц {#table} Добавьте класс `mdui-table` к элементу ``, чтобы улучшить отображение таблицы. Например : ```html
``` Если вы хотите, чтобы таблица `` могла прокручиваться по горизонтали внутри своего родительского элемента, вы можете добавить класс `mdui-table` к родительскому элементу. Например : ```html
``` # Дизайн-токены Дизайн-токены — это стратегия управления системой дизайна. Они представляют все повторно используемые элементы системы дизайна (цвета, шрифты, отступы и т.д.) в виде независимых переменных для унифицированного управления и применения во всей системе. mdui использует глобальные пользовательские CSS-свойства для реализации дизайн-токенов. Это означает, что, изменяя эти CSS-свойства, вы можете глобально менять стили всех компонентов mdui. Кроме того, для ваших собственных стилей также рекомендуется использовать эти CSS-свойства, чтобы они были единообразны со стилями компонентов mdui, и при изменении динамического цвета ваши стили также синхронно обновлялись. ## Цвет {#color} mdui предоставляет наборы CSS-свойств для светлого и тёмного режимов. В светлом режиме имена свойств имеют вид `--mdui-color-{name}-light`, в тёмном — `--mdui-color-{name}-dark`. Кроме того, mdui предоставляет свойства вида `--mdui-color-{name}`, которые в светлом режиме ссылаются на `--mdui-color-{name}-light`, а в тёмном — на `--mdui-color-{name}-dark`, что позволяет автоматически переключать цвет в зависимости от текущей темы. Если вам нужно изменить цветовые свойства, вы должны изменять одновременно `--mdui-color-{name}-light` и `--mdui-color-{name}-dark`. При чтении используйте свойство `--mdui-color-{name}`. Значения CSS-свойств — это три RGB-компонента, разделённые запятыми. Пример использования: ```css /* Изменение значения primary */ :root { --mdui-color-primary-light: 103, 80, 164; --mdui-color-primary-dark: 208, 188, 255; } /* Установка фона элемента .foo в цвет primary */ .foo { background-color: rgb(var(--mdui-color-primary)); } /* Установка фона элемента .bar в цвет primary с прозрачностью 0.8 */ .bar { background-color: rgba(var(--mdui-color-primary), 0.8); } ``` Если вам нужна полностью новая цветовая схема, рекомендуется использовать функцию [`setColorScheme`](/ru/docs/2/functions/setColorScheme), которая генерирует полную схему на основе заданного вами цвета.
Имя цвета CSS-свойство Значение по умолчанию Пример
Primary --mdui-color-primary-light 103, 80, 164
--mdui-color-primary-dark 208, 188, 255
--mdui-color-primary
Primary container --mdui-color-primary-container-light 234, 221, 255
--mdui-color-primary-container-dark 79, 55, 139
--mdui-color-primary-container
On primary --mdui-color-on-primary-light 255, 255, 255
--mdui-color-on-primary-dark 55, 30, 115
--mdui-color-on-primary
On primary container --mdui-color-on-primary-container-light 33, 0, 94
--mdui-color-on-primary-container-dark 234, 221, 255
--mdui-color-on-primary-container
Inverse primary --mdui-color-inverse-primary-light 208, 188, 255
--mdui-color-inverse-primary-dark 103, 80, 164
--mdui-color-inverse-primary
Secondary --mdui-color-secondary-light 98, 91, 113
--mdui-color-secondary-dark 204, 194, 220
--mdui-color-secondary
Secondary container --mdui-color-secondary-container-light 232, 222, 248
--mdui-color-secondary-container-dark 74, 68, 88
--mdui-color-secondary-container
On secondary --mdui-color-on-secondary-light 255, 255, 255
--mdui-color-on-secondary-dark 51, 45, 65
--mdui-color-on-secondary
On secondary container --mdui-color-on-secondary-container-light 30, 25, 43
--mdui-color-on-secondary-container-dark 232, 222, 248
--mdui-color-on-secondary-container
Tertiary --mdui-color-tertiary-light 125, 82, 96
--mdui-color-tertiary-dark 239, 184, 200
--mdui-color-tertiary
Tertiary container --mdui-color-tertiary-container-light 255, 216, 228
--mdui-color-tertiary-container-dark 99, 59, 72
--mdui-color-tertiary-container
On tertiary --mdui-color-on-tertiary-light 255, 255, 255
--mdui-color-on-tertiary-dark 73, 37, 50
--mdui-color-on-tertiary
On tertiary container --mdui-color-on-tertiary-container-light 55, 11, 30
--mdui-color-on-tertiary-container-dark 255, 216, 228
--mdui-color-on-tertiary-container
Surface --mdui-color-surface-light 254, 247, 255
--mdui-color-surface-dark 20, 18, 24
--mdui-color-surface
Surface dim --mdui-color-surface-dim-light 222, 216, 225
--mdui-color-surface-dim-dark 20, 18, 24
--mdui-color-surface-dim
Surface bright --mdui-color-surface-bright-light 254, 247, 255
--mdui-color-surface-bright-dark 59, 56, 62
--mdui-color-surface-bright
Surface container lowest --mdui-color-surface-container-lowest-light 255, 255, 255
--mdui-color-surface-container-lowest-dark 15, 13, 19
--mdui-color-surface-container-lowest
Surface container low --mdui-color-surface-container-low-light 247, 242, 250
--mdui-color-surface-container-low-dark 29, 27, 32
--mdui-color-surface-container-low
Surface container --mdui-color-surface-container-light 243, 237, 247
--mdui-color-surface-container-dark 33, 31, 38
--mdui-color-surface-container
Surface container high --mdui-color-surface-container-high-light 236, 230, 240
--mdui-color-surface-container-high-dark 43, 41, 48
--mdui-color-surface-container-high
Surface container highest --mdui-color-surface-container-highest-light 230, 224, 233
--mdui-color-surface-container-highest-dark 54, 52, 59
--mdui-color-surface-container-highest
Surface variant --mdui-color-surface-variant-light 231, 224, 236
--mdui-color-surface-variant-dark 73, 69, 79
--mdui-color-surface-variant
On surface --mdui-color-on-surface-light 28, 27, 31
--mdui-color-on-surface-dark 230, 225, 229
--mdui-color-on-surface
On surface variant --mdui-color-on-surface-variant-light 73, 69, 78
--mdui-color-on-surface-variant-dark 202, 196, 208
--mdui-color-on-surface-variant
Inverse surface --mdui-color-inverse-surface-light 49, 48, 51
--mdui-color-inverse-surface-dark 230, 225, 229
--mdui-color-inverse-surface
Inverse on surface --mdui-color-inverse-on-surface-light 244, 239, 244
--mdui-color-inverse-on-surface-dark 49, 48, 51
--mdui-color-inverse-on-surface
Background --mdui-color-background-light 254, 247, 255
--mdui-color-background-dark 20, 18, 24
--mdui-color-background
On background --mdui-color-on-background-light 28, 27, 31
--mdui-color-on-background-dark 230, 225, 229
--mdui-color-on-background
Error --mdui-color-error-light 179, 38, 30
--mdui-color-error-dark 242, 184, 181
--mdui-color-error
Error container --mdui-color-error-container-light 249, 222, 220
--mdui-color-error-container-dark 140, 29, 24
--mdui-color-error-container
On error --mdui-color-on-error-light 255, 255, 255
--mdui-color-on-error-dark 96, 20, 16
--mdui-color-on-error
On error container --mdui-color-on-error-container-light 65, 14, 11
--mdui-color-on-error-container-dark 249, 222, 220
--mdui-color-on-error-container
Outline --mdui-color-outline-light 121, 116, 126
--mdui-color-outline-dark 147, 143, 153
--mdui-color-outline
Outline variant --mdui-color-outline-variant-light 196, 199, 197
--mdui-color-outline-variant-dark 68, 71, 70
--mdui-color-outline-variant
Shadow --mdui-color-shadow-light 0, 0, 0
--mdui-color-shadow-dark 0, 0, 0
--mdui-color-shadow
Surface tint --mdui-color-surface-tint-color-light 103, 80, 164
--mdui-color-surface-tint-color-dark 208, 188, 255
--mdui-color-surface-tint-color
Scrim --mdui-color-scrim-light 0, 0, 0
--mdui-color-scrim-dark 0, 0, 0
--mdui-color-scrim
## Скругление углов {#shape-corner} mdui предоставляет 7 различных размеров скругления. Пример использования: ```css /* Изменение размера extra-small */ :root { --mdui-shape-corner-extra-small: 0.3rem; } /* Установка скругления .foo в extra-small */ .foo { border-radius: var(--mdui-shape-corner-extra-small); } ``` | CSS-свойство | Значение по умолчанию | Пример | | --------------------------------- | --------------------- | --------------------------------------------------------------------------------------------------------- | | `--mdui-shape-corner-none` | `0` |
| | `--mdui-shape-corner-extra-small` | `0.25rem` |
| | `--mdui-shape-corner-small` | `0.5rem` |
| | `--mdui-shape-corner-medium` | `0.75rem` |
| | `--mdui-shape-corner-large` | `1rem` |
| | `--mdui-shape-corner-extra-large` | `1.75rem` |
| | `--mdui-shape-corner-full` | `1000rem` |
| ## Типографика {#typescale} mdui предлагает 15 различных стилей текста: Display large, Display medium, Display small, Headline large, Headline medium, Headline small, Title large, Title medium, Title small, Label large, Label medium, Label small, Body large, Body medium, Body small. Пример использования: ```css /* Изменение стиля Body large */ :root { --mdui-typescale-body-large-line-height: 1.6rem; --mdui-typescale-body-large-size: 1.2rem; --mdui-typescale-body-large-tracking: 0.01rem; --mdui-typescale-body-large-weight: 400; } /* Применение стиля Body large к элементу .foo */ .foo { line-height: var(--mdui-typescale-body-large-line-height); font-size: var(--mdui-typescale-body-large-size); letter-spacing: var(--mdui-typescale-body-large-tracking); font-weight: var(--mdui-typescale-body-large-weight); } ```
CSS-свойство Значение по умолчанию Пример
--mdui-typescale-display-large-line-height 4rem
Display large
--mdui-typescale-display-large-size 3.5625rem
--mdui-typescale-display-large-tracking 0
--mdui-typescale-display-large-weight 400
--mdui-typescale-display-medium-line-height 3.25rem
Display medium
--mdui-typescale-display-medium-size 2.8125rem
--mdui-typescale-display-medium-tracking 0
--mdui-typescale-display-medium-weight 400
--mdui-typescale-display-small-line-height 2.75rem
Display small
--mdui-typescale-display-small-size 2.25rem
--mdui-typescale-display-small-tracking 0
--mdui-typescale-display-small-weight 400
--mdui-typescale-headline-large-line-height 2.5rem
Headline large
--mdui-typescale-headline-large-size 2rem
--mdui-typescale-headline-large-tracking 0
--mdui-typescale-headline-large-weight 400
--mdui-typescale-headline-medium-line-height 2.25rem
Headline medium
--mdui-typescale-headline-medium-size 1.75rem
--mdui-typescale-headline-medium-tracking 0
--mdui-typescale-headline-medium-weight 400
--mdui-typescale-headline-small-line-height 2rem
Headline small
--mdui-typescale-headline-small-size 1.5rem
--mdui-typescale-headline-small-tracking 0
--mdui-typescale-headline-small-weight 400
--mdui-typescale-title-large-line-height 1.75rem
Title large
--mdui-typescale-title-large-size 1.375rem
--mdui-typescale-title-large-tracking 0
--mdui-typescale-title-large-weight 400
--mdui-typescale-title-medium-line-height 1.5rem
Title medium
--mdui-typescale-title-medium-size 1rem
--mdui-typescale-title-medium-tracking 0.009375rem
--mdui-typescale-title-medium-weight 500
--mdui-typescale-title-small-line-height 1.25rem
Title small
--mdui-typescale-title-small-size 0.875rem
--mdui-typescale-title-small-tracking 0.00625rem
--mdui-typescale-title-small-weight 500
--mdui-typescale-label-large-line-height 1.25rem
Label large
--mdui-typescale-label-large-size 0.875rem
--mdui-typescale-label-large-tracking 0.00625rem
--mdui-typescale-label-large-weight 500
--mdui-typescale-label-medium-line-height 1rem
Label medium
--mdui-typescale-label-medium-size 0.75rem
--mdui-typescale-label-medium-tracking 0.03125rem
--mdui-typescale-label-medium-weight 500
--mdui-typescale-label-small-line-height 0.375rem
Label small
--mdui-typescale-label-small-size 0.6875rem
--mdui-typescale-label-small-tracking 0.03125rem
--mdui-typescale-label-small-weight 500
--mdui-typescale-body-large-line-height 1.5rem
Body large
--mdui-typescale-body-large-size 1rem
--mdui-typescale-body-large-tracking 0.009375rem
--mdui-typescale-body-large-weight 400
--mdui-typescale-body-medium-line-height 1.25rem
Body medium
--mdui-typescale-body-medium-size 0.875rem
--mdui-typescale-body-medium-tracking 0.015625rem
--mdui-typescale-body-medium-weight 400
--mdui-typescale-body-small-line-height 1rem
Body small
--mdui-typescale-body-small-size 0.75rem
--mdui-typescale-body-small-tracking 0.025rem
--mdui-typescale-body-small-weight 400
## Непрозрачность слоя состояния {#state-layer} Некоторые компоненты mdui при взаимодействии добавляют поверх себя полупрозрачную маску. Например, компонент [``](/ru/docs/2/components/button) при наведении, фокусе, нажатии или перетаскивании отображает такую маску. Вы можете изменить прозрачность этих масок с помощью CSS-свойств. Пример использования: ```css /* Изменение непрозрачности слоя состояния */ :root { --mdui-state-layer-hover: 0.08; --mdui-state-layer-focus: 0.12; --mdui-state-layer-pressed: 0.12; --mdui-state-layer-dragged: 0.16; } ``` | CSS-свойство | Значение по умолчанию | Пример | | ------------------------------- | --------------------- | -------------------------------------------------------------------------------------------------------------- | | `--mdui-state-layer-hover` | `0.08` |
| | `--mdui-state-layer-focus` | `0.12` |
| | `--mdui-state-layer-pressed` | `0.12` |
| | `--mdui-state-layer-dragged` | `0.16` |
| ## Высота подъёма (тени) {#elevation} Некоторые компоненты mdui имеют тени, чтобы создать ощущение поднятости над страницей. Вы можете изменять тени с помощью CSS-свойств. Пример использования: ```css /* Изменение тени уровня level1 */ :root { --mdui-elevation-level1: 0 0.5px 1.5px 0 rgba(var(--mdui-color-shadow), 19%), 0 0 1px 0 rgba(var(--mdui-color-shadow), 3.9%); } /* Применение тени level1 к элементу .foo */ .foo { box-shadow: var(--mdui-elevation-level1); } ``` | CSS-свойство | Значение по умолчанию | Пример | | ---------------------------- | ----------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------- | | `--mdui-elevation-level0` | `none` |
| | `--mdui-elevation-level1` | `0 0.5px 1.5px 0 rgba(var(--mdui-color-shadow), 19%), 0 0 1px 0 rgba(var(--mdui-color-shadow), 3.9%)` |
| | `--mdui-elevation-level2` | `0 0.85px 3px 0 rgba(var(--mdui-color-shadow), 19%), 0 0.25px 1px 0 rgba(var(--mdui-color-shadow), 3.9%)` |
| | `--mdui-elevation-level3` | `0 1.25px 5px 0 rgba(var(--mdui-color-shadow), 19%), 0 0.3333px 1.5px 0 rgba(var(--mdui-color-shadow), 3.9%)` |
| | `--mdui-elevation-level4` | `0 1.85px 6.25px 0 rgba(var(--mdui-color-shadow), 19%), 0 0.5px 1.75px 0 rgba(var(--mdui-color-shadow), 3.9%)` |
| | `--mdui-elevation-level5` | `0 2.75px 9px 0 rgba(var(--mdui-color-shadow), 19%), 0 0.25px 3px 0 rgba(var(--mdui-color-shadow), 3.9%)` |
| ## Анимация {#motion} Кривые смягчения (easing) и длительность анимации в компонентах mdui можно настраивать через CSS-свойства. Пример использования: ```css /* Изменение стандартной кривой и длительности short1 */ :root { --mdui-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1); --mdui-motion-duration-short1: 40ms; } /* Применение к .foo: стандартная кривая, длительность short1 */ .foo { transition: all var(--mdui-motion-duration-short1) var(--mdui-motion-easing-standard); } ```
Тип CSS-свойство Значение по умолчанию
Кривые смягчения --mdui-motion-easing-linear cubic-bezier(0, 0, 1, 1)
--mdui-motion-easing-standard cubic-bezier(0.2, 0, 0, 1)
--mdui-motion-easing-standard-accelerate cubic-bezier(0.3, 0, 1, 1)
--mdui-motion-easing-standard-decelerate cubic-bezier(0, 0, 0, 1)
--mdui-motion-easing-emphasized var(--mdui-motion-easing-standard)
--mdui-motion-easing-emphasized-accelerate cubic-bezier(0.3, 0, 0.8, 0.15)
--mdui-motion-easing-emphasized-decelerate cubic-bezier(0.05, 0.7, 0.1, 1)
Длительность --mdui-motion-duration-short1 50ms
--mdui-motion-duration-short2 100ms
--mdui-motion-duration-short3 150ms
--mdui-motion-duration-short4 200ms
--mdui-motion-duration-medium1 250ms
--mdui-motion-duration-medium2 300ms
--mdui-motion-duration-medium3 350ms
--mdui-motion-duration-medium4 400ms
--mdui-motion-duration-long1 450ms
--mdui-motion-duration-long2 500ms
--mdui-motion-duration-long3 550ms
--mdui-motion-duration-long4 600ms
--mdui-motion-duration-extra-long1 700ms
--mdui-motion-duration-extra-long2 800ms
--mdui-motion-duration-extra-long3 900ms
--mdui-motion-duration-extra-long4 1000ms
## Адаптивные брейкпоинты {#breakpoint} mdui предоставляет набор адаптивных брейкпоинтов, которые можно настраивать через CSS-свойства. Пример: ```css /* Изменение брейкпоинта sm */ :root { --mdui-breakpoint-sm: 560px; } ``` Важно: эти CSS-свойства нельзя использовать внутри медиа-запросов CSS. Пример неправильного использования: ```css /* Неправильно: медиа-запросы не поддерживают CSS-переменные */ @media (min-width: var(--mdui-breakpoint-sm)) { } ``` Если вам нужно определять брейкпоинты в JavaScript, используйте функцию [`breakpoint`](/ru/docs/2/functions/breakpoint). | CSS-свойство | Значение по умолчанию | | -------------------------- | --------------------- | | `--mdui-breakpoint-xs` | `0px` | | `--mdui-breakpoint-sm` | `600px` | | `--mdui-breakpoint-md` | `840px` | | `--mdui-breakpoint-lg` | `1080px` | | `--mdui-breakpoint-xl` | `1440px` | | `--mdui-breakpoint-xxl` | `1920px` | # Интеграция с React При использовании mdui в React достаточно выполнить шаги по [установке](/ru/docs/2/getting-started/installation#npm). ## Примечания {#notes} При использовании mdui в React существуют некоторые ограничения. Эти ограничения являются общими для использования Web Components в React, а не ограничениями самой библиотеки mdui. ### Привязка событий {#event-binding} Поскольку React не поддерживает пользовательские события, при использовании событий, предоставляемых компонентами mdui, необходимо сначала получить ссылку на компонент с помощью атрибута `ref`. Ниже приведен пример использования событий компонентов mdui в React: ```js import { useEffect, useRef } from 'react'; import 'mdui/mdui.css'; import 'mdui/components/switch.js'; function App() { const switchRef = useRef(null); useEffect(() => { const handleToggle = () => { console.log('switch is toggled'); }; switchRef.current.addEventListener('change', handleToggle); return () => { switchRef.current.removeEventListener('change', handleToggle); }; }, []); return ; } export default App; ``` ### Объявления типов TypeScript для JSX {#jsx-typescript} Если вы используете mdui в файлах TypeScript (.tsx), необходимо добавить объявления типов TypeScript. Вам нужно вручную добавить в файл .d.ts вашего проекта ссылку на файл объявлений типов mdui: ```ts /// ``` # Интеграция с Vue При использовании mdui в Vue сначала следуйте инструкциям по [установке](/ru/docs/2/getting-started/installation#npm), а затем выполните необходимые настройки. ## Настройка {#configuration} Вам нужно настроить Vue так, чтобы он не рассматривал компоненты mdui как компоненты Vue. В файле `vite.config` установите опцию `compilerOptions.isCustomElement`: ```js // vite.config.js import vue from '@vitejs/plugin-vue'; export default { plugins: [ vue({ template: { compilerOptions: { // Все имена тегов, начинающиеся с mdui-, являются компонентами mdui isCustomElement: (tag) => tag.startsWith('mdui-'), }, }, }), ], }; ``` Более подробную информацию об этой настройке можно найти в [официальной документации Vue](https://ru.vuejs.org/guide/extras/web-components.html#using-custom-elements-in-vue). ## Примечания {#notes} ### Двустороннее связывание данных {#data-binding} Вы не можете использовать `v-model` для двустороннего связывания данных на компонентах mdui. Вам нужно самостоятельно обрабатывать привязку и обновление данных. Например: ```html ``` ### Настройка eslint {#eslint} Если вы используете [`eslint-plugin-vue`](https://www.npmjs.com/package/eslint-plugin-vue), добавьте следующее правило в `.eslintrc.js`: ```js rules: { 'vue/no-deprecated-slot-attribute': 'off' } ``` # Интеграция с Angular При использовании mdui в Angular сначала следуйте инструкциям по [установке](/ru/docs/2/getting-started/installation#npm), а затем выполните необходимые настройки. ## Настройка {#configuration} Во-первых, необходимо включить поддержку Web Components в Angular. Пример: ```js import { BrowserModule } from '@angular/platform-browser'; import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; import { AppComponent } from './app.component'; @NgModule({ declarations: [AppComponent], imports: [BrowserModule], providers: [], bootstrap: [AppComponent], schemas: [CUSTOM_ELEMENTS_SCHEMA], }) export class AppModule {} ``` После настройки мы можем импортировать и использовать компоненты mdui в компонентах Angular: ```js import { Dialog } from 'mdui/components/dialog.js'; @Component({ selector: 'app-dialog-example', template: `
Dialog Content
` }) export class DialogExampleComponent implements OnInit { // Получение ссылки на элемент #dialog с помощью @ViewChild @ViewChild('dialog') dialog?: ElementRef; ... constructor(...) { } ngOnInit() { } ... openDialog() { // Доступ к компоненту mdui через nativeElement this.dialog?.nativeElement.open = true; } } ``` # Интеграция с другими фреймворками mdui разработан с использованием нативных Web Components, поддерживаемых браузерами, поэтому его можно использовать во всех веб-фреймворках. Ниже перечислены способы использования mdui в популярных фреймворках. ## Aurelia {#Aurelia} После установки mdui, следуя инструкциям на странице [установки](/ru/docs/2/getting-started/installation#npm), необходимо также установить и настроить дополнительный пакет (только для Aurelia 2): ```bash npm install aurelia-mdui --save ``` Затем зарегистрируйте его в приложении: ```typescript import { MduiWebTask } from 'aurelia-mdui'; Aurelia.register(MduiWebTask).app(MyApp).start(); ``` **Примечание** Пожалуйста, отправляйте сообщения об ошибках в [https://github.com/mreiche/aurelia-mdui](https://github.com/mreiche/aurelia-mdui) ## WebCell {#WebCell} При использовании mdui в [WebCell](https://web-cell.dev/) достаточно выполнить шаги по [установке](/ru/docs/2/getting-started/installation#npm). Поддержка Web Components, TypeScript и JSX является первоклассной и работает "сразу". Или вы можете использовать [официальный шаблон GitHub-репозитория](https://github.com/EasyWebApp/WebCell-mobile) для [создания нового проекта в один клик](https://github.com/new?template_name=WebCell-mobile&template_owner=EasyWebApp). # Компонент аватара Аватар используется для представления пользователя или объекта; поддерживает различные формы: изображения, иконки или текст. ## Использование {#usage} При необходимости импортируйте компонент: ```js import 'mdui/components/avatar.js'; ``` При необходимости импортируйте типы TypeScript: ```ts import type { Avatar } from 'mdui/components/avatar.js'; ``` Пример использования: ```html ``` ## Примеры {#examples} ### Аватар на основе изображения {#example-src} Вы можете указать ссылку на изображение через атрибут `src` или предоставить элемент `` в слоте по умолчанию. ```html Пример аватара из изображения ``` Используйте атрибут `fit` для определения того, как изображение вписывается в контейнер, аналогично нативному [`object-fit`](https://developer.mozilla.org/ru/docs/Web/CSS/object-fit). ### Аватар на основе иконки {#example-icon} Вы можете указать иконку Material Icons с помощью атрибута `icon` или предоставить элемент иконки в слоте по умолчанию. ```html ``` ### Текстовый аватар {#example-char} Вы можете использовать любой текст в слоте по умолчанию в качестве аватара. ```html A ``` ## mdui-avatar API ### Свойства
Атрибут Свойство Reflect Тип По умолчанию Описание
src src true string

URL изображения аватара.
fit fit true 'contain' | 'cover' | 'fill' | 'none' | 'scale-down'

Определяет, как изображение будет вписываться в контейнер, аналогично CSS-свойству object-fit. Возможные значения:

  • contain — сохраняет пропорции изображения, содержимое масштабируется пропорционально
  • cover — сохраняет пропорции изображения, но часть содержимого может быть обрезана
  • fill — значение по умолчанию, не сохраняет пропорции, содержимое растягивается, чтобы заполнить весь контейнер
  • none — сохраняет исходный размер изображения, содержимое не масштабируется и не растягивается
  • scale-down — сохраняет пропорции изображения, размер содержимого соответствует меньшему из none или contain
icon icon true string

Имя иконки Material Icons для аватара.
label label true string

Альтернативный текст для аватара.
### Slots
Название Описание
(по умолчанию)

Пользовательское содержимое аватара: буквы, символы, элемент <img>, иконки и т.д.
### CSS Parts
Название Описание
image

Внутренний элемент <img>, отображаемый при использовании изображения в качестве аватара.
icon

Внутренний элемент <mdui-icon>, отображаемый при использовании иконки в качестве аватара.
### Пользовательские CSS-свойства
Название Описание
--shape-corner

Размер скругления углов компонента. Можно указать конкретное значение в пикселях, но рекомендуется использовать дизайн-токены.
# Компонент бейджа Бейдж используется для отображения динамической информации, например, счётчиков или индикаторов состояния. Он может содержать текст или числа. ## Использование {#usage} При необходимости импортируйте компонент: ```js import 'mdui/components/badge.js'; ``` При необходимости импортируйте типы TypeScript: ```ts import type { Badge } from 'mdui/components/badge.js'; ``` Пример использования: ```html 12 ``` ## Примеры {#examples} ### Варианты {#example-variant} Используйте атрибут `variant` для выбора варианта бейджа. При значении `large` отображается большой бейдж. Вы можете указать отображаемый текст в слоте по умолчанию. ```html 99+ ``` ## mdui-badge API ### Свойства
Атрибут Свойство Reflect Тип По умолчанию Описание
variant variant true 'small' | 'large' 'large'

Форма бейджа. Возможные значения:

  • small — маленький бейдж, текст не отображается
  • large — большой бейдж, текст отображается
### Slots
Название Описание
(по умолчанию)

Текст, отображаемый в бейдже.
### Пользовательские CSS-свойства
Название Описание
--shape-corner

Размер скругления углов компонента. Можно указать конкретное значение в пикселях, но рекомендуется использовать дизайн-токены.
# Компонент Нижняя панель приложения Нижняя панель приложения в основном используется для отображения навигационных элементов и других важных действий в нижней части страницы на мобильных устройствах. ## Использование {#usage} При необходимости импортируйте компонент: ```js import 'mdui/components/bottom-app-bar.js'; ``` При необходимости импортируйте типы TypeScript: ```ts import type { BottomAppBar } from 'mdui/components/bottom-app-bar.js'; ``` Пример использования: (Примечание: `style="position: relative"` в примере добавлено для демонстрационных целей, при реальном использовании удалите этот стиль.) ```html
``` **Примечания:** Этот компонент по умолчанию использует позиционирование `position: fixed` и автоматически добавляет стиль `padding-bottom` к `body`, чтобы содержимое страницы не перекрывалось компонентом. Однако в следующих двух случаях по умолчанию используется позиционирование `position: absolute`: 1. Когда указан атрибут `scroll-target`. В этом случае стиль `padding-bottom` добавляется к элементу `scroll-target`. 2. Когда компонент находится внутри [``](/ru/docs/2/components/layout). В этом случае стиль `padding-bottom` не добавляется. ## Примеры {#examples} ### В заданном контейнере {#example-scroll-target} По умолчанию нижняя панель приложения отображается внизу страницы относительно текущего окна. Если вы хотите разместить нижнюю панель приложения внутри указанного контейнера, укажите атрибут `scroll-target`, значением которого является CSS-селектор или DOM-элемент контейнера с прокручиваемым содержимым. В этом случае нижняя панель приложения будет отображаться относительно родительского элемента (вам нужно самостоятельно добавить родительскому элементу стили `position: relative; overflow: hidden`). ```html
Content
``` ### Скрытие при прокрутке {#example-scroll-behavior} Установите атрибут `scroll-behavior` в значение `hide`, чтобы скрывать нижнюю панель приложения при прокрутке страницы вниз и показывать при прокрутке вверх. Используйте атрибут `scroll-threshold`, чтобы задать количество пикселей прокрутки, после которого начнется скрытие панели. ```html
Content
``` ### Закрепление плавающей кнопки действия {#example-fab-detach} Если нижняя панель приложения содержит [плавающую кнопку действия](/ru/docs/2/components/fab), добавьте атрибут `fab-detach`, чтобы при прокрутке страницы и скрытии панели плавающая кнопка действия оставалась в правом нижнем углу страницы. ```html
``` ## mdui-bottom-app-bar API ### Свойства
Атрибут Свойство Reflect Тип По умолчанию Описание
hide hide true boolean false

Определяет, скрыта ли панель.
fab-detach fabDetach true boolean false

Определяет, нужно ли отделять <mdui-fab> от панели при скрытии. Если true, FAB остаётся на странице при скрытии панели.
scroll-behavior scrollBehavior true 'hide' | 'shrink' | 'elevate'

Поведение при прокрутке. Возможные значения:

  • hide — скрывать при прокрутке.
scroll-target scrollTarget false string | HTMLElement | JQ<HTMLElement>

Элемент, прокрутку которого нужно отслеживать. В качестве значения можно указать CSS-селектор, DOM-элемент или JQ-объект. По умолчанию отслеживается событие scroll объекта window.
scroll-threshold scrollThreshold true number

Пороговое значение прокрутки в пикселях, при котором срабатывает поведение прокрутки.
order order true number

Порядок этого компонента в <mdui-layout> (по возрастанию). По умолчанию 0.
### События
Название Описание
show

Событие срабатывает в начале появления. Можно отменить появление, вызвав event.preventDefault().
shown

Событие срабатывает после завершения анимации появления.
hide

Событие срабатывает в начале скрытия. Можно отменить скрытие, вызвав event.preventDefault().
hidden

Событие срабатывает после завершения анимации скрытия.
### Slots
Название Описание
(по умолчанию)

Элементы внутри нижней панели приложения.
### Пользовательские CSS-свойства
Название Описание
--shape-corner

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

Значение CSS z-index компонента.
# Компонент кнопки Кнопки в основном используются для выполнения действий, таких как отправка электронных писем, публикация документов или оценка комментариев. ## Использование {#usage} При необходимости импортируйте компонент: ```js import 'mdui/components/button.js'; ``` При необходимости импортируйте типы TypeScript: ```ts import type { Button } from 'mdui/components/button.js'; ``` Пример использования: ```html Button ``` ## Примеры {#examples} ### Варианты {#example-variant} Используйте атрибут `variant` для установки варианта кнопки. ```html Elevated Filled Tonal Outlined Text ``` ### На всю ширину {#example-full-width} Добавьте атрибут `full-width`, чтобы кнопка занимала всю ширину родительского элемента. ```html Button ``` ### Иконки {#example-icon} Установите атрибуты `icon` и `end-icon`, чтобы добавить иконки Material Icons слева и справа от кнопки соответственно. Также можно использовать слоты `icon` и `end-icon` для добавления элементов. ```html Icon Slot ``` ### Ссылка {#example-link} Установите атрибут `href`, чтобы превратить кнопку в ссылку. При этом также можно использовать связанные с ссылками атрибуты: `download`, `target`, `rel`. ```html Link ``` ### Отключённое состояние и состояние загрузки {#example-disabled} Добавьте атрибут `disabled`, чтобы отключить кнопку; добавьте атрибут `loading`, чтобы добавить состояние загрузки. ```html Disabled Loading Loading & Disabled ``` ## mdui-button API ### Свойства
Атрибут Свойство Reflect Тип По умолчанию Описание
variant variant true 'elevated' | 'filled' | 'tonal' | 'outlined' | 'text' 'filled'

Вариант кнопки. Возможные значения:

  • elevated — кнопка с тенью, подходит для визуального отделения от фона
  • filled — выраженный визуальный акцент, подходит для финальных действий важных процессов, например «Сохранить», «Подтвердить»
  • tonal — визуальный акцент, промежуточный между filled и outlined, подходит для действий среднего и высокого приоритета, например «Далее» в процессе
  • outlined — кнопка с рамкой, подходит для действий среднего приоритета и второстепенных действий, например «Назад»
  • text — текстовая кнопка, подходит для действий самого низкого приоритета
full-width fullWidth true boolean false

Определяет, растягивать ли на всю ширину родительского элемента.
icon icon true string

Имя иконки Material Icons слева. Можно задать через slot="icon".
end-icon endIcon true string

Имя иконки Material Icons справа. Можно задать через slot="end-icon".
href href true string

Целевой URL ссылки.

Если задано это свойство, компонент будет отображаться как элемент <a> и можно использовать свойства, связанные со ссылками.
download download true string

Имя файла для скачивания при переходе по ссылке.

Примечание: Это свойство действует только при заданном свойстве href.
target target true '_blank' | '_parent' | '_self' | '_top'

Определяет, где будет открыта ссылка. Возможные значения:

  • _blank — открывает ссылку в новом окне
  • _parent — открывает ссылку в родительском фрейме
  • _self — открывает ссылку в текущем фрейме (по умолчанию)
  • _top — открывает ссылку во всём окне

Примечание: Это свойство действует только при заданном свойстве href.
rel rel true '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 true boolean false

Определяет, будет ли элемент автоматически получать фокус после загрузки страницы.
tabindex tabIndex false number

Порядок перехода к элементу при нажатии клавиши Tab.
disabled disabled true boolean false

Отключает элемент.
loading loading true boolean false

Переводит элемент в состояние загрузки.
name name true string ''

Имя кнопки, которое будет отправлено вместе с данными формы.

Примечание: Это свойство действует, только если не задано свойство href.
value value true string ''

Значение кнопки, которое будет отправлено вместе с данными формы.

Примечание: Это свойство действует, только если не задано свойство href.
type type true 'submit' | 'reset' | 'button' 'button'

Тип кнопки. По умолчанию button. Возможные значения:

  • submit — эта кнопка отправляет данные формы на сервер
  • reset — эта кнопка сбрасывает все компоненты к начальным значениям
  • button — эта кнопка не имеет поведения по умолчанию

Примечание: Это свойство действует, только если не задано свойство href.
form form true string

Связанный элемент <form>. В качестве значения укажите id элемента <form> на той же странице.

Если свойство не задано, элемент должен быть дочерним по отношению к <form>. С этим свойством элемент можно разместить в любом месте страницы, а не только внутри <form>.

Примечание: Это свойство действует, только если не задано свойство href.
formaction formAction true string

Задаёт URL-адрес для отправки формы.

Если это свойство задано, оно переопределяет атрибут action элемента <form>.

Примечание: Это свойство действует, только если не задано свойство href и type="submit".
formenctype formEnctype true '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 true 'post' | 'get'

Определяет HTTP-метод, который используется при отправке формы. Возможные значения:

  • post — данные формы отправляются на сервер в теле запроса
  • get — данные формы добавляются к URI формы после символа ?, и полученный URI отправляется на сервер. Используется, если форма не имеет побочных эффектов и содержит только ASCII-символы.

Если это свойство задано, оно переопределяет атрибут method элемента <form>.

Примечание: Это свойство действует, только если не задано свойство href и type="submit".
formnovalidate formNoValidate true boolean false

Если задано, проверка формы при отправке не выполняется.

Если задано, переопределяет атрибут novalidate элемента <form>.

Примечание: Это свойство действует, только если не задано свойство href и type="submit".
formtarget formTarget true '_self' | '_blank' | '_parent' | '_top'

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

  • _self — по умолчанию, открывается в текущем фрейме
  • _blank — открывается в новом окне
  • _parent — открывается в родительском фрейме
  • _top — открывается во всём окне

Если это свойство задано, оно переопределяет атрибут target элемента <form>.

Примечание: Это свойство действует, только если не задано свойство href и type="submit".
undefined validity false ValidityState

Объект, содержащий состояние валидации формы. См. ValidityState.
undefined validationMessage false 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

Элемент слева от кнопки.
end-icon

Элемент справа от кнопки.
### CSS Parts
Название Описание
button

Внутренний элемент <button> или <a>.
label

Текст кнопки.
icon

Иконка слева.
end-icon

Иконка справа.
loading

Элемент <mdui-circular-progress> в состоянии загрузки.
### Пользовательские CSS-свойства
Название Описание
--shape-corner

Размер скругления углов компонента. Можно указать конкретное значение в пикселях, но рекомендуется использовать дизайн-токены.
# Компонент Кнопка с иконкой Кнопка с иконкой в основном используется для выполнения второстепенных действий. ## Использование {#usage} При необходимости импортируйте компонент: ```js import 'mdui/components/button-icon.js'; ``` При необходимости импортируйте типы TypeScript: ```ts import type { ButtonIcon } from 'mdui/components/button-icon.js'; ``` Пример использования: ```html ``` ## Примеры {#examples} ### Иконка {#example-icon} Используйте атрибут `icon` для указания названия иконки Material Icons. Также можно указать элемент иконки через слот по умолчанию. ```html ``` ### Варианты {#example-variant} Используйте атрибут `variant` для установки варианта кнопки с иконкой. ```html ``` ### Выбираемое состояние {#example-selectable} Добавьте атрибут `selectable`, чтобы кнопка с иконкой могла быть выбрана. ```html ``` Используйте атрибут `selected-icon` для указания названия иконки Material Icons в выбранном состоянии. Также можно указать элемент иконки через слот `selected-icon`. ```html ``` После выбора кнопки атрибут `selected` получает значение `true`. Также можно добавить атрибут `selected`, чтобы кнопка по умолчанию была в выбранном состоянии. ```html ``` ### Ссылка {#example-link} Добавьте атрибут `href`, чтобы превратить кнопку с иконкой в ссылку. При этом также можно использовать связанные с ссылками атрибуты: `download`, `target`, `rel`. ```html ``` ### Отключённое состояние и состояние загрузки {#example-disabled} Добавьте атрибут `disabled`, чтобы отключить кнопку с иконкой; добавьте атрибут `loading`, чтобы добавить состояние загрузки. ```html ``` ## mdui-button-icon API ### Свойства
Атрибут Свойство Reflect Тип По умолчанию Описание
variant variant true 'standard' | 'filled' | 'tonal' | 'outlined' 'standard'

Вариант кнопки с иконкой. Возможные значения:

  • standard — подходит для действий самого низкого приоритета
  • filled — выраженный визуальный акцент, подходит для действий высокого приоритета
  • tonal — визуальный акцент, промежуточный между filled и outlined, подходит для действий среднего и высокого приоритета
  • outlined — подходит для действий среднего приоритета
icon icon true string

Имя иконки Material Icons. Можно задать через слот по умолчанию.
selected-icon selectedIcon true string

Имя иконки Material Icons в выбранном состоянии. Можно задать через slot="selected-icon".
selectable selectable true boolean false

Определяет, можно ли выбрать.
selected selected true boolean false

Определяет, выбрана ли кнопка.
href href true string

Целевой URL ссылки.

Если задано это свойство, компонент будет отображаться как элемент <a> и можно использовать свойства, связанные со ссылками.
download download true string

Имя файла для скачивания при переходе по ссылке.

Примечание: Это свойство действует только при заданном свойстве href.
target target true '_blank' | '_parent' | '_self' | '_top'

Определяет, где будет открыта ссылка. Возможные значения:

  • _blank — открывает ссылку в новом окне
  • _parent — открывает ссылку в родительском фрейме
  • _self — открывает ссылку в текущем фрейме (по умолчанию)
  • _top — открывает ссылку во всём окне

Примечание: Это свойство действует только при заданном свойстве href.
rel rel true '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 true boolean false

Определяет, будет ли элемент автоматически получать фокус после загрузки страницы.
tabindex tabIndex false number

Порядок перехода к элементу при нажатии клавиши Tab.
disabled disabled true boolean false

Отключает элемент.
loading loading true boolean false

Переводит элемент в состояние загрузки.
name name true string ''

Имя кнопки, которое будет отправлено вместе с данными формы.

Примечание: Это свойство действует, только если не задано свойство href.
value value true string ''

Значение кнопки, которое будет отправлено вместе с данными формы.

Примечание: Это свойство действует, только если не задано свойство href.
type type true 'submit' | 'reset' | 'button' 'button'

Тип кнопки. По умолчанию button. Возможные значения:

  • submit — эта кнопка отправляет данные формы на сервер
  • reset — эта кнопка сбрасывает все компоненты к начальным значениям
  • button — эта кнопка не имеет поведения по умолчанию

Примечание: Это свойство действует, только если не задано свойство href.
form form true string

Связанный элемент <form>. В качестве значения укажите id элемента <form> на той же странице.

Если свойство не задано, элемент должен быть дочерним по отношению к <form>. С этим свойством элемент можно разместить в любом месте страницы, а не только внутри <form>.

Примечание: Это свойство действует, только если не задано свойство href.
formaction formAction true string

Задаёт URL-адрес для отправки формы.

Если это свойство задано, оно переопределяет атрибут action элемента <form>.

Примечание: Это свойство действует, только если не задано свойство href и type="submit".
formenctype formEnctype true '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 true 'post' | 'get'

Определяет HTTP-метод, который используется при отправке формы. Возможные значения:

  • post — данные формы отправляются на сервер в теле запроса
  • get — данные формы добавляются к URI формы после символа ?, и полученный URI отправляется на сервер. Используется, если форма не имеет побочных эффектов и содержит только ASCII-символы.

Если это свойство задано, оно переопределяет атрибут method элемента <form>.

Примечание: Это свойство действует, только если не задано свойство href и type="submit".
formnovalidate formNoValidate true boolean false

Если задано, проверка формы при отправке не выполняется.

Если задано, переопределяет атрибут novalidate элемента <form>.

Примечание: Это свойство действует, только если не задано свойство href и type="submit".
formtarget formTarget true '_self' | '_blank' | '_parent' | '_top'

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

  • _self — по умолчанию, открывается в текущем фрейме
  • _blank — открывается в новом окне
  • _parent — открывается в родительском фрейме
  • _top — открывается во всём окне

Если это свойство задано, оно переопределяет атрибут target элемента <form>.

Примечание: Это свойство действует, только если не задано свойство href и type="submit".
undefined validity false ValidityState

Объект, содержащий состояние валидации формы. См. ValidityState.
undefined validationMessage false 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

Срабатывает при потере фокуса.
change

Срабатывает при изменении состояния выбора.
invalid

Возникает, когда поле формы не проходит валидацию.
### Slots
Название Описание
(по умолчанию)

Элемент иконки.
selected-icon

Элемент иконки, отображаемый в выбранном состоянии.
### CSS Parts
Название Описание
button

Внутренний элемент <button> или <a>.
icon

Иконка в невыбранном состоянии.
selected-icon

Иконка в выбранном состоянии.
loading

Элемент <mdui-circular-progress> в состоянии загрузки.
### Пользовательские CSS-свойства
Название Описание
--shape-corner

Размер скругления углов компонента. Можно указать конкретное значение в пикселях, но рекомендуется использовать дизайн-токены.
# Компонент карточки Карточка — это многофункциональный компонент для размещения контента и действий, связанных с одной темой. ## Использование {#usage} При необходимости импортируйте компонент: ```js import 'mdui/components/card.js'; ``` При необходимости импортируйте типы TypeScript: ```ts import type { Card } from 'mdui/components/card.js'; ``` Пример использования: ```html Card ``` ## Примеры {#examples} ### Варианты {#example-variant} Используйте атрибут `variant` для установки варианта карточки. ```html ``` ### Возможность нажатия {#example-clickable} Добавьте атрибут `clickable`, чтобы карточка стала интерактивной. При этом добавляются эффекты при наведении курсора и эффект пульсации при клике. ```html ``` ### Ссылка {#example-link} Добавьте атрибут `href`, чтобы превратить карточку в ссылку. При этом также можно использовать связанные с ссылками атрибуты: `download`, `target`, `rel`. ```html ``` ### Отключённое состояние {#example-disabled} Добавьте атрибут `disabled`, чтобы отключить карточку. ```html ``` ## mdui-card API ### Свойства
Атрибут Свойство Reflect Тип По умолчанию Описание
variant variant true 'elevated' | 'filled' | 'outlined' 'elevated'

Вариант карточки. Возможные значения:

  • elevated — карточка с тенью, заметное визуальное отделение от фона
  • filled — залитая цветом карточка, слабое визуальное отделение от фона
  • outlined — карточка с рамкой, максимальное визуальное отделение от фона
clickable clickable true boolean false

Определяет, является ли карточка кликабельной. При true карточка реагирует на наведение и показывает эффект волны при клике.
disabled disabled true boolean false

Определяет, отключена ли карточка.
href href true string

Целевой URL ссылки.

Если задано это свойство, компонент будет отображаться как элемент <a> и можно использовать свойства, связанные со ссылками.
download download true string

Имя файла для скачивания при переходе по ссылке.

Примечание: Это свойство действует только при заданном свойстве href.
target target true '_blank' | '_parent' | '_self' | '_top'

Определяет, где будет открыта ссылка. Возможные значения:

  • _blank — открывает ссылку в новом окне
  • _parent — открывает ссылку в родительском фрейме
  • _self — открывает ссылку в текущем фрейме (по умолчанию)
  • _top — открывает ссылку во всём окне

Примечание: Это свойство действует только при заданном свойстве href.
rel rel true '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 true boolean false

Определяет, будет ли элемент автоматически получать фокус после загрузки страницы.
tabindex tabIndex false number

Порядок перехода к элементу при нажатии клавиши Tab.
### Методы
Название Описание
click(): void

Имитирует щелчок мыши по элементу.
focus(options?: FocusOptions): void

Устанавливает фокус на текущий элемент.

В качестве аргумента можно передать объект со свойством:

  • preventScroll: по умолчанию после получения фокуса страница прокручивается, чтобы элемент появился в области видимости. Чтобы этого избежать, задайте для этого свойства значение true.
blur(): void

Убирает фокус с текущего элемента.
### События
Название Описание
focus

Срабатывает при получении фокуса.
blur

Срабатывает при потере фокуса.
### Slots
Название Описание
(по умолчанию)

Содержимое карточки.
### Пользовательские CSS-свойства
Название Описание
--shape-corner

Размер скругления углов компонента. Можно указать конкретное значение в пикселях, но рекомендуется использовать дизайн-токены.
# Компонент чекбокса Чекбокс позволяет пользователю выбрать один или несколько вариантов из набора или переключить состояние отдельного параметра (вкл/выкл). ## Использование {#usage} При необходимости импортируйте компонент: ```js import 'mdui/components/checkbox.js'; ``` При необходимости импортируйте типы TypeScript: ```ts import type { Checkbox } from 'mdui/components/checkbox.js'; ``` Пример использования: ```html Checkbox ``` ## Примеры {#examples} ### Выбранное состояние {#example-checked} Когда чекбокс выбран, атрибут `checked` равен `true`. Добавьте атрибут `checked`, чтобы чекбокс по умолчанию был в выбранном состоянии. ```html Checkbox ``` ### Отключённое состояние {#example-disabled} Добавьте атрибут `disabled`, чтобы отключить чекбокс. ```html Checkbox Checkbox ``` ### Неопределённое состояние {#example-indeterminate} Добавьте атрибут `indeterminate`, чтобы чекбокс находился в неопределённом состоянии. ```html Checkbox ``` ### Иконки {#example-icon} С помощью атрибутов `unchecked-icon`, `checked-icon`, `indeterminate-icon` можно задать иконки Material Icons для невыбранного, выбранного и неопределённого состояний соответственно. Также можно использовать слоты `unchecked-icon`, `checked-icon`, `indeterminate-icon`. ```html Checkbox Checkbox
Checkbox Checkbox ``` ## mdui-checkbox API ### Свойства
Атрибут Свойство Reflect Тип По умолчанию Описание
disabled disabled true boolean false

Определяет, отключён ли чекбокс.
checked checked true boolean false

Определяет, установлен ли флажок.
undefined defaultChecked false boolean false

Исходное состояние флажка. При сбросе формы оно восстанавливается. Это свойство задаётся только через JavaScript.
indeterminate indeterminate true boolean false

Определяет, находится ли в неопределённом состоянии.
required required true boolean false

Определяет, обязателен ли для отправки формы.
form form true string

Связанный элемент <form>. В качестве значения укажите id элемента <form> на той же странице.

Если свойство не задано, элемент должен быть дочерним по отношению к <form>. С этим свойством элемент можно разместить в любом месте страницы, а не только внутри <form>.
name name true string ''

Имя чекбокса, которое будет отправлено вместе с данными формы.
value value true string 'on'

Значение чекбокса, которое будет отправлено вместе с данными формы.
unchecked-icon uncheckedIcon true string

Имя иконки Material Icons для неотмеченного состояния. Можно задать через slot="unchecked-icon".
checked-icon checkedIcon true string

Имя иконки Material Icons для отмеченного состояния. Можно задать через slot="checked-icon".
indeterminate-icon indeterminateIcon true string

Имя иконки Material Icons для неопределённого состояния. Можно задать через slot="indeterminate-icon".
undefined validity false ValidityState

Объект, содержащий состояние валидации формы. См. ValidityState.
undefined validationMessage false string

Если проверка формы не пройдена, это свойство содержит сообщение об ошибке. Если проверка пройдена, это свойство будет пустой строкой.
autofocus autofocus true boolean false

Определяет, будет ли элемент автоматически получать фокус после загрузки страницы.
tabindex tabIndex false 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

Срабатывает при изменении состояния флажка.
input

Срабатывает при изменении состояния флажка.
invalid

Возникает, когда поле формы не проходит валидацию.
### Slots
Название Описание
(по умолчанию)

Текст чекбокса.
unchecked-icon

Иконка неотмеченного состояния.
checked-icon

Иконка отмеченного состояния.
indeterminate-icon

Иконка неопределённого состояния.
### CSS Parts
Название Описание
control

Контейнер для иконки слева.
unchecked-icon

Иконка неотмеченного состояния.
checked-icon

Иконка отмеченного состояния.
indeterminate-icon

Иконка неопределённого состояния.
label

Текст чекбокса.
# Компонент чипа Чип помогает пользователю вводить информацию, делать выбор, фильтровать контент или выполнять связанные действия. ## Использование {#usage} При необходимости импортируйте компонент: ```js import 'mdui/components/chip.js'; ``` При необходимости импортируйте типы TypeScript: ```ts import type { Chip } from 'mdui/components/chip.js'; ``` Пример использования: ```html Chip ``` ## Примеры {#examples} ### Вариант {#example-variant} Используйте атрибут `variant` для установки варианта чипа. Существует 4 варианта чипов, которые можно выбирать в зависимости от назначения: - `assist`: Используется для отображения вспомогательных действий, связанных с текущим контекстом. Например, на странице заказа еды предоставить функции поделиться, добавить в избранное и т.д. - `filter`: Используется для фильтрации контента. Например, на странице результатов поиска для фильтрации результатов. - `input`: Используется для представления фрагментов информации, введенных пользователем. Например, контакты в поле "Кому" в Gmail. - `suggestion`: Используется для предоставления динамически генерируемых рекомендаций для упрощения действий пользователя. Например, в приложении чата предположение сообщения, которое пользователь, возможно, захочет отправить. ```html Assist Filter Input Suggestion ``` ### Тень {#example-elevated} Добавьте атрибут `elevated`, чтобы у чипа появилась тень. ```html Chip ``` ### Иконка {#example-icon} Добавьте атрибуты `icon` и `end-icon`, чтобы добавить иконки Material Icons слева и справа от чипа. Также можно использовать слоты `icon` и `end-icon` для добавления элементов. ```html Icon End Icon Slot ``` ### Ссылка {#example-link} Добавьте атрибут `href`, чтобы превратить чип в ссылку. При этом также можно использовать связанные с ссылками атрибуты: `download`, `target`, `rel`. ```html Link ``` ### Отключенное состояние и состояние загрузки {#example-disabled} Добавьте атрибут `disabled`, чтобы отключить чип; добавьте атрибут `loading`, чтобы добавить состояние загрузки. ```html Disabled Loading Loading & Disabled ``` ### Выбираемый {#example-selectable} Добавьте атрибут `selectable`, чтобы чип можно было выбрать. ```html Chip ``` Используйте атрибут `selected-icon` для указания названия иконки Material Icons в выбранном состоянии. Также можно указать элемент иконки через слот `selected-icon`. ```html Chip Chip ``` После выбора чипа атрибут `selected` становится `true`. Также можно добавить атрибут `selected`, чтобы чип по умолчанию был в выбранном состоянии. ```html Chip ``` ### Удаляемый {#example-deletable} После добавления атрибута `deletable` справа от чипа появляется иконка удаления. Нажатие на эту иконку вызывает событие `delete`. Вы можете указать иконку удаления через атрибут `delete-icon` или слот `delete-icon`. ```html Chip Chip Chip ``` ## mdui-chip API ### Свойства
Атрибут Свойство Reflect Тип По умолчанию Описание
variant variant true 'assist' | 'filter' | 'input' | 'suggestion' 'assist'

Вариант чипа. Возможные значения:

  • assist — используется для отображения вспомогательных действий, связанных с текущим контекстом, например «Поделиться», «В избранное» на странице заказа
  • filter — используется для фильтрации содержимого, например фильтрация результатов поиска
  • input — используется для представления фрагментов информации, введённых пользователем, например контакты в поле «Кому» в Gmail
  • suggestion — используется для предоставления динамически генерируемых рекомендаций для упрощения действий пользователя, например предсказание сообщений в чат-приложении
elevated elevated true boolean false

Определяет, отображать ли тень.
selectable selectable true boolean false

Определяет, можно ли выбрать.
selected selected true boolean false

Определяет, выбран ли чип.
deletable deletable true boolean false

Определяет, можно ли удалить. При true справа от чипа отображается иконка удаления.
icon icon true string

Имя иконки Material Icons слева. Можно задать через slot="icon".
selected-icon selectedIcon true string

Имя иконки Material Icons слева в выбранном состоянии. Можно задать через slot="selected-icon".
end-icon endIcon true string

Имя иконки Material Icons справа. Можно задать через slot="end-icon".
delete-icon deleteIcon true string

Имя иконки Material Icons для удаления справа, когда чип удаляемый. Можно задать через slot="delete-icon".
href href true string

Целевой URL ссылки.

Если задано это свойство, компонент будет отображаться как элемент <a> и можно использовать свойства, связанные со ссылками.
download download true string

Имя файла для скачивания при переходе по ссылке.

Примечание: Это свойство действует только при заданном свойстве href.
target target true '_blank' | '_parent' | '_self' | '_top'

Определяет, где будет открыта ссылка. Возможные значения:

  • _blank — открывает ссылку в новом окне
  • _parent — открывает ссылку в родительском фрейме
  • _self — открывает ссылку в текущем фрейме (по умолчанию)
  • _top — открывает ссылку во всём окне

Примечание: Это свойство действует только при заданном свойстве href.
rel rel true '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 true boolean false

Определяет, будет ли элемент автоматически получать фокус после загрузки страницы.
tabindex tabIndex false number

Порядок перехода к элементу при нажатии клавиши Tab.
disabled disabled true boolean false

Отключает элемент.
loading loading true boolean false

Переводит элемент в состояние загрузки.
name name true string ''

Имя кнопки, которое будет отправлено вместе с данными формы.

Примечание: Это свойство действует, только если не задано свойство href.
value value true string ''

Значение кнопки, которое будет отправлено вместе с данными формы.

Примечание: Это свойство действует, только если не задано свойство href.
type type true 'submit' | 'reset' | 'button' 'button'

Тип кнопки. По умолчанию button. Возможные значения:

  • submit — эта кнопка отправляет данные формы на сервер
  • reset — эта кнопка сбрасывает все компоненты к начальным значениям
  • button — эта кнопка не имеет поведения по умолчанию

Примечание: Это свойство действует, только если не задано свойство href.
form form true string

Связанный элемент <form>. В качестве значения укажите id элемента <form> на той же странице.

Если свойство не задано, элемент должен быть дочерним по отношению к <form>. С этим свойством элемент можно разместить в любом месте страницы, а не только внутри <form>.

Примечание: Это свойство действует, только если не задано свойство href.
formaction formAction true string

Задаёт URL-адрес для отправки формы.

Если это свойство задано, оно переопределяет атрибут action элемента <form>.

Примечание: Это свойство действует, только если не задано свойство href и type="submit".
formenctype formEnctype true '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 true 'post' | 'get'

Определяет HTTP-метод, который используется при отправке формы. Возможные значения:

  • post — данные формы отправляются на сервер в теле запроса
  • get — данные формы добавляются к URI формы после символа ?, и полученный URI отправляется на сервер. Используется, если форма не имеет побочных эффектов и содержит только ASCII-символы.

Если это свойство задано, оно переопределяет атрибут method элемента <form>.

Примечание: Это свойство действует, только если не задано свойство href и type="submit".
formnovalidate formNoValidate true boolean false

Если задано, проверка формы при отправке не выполняется.

Если задано, переопределяет атрибут novalidate элемента <form>.

Примечание: Это свойство действует, только если не задано свойство href и type="submit".
formtarget formTarget true '_self' | '_blank' | '_parent' | '_top'

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

  • _self — по умолчанию, открывается в текущем фрейме
  • _blank — открывается в новом окне
  • _parent — открывается в родительском фрейме
  • _top — открывается во всём окне

Если это свойство задано, оно переопределяет атрибут target элемента <form>.

Примечание: Это свойство действует, только если не задано свойство href и type="submit".
undefined validity false ValidityState

Объект, содержащий состояние валидации формы. См. ValidityState.
undefined validationMessage false 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

Возникает, когда поле формы не проходит валидацию.
change

Срабатывает при изменении состояния выбора.
delete

Срабатывает при клике на иконку удаления.
### Slots
Название Описание
(по умолчанию)

Текст чипа.
icon

Элемент слева.
end-icon

Элемент справа.
selected-icon

Элемент слева в выбранном состоянии.
delete-icon

Элемент удаления справа, когда чип удаляемый.
### CSS Parts
Название Описание
button

Внутренний элемент <button> или <a>.
label

Текст чипа.
icon

Иконка слева.
end-icon

Иконка справа.
selected-icon

Иконка слева в выбранном состоянии.
delete-icon

Иконка удаления справа, когда чип удаляемый.
loading

Элемент <mdui-circular-progress> в состоянии загрузки.
### Пользовательские CSS-свойства
Название Описание
--shape-corner

Размер скругления углов компонента. Можно указать конкретное значение в пикселях, но рекомендуется использовать дизайн-токены.
# Компонент Круговой индикатор прогресса Круговой индикатор прогресса — это круглый компонент для отображения хода выполнения задачи, например загрузки данных или отправки формы. ## Использование {#usage} При необходимости импортируйте компонент: ```js import 'mdui/components/circular-progress.js'; ``` При необходимости импортируйте типы TypeScript: ```ts import type { CircularProgress } from 'mdui/components/circular-progress.js'; ``` Пример использования: ```html ``` ## Примеры {#examples} ### Установка прогресса {#example-value} По умолчанию круговой индикатор отображает состояние выполнения задачи с неопределённой длительностью. Вы можете задать текущий прогресс через атрибут `value`. Максимальное значение прогресса по умолчанию — `1`. ```html ``` Максимальное значение прогресса можно задать через атрибут `max`. ```html ``` ## mdui-circular-progress API ### Свойства
Атрибут Свойство Reflect Тип По умолчанию Описание
max max true number 1

Максимальное значение индикатора прогресса. По умолчанию 1.
value value false number

Текущее значение индикатора прогресса. Если не указано, индикатор находится в неопределённом состоянии.
# Компонент Раскрывающийся блок Компонент раскрывающегося блока используется для группировки и скрытия сложных областей контента, чтобы сохранить чистоту страницы. Обратите внимание, что сам компонент раскрывающегося блока не содержит стилей; вам нужно добавлять стили самостоятельно или использовать его вместе с другими компонентами. ## Использование {#usage} При необходимости импортируйте компоненты: ```js import 'mdui/components/collapse.js'; import 'mdui/components/collapse-item.js'; ``` При необходимости импортируйте типы TypeScript: ```ts import type { Collapse } from 'mdui/components/collapse.js'; import type { CollapseItem } from 'mdui/components/collapse-item.js'; ``` Пример использования: ```html first content second content ``` ## Примеры {#examples} ### Заголовок и содержимое панели {#example-header} Через атрибут `header` компонента `` можно задать текст заголовка панели, также можно использовать слот `header` для указания элемента заголовка. Слот по умолчанию компонента используется для содержимого панели. ```html Item 1
Item 1 - subitem
Item 2
Item 2 - subitem
``` ### Режим аккордеона {#example-accordion} Добавьте атрибут `accordion` к компоненту ``, чтобы включить режим аккордеона, при котором одновременно может быть открыта только одна панель. ```html Item 1
Item 1 - subitem
Item 2
Item 2 - subitem
``` ### Установка активной панели {#example-value} Через атрибут `value` компонента `` вы можете получить текущую открытую панель или задать панель, которую нужно открыть. В режиме аккордеона значением атрибута `value` является строка. Вы можете управлять этим атрибутом с помощью HTML-атрибута или JavaScript-свойства. В неаккордеонном режиме значением `value` является массив, и управлять им можно только через JavaScript-свойство. ```html Режим аккордеона Item 1
Item 1 - subitem
Item 2
Item 2 - subitem
Неаккордеонный режим Item 1
Item 1 - subitem
Item 2
Item 2 - subitem
``` ### Отключенное состояние {#example-disabled} Добавив атрибут `disabled` к компоненту ``, можно отключить всю группу раскрывающихся блоков. Аналогично, добавив атрибут `disabled` к компоненту ``, можно отключить конкретную панель. ```html Все отключены Item 1
Item 1 - subitem
Item 2
Item 2 - subitem
Первая панель отключена Item 1
Item 1 - subitem
Item 2
Item 2 - subitem
``` ### Элемент, инициирующий раскрытие {#example-trigger} По умолчанию раскрытие инициируется при клике по всей области заголовка панели. Вы можете указать элемент, который будет инициировать раскрытие, через атрибут `trigger` компонента ``. Значением `trigger` может быть CSS-селектор или DOM-элемент. ```html Item 1
Item 1 - subitem
``` ## mdui-collapse-item API ### Свойства
Атрибут Свойство Reflect Тип По умолчанию Описание
value value true string

Значение этого элемента раскрывающегося блока.
header header true string

Текст заголовка этого элемента раскрывающегося блока.
disabled disabled true boolean false

Определяет, отключён ли этот элемент раскрывающегося блока.
trigger trigger false string | HTMLElement | JQ<HTMLElement>

Элемент, нажатие по которому сворачивает или разворачивает блок. В качестве значения можно указать CSS-селектор, DOM-элемент или JQ-объект. По умолчанию действие вызывается нажатием по всей области заголовка.
### События
Название Описание
open

Срабатывает в начале открытия.
opened

Срабатывает после завершения анимации открытия.
close

Срабатывает в начале закрытия.
closed

Срабатывает после завершения анимации закрытия.
### Slots
Название Описание
(по умолчанию)

Основное содержимое элемента раскрывающегося блока.
header

Содержимое заголовка элемента раскрывающегося блока.
### CSS Parts
Название Описание
header

Содержимое заголовка раскрывающегося блока.
body

Основное содержимое раскрывающегося блока.
## mdui-collapse API ### Свойства
Атрибут Свойство Reflect Тип По умолчанию Описание
accordion accordion true boolean false

Режим аккордеона (одновременно может быть открыт только один элемент).
value value false string | string[]

Значение текущего открытого <mdui-collapse-item>.

Примечание: HTML-атрибут этого свойства всегда является строкой; задать начальное значение через HTML-атрибут можно только при accordion=true. JavaScript-свойство этого свойства является строкой при accordion=true и массивом строк при accordion=false. Поэтому при accordion=false изменить это значение можно только через JavaScript-свойство.
disabled disabled true boolean false

Определяет, отключён ли этот раскрывающийся блок.
### События
Название Описание
change

Срабатывает при изменении открытого элемента.
### Slots
Название Описание
(по умолчанию)

Компоненты <mdui-collapse-item>.
# Компонент Диалоговое окно Диалоговое окно используется для отображения важных уведомлений в процессе выполнения действий пользователем. Помимо прямого использования этого компонента, mdui предоставляет четыре функции: [`mdui.dialog`](/ru/docs/2/functions/dialog), [`mdui.alert`](/ru/docs/2/functions/alert), [`mdui.confirm`](/ru/docs/2/functions/confirm), [`mdui.prompt`](/ru/docs/2/functions/prompt). Эти функции упрощают использование компонента Dialog. ## Использование {#usage} При необходимости импортируйте компонент: ```js import 'mdui/components/dialog.js'; ``` При необходимости импортируйте типы TypeScript: ```ts import type { Dialog } from 'mdui/components/dialog.js'; ``` Пример использования: ```html Dialog Закрыть Открыть диалог ``` ## Примеры {#examples} ### Закрытие по клику на фон {#example-close-on-overlay-click} Добавьте атрибут `close-on-overlay-click`, чтобы диалоговое окно закрывалось при клике на фон. ```html Dialog Открыть диалог ``` ### Закрытие по нажатию клавиши ESC {#example-close-on-esc} Добавьте атрибут `close-on-esc`, чтобы диалоговое окно закрывалось при нажатии клавиши ESC. ```html Dialog Открыть диалог ``` ### Полноэкранный режим {#example-fullscreen} Добавьте атрибут `fullscreen`, чтобы диалоговое окно отображалось полноэкранно. ```html Dialog Закрыть Открыть диалог ``` ### Иконка {#example-icon} Установите атрибут `icon`, чтобы добавить иконку Material Icons в верхнюю часть диалогового окна. ```html Dialog Открыть диалог ``` Также можно добавить элемент иконки в верхнюю часть через слот `icon`. ```html Dialog Открыть диалог ``` ### Заголовок и описание {#example-headline} Установите заголовок и описание диалогового окна через атрибуты `headline` и `description`. ```html Открыть диалог ``` Также можно установить элемент заголовка и описания через слоты `headline` и `description`. ```html Delete selected images? Images will be permanently removed from your account and all synced devices. Открыть диалог ``` ### Кнопки действий внизу {#example-action} Вы можете добавить кнопки действий внизу через слот `action`. ```html Отмена Удалить Открыть диалог ``` Добавьте атрибут `stacked-actions`, чтобы кнопки действий располагались вертикально. ```html Turn on speed boost No thanks Открыть диалог ``` ### Верхнее содержимое {#example-header} Вы можете задать верхнее содержимое диалогового окна через слот `header`. ```html Title Save
Открыть диалог ``` ## mdui-dialog API ### Свойства
Атрибут Свойство Reflect Тип По умолчанию Описание
icon icon true string

Имя иконки Material Icons вверху. Можно задать через slot="icon".
headline headline true string

Заголовок. Можно задать через slot="headline".
description description true string

Текст под заголовком. Можно задать через slot="description".
open open true boolean false

Определяет, открыто ли диалоговое окно.
fullscreen fullscreen true boolean false

Определяет, отображать ли диалоговое окно на весь экран.
close-on-esc closeOnEsc true boolean false

Определяет, нужно ли закрывать при нажатии клавиши ESC.
close-on-overlay-click closeOnOverlayClick true boolean false

Определяет, нужно ли закрывать при клике на затемнение.
stacked-actions stackedActions true boolean false

Определяет, располагать ли кнопки действий вертикально.
### События
Название Описание
open

Срабатывает в начале открытия диалогового окна. Можно отменить открытие, вызвав event.preventDefault().
opened

Срабатывает после завершения анимации открытия диалогового окна.
close

Срабатывает в начале закрытия диалогового окна. Можно отменить закрытие, вызвав event.preventDefault().
closed

Срабатывает после завершения анимации закрытия диалогового окна.
overlay-click

Срабатывает при клике на затемнение.
### Slots
Название Описание
header

Элемент вверху, по умолчанию содержит слоты icon и headline.
icon

Иконка вверху.
headline

Заголовок вверху.
description

Текст под заголовком.
(по умолчанию)

Основное содержимое диалогового окна.
action

Элементы в нижней панели действий.
### CSS Parts
Название Описание
overlay

Затемнение.
panel

Контейнер диалогового окна.
header

Часть заголовка диалогового окна, содержит icon и headline.
icon

Иконка вверху, находится в header.
headline

Заголовок вверху, находится в header.
body

Часть body диалогового окна.
description

Часть дополнительного текста, находится в body.
action

Кнопки действий.
### Пользовательские CSS-свойства
Название Описание
--shape-corner

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

Значение CSS z-index компонента.
# Компонент разделителя Разделитель — это тонкая линия, используемая для группировки контента в списках и контейнерах. ## Использование {#usage} При необходимости импортируйте компонент: ```js import 'mdui/components/divider.js'; ``` При необходимости импортируйте типы TypeScript: ```ts import type { Divider } from 'mdui/components/divider.js'; ``` Пример использования: ```html ``` ## Примеры {#examples} ### Вертикальный разделитель {#example-vertical} Добавьте атрибут `vertical`, чтобы разделитель отображался вертикально. ```html
``` ### Отступ слева {#example-inset} Добавьте атрибут `inset`, чтобы добавить отступ слева у разделителя. Это часто используется в списках для выравнивания разделителя с текстом слева. ```html Item 1 Item 2 ``` ### Отступы с обеих сторон {#example-middle} Добавьте атрибут `middle`, чтобы добавить отступы с обеих сторон разделителя. ```html Item 1 Item 2 ``` ## mdui-divider API ### Свойства
Атрибут Свойство Reflect Тип По умолчанию Описание
vertical vertical true boolean false

Определяет, является ли разделитель вертикальным.
inset inset true boolean false

Определяет, добавлять ли отступ слева.
middle middle true boolean false

Определяет, добавлять ли отступы слева и справа.
# Компонент Выпадающее меню Компонент выпадающего меню используется для отображения определенного содержимого во всплывающем элементе управления, часто в сочетании с компонентом меню. ## Использование {#usage} При необходимости импортируйте компонент: ```js import 'mdui/components/dropdown.js'; ``` При необходимости импортируйте типы TypeScript: ```ts import type { Dropdown } from 'mdui/components/dropdown.js'; ``` Пример использования: ```html open dropdown Item 1 Item 2 ``` ## Примеры {#examples} ### Отключенное состояние {#example-disabled} Добавьте атрибут `disabled`, чтобы отключить компонент выпадающего меню. ```html open dropdown Item 1 Item 2 ``` ### Положение открытия {#example-placement} Используйте атрибут `placement` для установки положения открытия выпадающего меню. ```html open dropdown Item 1 Item 2 ``` ### Способ вызова {#example-trigger} Используйте атрибут `trigger` для установки способа вызова выпадающего меню. ```html open dropdown Item 1 Item 2 ``` ### Открытие в позиции курсора {#example-open-on-pointer} Добавьте атрибут `open-on-pointer`, чтобы выпадающее меню открывалось в позиции курсора. Обычно используется вместе с `trigger="contextmenu"` для открытия меню правой кнопкой мыши. ```html Откройте меню правой кнопкой мыши в этой области Item 1 Item 2 ``` ### Сохранение меню открытым при клике {#example-stay-open-on-click} При использовании меню внутри выпадающего меню по умолчанию оно автоматически закрывается при клике на пункт меню. Добавьте атрибут `stay-open-on-click`, чтобы меню оставалось открытым при клике на пункт меню. ```html open dropdown Item 1 Item 2 ``` ### Задержка открытия/закрытия {#example-delay} При установке `trigger="hover"` можно задать задержку открытия и закрытия с помощью атрибутов `open-delay` и `close-delay`. ```html open dropdown Item 1 Item 2 ``` ## mdui-dropdown API ### Свойства
Атрибут Свойство Reflect Тип По умолчанию Описание
open open true boolean false

Определяет, открыто ли выпадающее меню.
disabled disabled true boolean false

Определяет, отключено ли выпадающее меню.
trigger trigger true 'click' | 'hover' | 'focus' | 'contextmenu' | 'manual' | string 'click'

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

  • click — открытие по клику
  • hover — открытие при наведении мыши
  • focus — открытие при фокусе
  • contextmenu — открытие по щелчку правой кнопкой мыши или долгому нажатию на сенсорных устройствах
  • manual — можно открывать и закрывать только программно, другие способы не указываются
placement placement true 'auto' | 'top-start' | 'top' | 'top-end' | 'bottom-start' | 'bottom' | 'bottom-end' | 'left-start' | 'left' | 'left-end' | 'right-start' | 'right' | 'right-end' 'auto'

Расположение содержимого выпадающего меню. Возможные значения:

  • auto — автоматическое определение положения
  • top-start — сверху, выравнивание по левому краю
  • top — сверху, по центру
  • top-end — сверху, выравнивание по правому краю
  • bottom-start — снизу, выравнивание по левому краю
  • bottom — снизу, по центру
  • bottom-end — снизу, выравнивание по правому краю
  • left-start — слева, выравнивание по верхнему краю
  • left — слева, по центру
  • left-end — слева, выравнивание по нижнему краю
  • right-start — справа, выравнивание по верхнему краю
  • right — справа, по центру
  • right-end — справа, выравнивание по нижнему краю
stay-open-on-click stayOpenOnClick true boolean false

Определяет, оставаться ли открытым после клика по <mdui-menu-item>.
open-delay openDelay true number 150

Задержка открытия выпадающего меню при наведении мыши, в миллисекундах.
close-delay closeDelay true number 150

Задержка закрытия выпадающего меню при наведении мыши, в миллисекундах.
open-on-pointer openOnPointer true boolean false

Определяет, открывать ли выпадающее меню в позиции указателя; часто используется для контекстного меню.
### События
Название Описание
open

Срабатывает в начале открытия выпадающего меню. Можно отменить открытие, вызвав event.preventDefault().
opened

Срабатывает после завершения анимации открытия выпадающего меню.
close

Срабатывает в начале закрытия выпадающего меню. Можно отменить закрытие, вызвав event.preventDefault().
closed

Срабатывает после завершения анимации закрытия выпадающего меню.
### Slots
Название Описание
(по умолчанию)

Содержимое выпадающего меню.
trigger

Элемент, открывающий выпадающее меню, например <mdui-button>.
### CSS Parts
Название Описание
trigger

Контейнер элемента, открывающего выпадающее меню (слот trigger).
panel

Контейнер содержимого выпадающего меню.
### Пользовательские CSS-свойства
Название Описание
--z-index

Значение CSS z-index компонента.
# Компонент Плавающая кнопка действия (FAB) Плавающая кнопка действия (FAB) используется для выделения основного действия на странице, размещая ключевое действие в легкодоступном месте. ## Использование {#usage} При необходимости импортируйте компонент: ```js import 'mdui/components/fab.js'; ``` При необходимости импортируйте типы TypeScript: ```ts import type { Fab } from 'mdui/components/fab.js'; ``` Пример использования: ```html ``` ## Примеры {#examples} ### Иконка {#example-icon} Используйте атрибут `icon` для указания названия иконки Material Icons. Также можно указать элемент иконки через слот `icon`. ```html ``` ### Расширенное состояние {#example-extended} Добавьте атрибут `extended`, чтобы перевести FAB в расширенное состояние; при этом текст из слота по умолчанию будет отображаться. ```html Compose ``` ### Вариант {#example-variant} Используйте атрибут `variant` для установки варианта FAB. ```html ``` ### Размер {#example-size} Используйте атрибут `size` для установки размера FAB. ```html ``` ### Ссылка {#example-link} Добавьте атрибут `href`, чтобы превратить FAB в ссылку. При этом также можно использовать связанные с ссылками атрибуты: `download`, `target`, `rel`. ```html ``` ### Отключенное состояние и состояние загрузки {#example-disabled} Добавьте атрибут `disabled`, чтобы отключить FAB; добавьте атрибут `loading`, чтобы добавить состояние загрузки. ```html ``` ## mdui-fab API ### Свойства
Атрибут Свойство Reflect Тип По умолчанию Описание
variant variant true 'primary' | 'surface' | 'secondary' | 'tertiary' 'primary'

Вариант FAB, различные варианты отличаются только цветом. Возможные значения:

  • primary — цвет фона Primary container
  • surface — цвет фона Surface container high
  • secondary — цвет фона Secondary container
  • tertiary — цвет фона Tertiary container
size size true 'normal' | 'small' | 'large' 'normal'

Размер FAB. Возможные значения:

  • normal — обычный размер
  • small — маленький
  • large — большой
icon icon true string

Имя иконки Material Icons. Можно задать через slot="icon".
extended extended true boolean false

Определяет, является ли кнопка расширенной (с текстом).
href href true string

Целевой URL ссылки.

Если задано это свойство, компонент будет отображаться как элемент <a> и можно использовать свойства, связанные со ссылками.
download download true string

Имя файла для скачивания при переходе по ссылке.

Примечание: Это свойство действует только при заданном свойстве href.
target target true '_blank' | '_parent' | '_self' | '_top'

Определяет, где будет открыта ссылка. Возможные значения:

  • _blank — открывает ссылку в новом окне
  • _parent — открывает ссылку в родительском фрейме
  • _self — открывает ссылку в текущем фрейме (по умолчанию)
  • _top — открывает ссылку во всём окне

Примечание: Это свойство действует только при заданном свойстве href.
rel rel true '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 true boolean false

Определяет, будет ли элемент автоматически получать фокус после загрузки страницы.
tabindex tabIndex false number

Порядок перехода к элементу при нажатии клавиши Tab.
disabled disabled true boolean false

Отключает элемент.
loading loading true boolean false

Переводит элемент в состояние загрузки.
name name true string ''

Имя кнопки, которое будет отправлено вместе с данными формы.

Примечание: Это свойство действует, только если не задано свойство href.
value value true string ''

Значение кнопки, которое будет отправлено вместе с данными формы.

Примечание: Это свойство действует, только если не задано свойство href.
type type true 'submit' | 'reset' | 'button' 'button'

Тип кнопки. По умолчанию button. Возможные значения:

  • submit — эта кнопка отправляет данные формы на сервер
  • reset — эта кнопка сбрасывает все компоненты к начальным значениям
  • button — эта кнопка не имеет поведения по умолчанию

Примечание: Это свойство действует, только если не задано свойство href.
form form true string

Связанный элемент <form>. В качестве значения укажите id элемента <form> на той же странице.

Если свойство не задано, элемент должен быть дочерним по отношению к <form>. С этим свойством элемент можно разместить в любом месте страницы, а не только внутри <form>.

Примечание: Это свойство действует, только если не задано свойство href.
formaction formAction true string

Задаёт URL-адрес для отправки формы.

Если это свойство задано, оно переопределяет атрибут action элемента <form>.

Примечание: Это свойство действует, только если не задано свойство href и type="submit".
formenctype formEnctype true '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 true 'post' | 'get'

Определяет HTTP-метод, который используется при отправке формы. Возможные значения:

  • post — данные формы отправляются на сервер в теле запроса
  • get — данные формы добавляются к URI формы после символа ?, и полученный URI отправляется на сервер. Используется, если форма не имеет побочных эффектов и содержит только ASCII-символы.

Если это свойство задано, оно переопределяет атрибут method элемента <form>.

Примечание: Это свойство действует, только если не задано свойство href и type="submit".
formnovalidate formNoValidate true boolean false

Если задано, проверка формы при отправке не выполняется.

Если задано, переопределяет атрибут novalidate элемента <form>.

Примечание: Это свойство действует, только если не задано свойство href и type="submit".
formtarget formTarget true '_self' | '_blank' | '_parent' | '_top'

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

  • _self — по умолчанию, открывается в текущем фрейме
  • _blank — открывается в новом окне
  • _parent — открывается в родительском фрейме
  • _top — открывается во всём окне

Если это свойство задано, оно переопределяет атрибут target элемента <form>.

Примечание: Это свойство действует, только если не задано свойство href и type="submit".
undefined validity false ValidityState

Объект, содержащий состояние валидации формы. См. ValidityState.
undefined validationMessage false 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

Иконка.
### CSS Parts
Название Описание
button

Внутренний элемент <button> или <a>.
label

Текст справа.
icon

Иконка слева.
loading

Элемент <mdui-circular-progress> в состоянии загрузки.
### Пользовательские CSS-свойства
Название Описание
--shape-corner-small

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

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

Размер скругления углов компонента при size="large". Можно указать конкретное значение в пикселях, но рекомендуется использовать дизайн-токены.
# Компонент иконки Иконка используется для представления распространенных действий. Она поддерживает иконки Material Icons, а также SVG-иконки. ## Использование {#usage} При необходимости импортируйте компонент: ```js import 'mdui/components/icon.js'; ``` При необходимости импортируйте типы TypeScript: ```ts import type { Icon } from 'mdui/components/icon.js'; ``` Пример использования: ```html ``` ### Использование иконок Material Icons {#usage-material-icons} Чтобы использовать иконки Material Icons с этим компонентом, вам необходимо отдельно импортировать CSS-файл Material Icons. Существует 5 вариантов Material Icons: Filled, Outlined, Rounded, Sharp, Two Tone. Импортируйте соответствующий CSS-файл в зависимости от используемого варианта иконки: ```html ``` При использовании компонента передайте название иконки в атрибут `name`, добавив суффикс варианта (для варианта Filled суффикс не требуется). Ниже приведены примеры использования иконки `delete` для всех 5 вариантов: ```html ``` Вы можете воспользоваться инструментом [поиска иконок Material Icons](/ru/docs/2/components/icon#search) внизу страницы, чтобы найти нужную иконку и нажать на нее для копирования кода в буфер обмена. Кроме того, mdui предоставляет отдельный пакет [`@mdui/icons`](/ru/docs/2/libraries/icons), в котором каждый компонент иконки представлен отдельным файлом, что позволяет импортировать только нужные иконки без загрузки всей библиотеки. ### Использование SVG-иконок {#usage-svg} Этот компонент также поддерживает использование SVG-иконок. Вы можете передать ссылку на SVG-иконку через атрибут `src`. Например: ```html ``` Также можно передать содержимое SVG в слот по умолчанию. Например: ```html ``` ## Примеры {#examples} ### Установка цвета {#example-color} Измените цвет иконки, установив CSS-свойство `color` для элемента `` или его родителя. ```html ``` ### Установка размера {#example-size} Измените размер иконки, установив CSS-свойство `font-size` для элемента `` или его родителя. ```html ``` ## mdui-icon API ### Свойства
Атрибут Свойство Reflect Тип По умолчанию Описание
name name true string

Имя иконки Material Icons.
src src true string

Путь к SVG-иконке.
### Slots
Название Описание
(по умолчанию)

Содержимое SVG-иконки.
# Компонент Layout Layout предоставляет гибкую систему компоновки для создания сложных макетов страниц. ## Использование {#usage} При необходимости импортируйте компоненты: ```js import 'mdui/components/layout.js'; import 'mdui/components/layout-item.js'; import 'mdui/components/layout-main.js'; ``` При необходимости импортируйте типы TypeScript: ```ts import type { Layout } from 'mdui/components/layout.js'; import type { LayoutItem } from 'mdui/components/layout-item.js'; import type { LayoutMain } from 'mdui/components/layout-main.js'; ``` **Введение:** Система компоновки строится по принципу "снаружи внутрь". Каждый компонент компоновки (компонент ``) занимает место в одном из четырех направлений (вверх, вниз, влево, вправо), а последующие компоненты компоновки продолжают занимать место в оставшемся пространстве. Следующие компоненты наследуются от `` и поэтому также могут использоваться как компоненты компоновки: - [``](/ru/docs/2/components/navigation-bar) - [``](/ru/docs/2/components/navigation-drawer) - [``](/ru/docs/2/components/navigation-rail) - [``](/ru/docs/2/components/bottom-app-bar) - [``](/ru/docs/2/components/top-app-bar) Последняя часть системы компоновки — компонент ``, который занимает оставшееся пространство. Внутри этого компонента вы размещаете содержимое страницы. ## Примеры {#examples} ### Порядок компонентов компоновки {#layout-default-order} По умолчанию компоненты компоновки занимают пространство в порядке их появления в коде. Вы можете понять эту концепцию из следующих двух примеров, в которых [``](/ru/docs/2/components/top-app-bar) и [``](/ru/docs/2/components/navigation-drawer) расположены в разном порядке.

Пожалуйста, посмотрите этот пример на большом экране.

```html Top App Bar Navigation drawer Main ``` ```html Navigation drawer Top App Bar Main ``` Можно заметить, что если разместить [``](/ru/docs/2/components/top-app-bar) перед [``](/ru/docs/2/components/navigation-drawer), то [``](/ru/docs/2/components/top-app-bar) сначала займет всю ширину страницы, а [``](/ru/docs/2/components/navigation-drawer) сможет занять только высоту в оставшемся пространстве. Если поменять их порядок, то [``](/ru/docs/2/components/navigation-drawer) сначала займет всю высоту страницы, а [``](/ru/docs/2/components/top-app-bar) — только ширину в оставшемся пространстве. ### Расположение компонентов компоновки {#example-placement} Для компонента `` вы можете использовать атрибут `placement`, чтобы указать его расположение (вверх, вниз, влево, вправо). Для компонентов [``](/ru/docs/2/components/navigation-drawer) и [``](/ru/docs/2/components/navigation-rail) вы также можете использовать атрибут `placement`, чтобы указать расположение (влево или вправо). В следующем примере мы разместили два компонента `` по бокам приложения. ```html Top App Bar Layout Item Layout Item Main ``` ### Пользовательский порядок компонентов компоновки {#example-order} В большинстве случаев достаточно расположить компоненты компоновки в нужном порядке. Вы также можете использовать атрибут `order` для указания порядка компоновки. Компоненты будут расположены в порядке возрастания значения `order`; при одинаковом `order` сохраняется порядок в коде. Значение `order` по умолчанию для всех компонентов компоновки равно `0`. ```html Layout Item Top App Bar
order="-1" Main ``` ## mdui-layout-item API ### Свойства
Атрибут Свойство Reflect Тип По умолчанию Описание
placement placement true 'top' | 'bottom' | 'left' | 'right' 'top'

Положение компонента. Возможные значения:

  • top — сверху
  • bottom — снизу
  • left — слева
  • right — справа
order order true number

Порядок этого компонента в <mdui-layout> (по возрастанию). По умолчанию 0.
### Slots
Название Описание
(по умолчанию)

Любое содержимое.
## mdui-layout-main API ### Slots
Название Описание
(по умолчанию)

Любое содержимое.
## mdui-layout API ### Свойства
Атрибут Свойство Reflect Тип По умолчанию Описание
full-height fullHeight true boolean false

Устанавливает высоту Layout равной 100%.
### Slots
Название Описание
(по умолчанию)

Может содержать элементы <mdui-top-app-bar>, <mdui-bottom-app-bar>, <mdui-navigation-bar>, <mdui-navigation-drawer>, <mdui-navigation-rail>, <mdui-layout-item>, <mdui-layout-main>.
# Компонент Линейный индикатор прогресса Линейный индикатор прогресса — это горизонтальный индикатор, используемый для отображения хода выполнения задачи пользователю, например загрузки данных или отправки формы. ## Использование {#usage} При необходимости импортируйте компонент: ```js import 'mdui/components/linear-progress.js'; ``` При необходимости импортируйте типы TypeScript: ```ts import type { LinearProgress } from 'mdui/components/linear-progress.js'; ``` Пример использования: ```html ``` ## Примеры {#examples} ### Установка прогресса {#example-value} По умолчанию линейный индикатор отображает состояние выполнения задачи с неопределённой длительностью. Вы можете задать текущий прогресс через атрибут `value`. Максимальное значение прогресса по умолчанию — `1`. ```html ``` Максимальное значение прогресса можно задать через атрибут `max`. ```html ``` ## mdui-linear-progress API ### Свойства
Атрибут Свойство Reflect Тип По умолчанию Описание
max max true number 1

Максимальное значение индикатора прогресса. По умолчанию 1.
value value false number

Текущее значение индикатора прогресса. Если не указано, индикатор находится в неопределённом состоянии.
### CSS Parts
Название Описание
indicator

Индикатор выполнения.
### Пользовательские CSS-свойства
Название Описание
--shape-corner

Размер скругления углов компонента. Можно указать конкретное значение в пикселях, но рекомендуется использовать дизайн-токены.
# Компонент списка Список — это вертикальный набор элементов для отображения текста или изображений, позволяющий пользователю быстро просматривать содержимое и получать доступ к связанной информации. ## Использование {#usage} При необходимости импортируйте компоненты: ```js import 'mdui/components/list.js'; import 'mdui/components/list-item.js'; import 'mdui/components/list-subheader.js'; ``` При необходимости импортируйте типы TypeScript: ```ts import type { List } from 'mdui/components/list.js'; import type { ListItem } from 'mdui/components/list-item.js'; import type { ListSubheader } from 'mdui/components/list-subheader.js'; ``` Пример использования: ```html Subheader Item 1 Item 2 ``` ## Примеры {#examples} ### Текстовое содержимое {#example-text} Установите атрибут `headline` у компонента ``, чтобы задать основной текст элемента списка; установите атрибут `description`, чтобы задать дополнительный текст. ```html ``` Также можно задать основной текст через слот по умолчанию, а дополнительный текст — через слот `description`. ```html Headline Headline Supporting text ``` По умолчанию основной и дополнительный текст отображаются полностью, независимо от их длины. Вы можете ограничить количество строк основного и дополнительного текста с помощью атрибутов `headline-line` и `description-line` (максимум 3 строки). ```html Headline Headline Headline Headline Headline Headline Headline Headline Headline Headline Headline Headline Headline Headline Supporting text Supporting text Supporting text Supporting text Supporting text Supporting text Supporting text Supporting text Supporting text Supporting text Supporting text Supporting text Supporting text Supporting text Supporting text Supporting text Supporting text Supporting text Supporting text ``` ### Боковое содержимое {#example-side} Установите атрибуты `icon` и `end-icon` у компонента ``, чтобы добавить иконки Material Icons слева и справа от элемента списка. ```html Headline ``` Также можно добавлять элементы слева и справа через слоты `icon` и `end-icon`. ```html Headline ``` ### Ссылка {#example-link} Установите атрибут `href` у компонента ``, чтобы превратить элемент списка в ссылку. При этом также можно использовать связанные с ссылками атрибуты: `download`, `target`, `rel`. ```html Headline ``` ### Отключенное состояние {#example-disabled} Добавьте атрибут `disabled` у компонента ``, чтобы отключить элемент списка. При этом такие компоненты внутри элемента, как чекбоксы, радиокнопки, переключатели, также будут отключены. ```html Headline Headline ``` ### Активное состояние {#example-active} Добавьте атрибут `active` у компонента ``, чтобы активировать элемент списка. ```html Headline Headline ``` ### Некликабельное состояние {#example-nonclickable} Добавьте атрибут `nonclickable` у компонента ``, чтобы убрать эффекты при наведении курсора и пульсации при клике. ```html Headline Headline ``` ### Скругленная форма {#example-rounded} Добавьте атрибут `rounded` у компонента ``, чтобы элемент списка имел скругленные углы. ```html Headline Headline ``` ### Вертикальное выравнивание {#example-alignment} Используйте атрибут `alignment` у компонента ``, чтобы настроить выравнивание боковых элементов относительно элемента списка. Возможные значения: - `start`: выравнивание по верхнему краю - `center`: выравнивание по центру - `end`: выравнивание по нижнему краю ```html Headline Headline Headline ``` ### Пользовательское содержимое {#example-custom} Используйте слот `custom` в компоненте ``, чтобы полностью настроить содержимое элемента списка. ```html
test
 ``` ## mdui-list-item API ### Свойства
Атрибут Свойство Reflect Тип По умолчанию Описание
headline headline true string

Основной текст. Можно задать через слот по умолчанию.
headline-line headlineLine true 1 | 2 | 3

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

  • 1 — одна строка, при превышении обрезается
  • 2 — две строки, при превышении обрезается
  • 3 — три строки, при превышении обрезается
description description true string

Дополнительный текст. Можно задать через slot="description".
description-line descriptionLine true 1 | 2 | 3

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

  • 1 — одна строка, при превышении обрезается
  • 2 — две строки, при превышении обрезается
  • 3 — три строки, при превышении обрезается
icon icon true string

Имя иконки Material Icons слева. Можно задать через slot="icon".
end-icon endIcon true string

Имя иконки Material Icons справа. Можно задать через slot="end-icon".
disabled disabled true boolean false

Определяет, отключён ли этот элемент списка. При отключении элемент становится серым, а вложенные в него <mdui-checkbox>, <mdui-radio>, <mdui-switch> также отключаются.
active active true boolean false

Определяет, активен ли этот элемент списка.
nonclickable nonclickable true boolean false

Делает элемент списка некликабельным. При этом вложенные в него <mdui-checkbox>, <mdui-radio>, <mdui-switch> остаются интерактивными.
rounded rounded true boolean false

Определяет, использовать ли скруглённую форму элемента списка.
alignment alignment true 'start' | 'center' | 'end' 'center'

Вертикальное выравнивание элемента списка. Возможные значения:

  • start — по верхнему краю
  • center — по центру
  • end — по нижнему краю
href href true string

Целевой URL ссылки.

Если задано это свойство, компонент будет отображаться как элемент <a> и можно использовать свойства, связанные со ссылками.
download download true string

Имя файла для скачивания при переходе по ссылке.

Примечание: Это свойство действует только при заданном свойстве href.
target target true '_blank' | '_parent' | '_self' | '_top'

Определяет, где будет открыта ссылка. Возможные значения:

  • _blank — открывает ссылку в новом окне
  • _parent — открывает ссылку в родительском фрейме
  • _self — открывает ссылку в текущем фрейме (по умолчанию)
  • _top — открывает ссылку во всём окне

Примечание: Это свойство действует только при заданном свойстве href.
rel rel true '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 true boolean false

Определяет, будет ли элемент автоматически получать фокус после загрузки страницы.
tabindex tabIndex false number

Порядок перехода к элементу при нажатии клавиши Tab.
### Методы
Название Описание
click(): void

Имитирует щелчок мыши по элементу.
focus(options?: FocusOptions): void

Устанавливает фокус на текущий элемент.

В качестве аргумента можно передать объект со свойством:

  • preventScroll: по умолчанию после получения фокуса страница прокручивается, чтобы элемент появился в области видимости. Чтобы этого избежать, задайте для этого свойства значение true.
blur(): void

Убирает фокус с текущего элемента.
### События
Название Описание
focus

Срабатывает при получении фокуса.
blur

Срабатывает при потере фокуса.
### Slots
Название Описание
(по умолчанию)

Основной текст.
description

Дополнительный текст.
icon

Элемент слева от элемента списка.
end-icon

Элемент справа от элемента списка.
custom

Любое пользовательское содержимое.
### CSS Parts
Название Описание
container

Контейнер элемента списка.
icon

Иконка слева.
end-icon

Иконка справа.
body

Средняя часть.
headline

Основной заголовок.
description

Дополнительный заголовок.
### Пользовательские CSS-свойства
Название Описание
--shape-corner

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

Размер скругления углов элемента списка при указании свойства rounded. Можно указать конкретное значение в пикселях, но рекомендуется использовать дизайн-токены.
## mdui-list-subheader API ### Slots
Название Описание
(по умолчанию)

Текст подзаголовка списка.
## mdui-list API ### Slots
Название Описание
(по умолчанию)

Элементы <mdui-list-item>.
# Компонент меню Компонент меню предоставляет набор вертикально расположенных опций. Меню отображается, когда пользователь взаимодействует с кнопкой или другим элементом управления. Если вам нужно реализовать выпадающее меню, вы можете использовать компонент [``](/ru/docs/2/components/dropdown). ## Использование {#usage} При необходимости импортируйте компоненты: ```js import 'mdui/components/menu.js'; import 'mdui/components/menu-item.js'; ``` При необходимости импортируйте типы TypeScript: ```ts import type { Menu } from 'mdui/components/menu.js'; import type { MenuItem } from 'mdui/components/menu-item.js'; ``` Пример использования: ```html Item 1 Item 2 ``` ## Примеры {#examples} ### Выпадающее меню {#example-dropdown} Используйте компонент [``](/ru/docs/2/components/dropdown) для реализации выпадающего меню. ```html open dropdown Item 1 Item 2 ``` ### Компактная компоновка {#example-dense} Добавьте атрибут `dense` к компоненту ``, чтобы включить компактную компоновку. ```html Item 1 Item 2 Item 3 ``` ### Отключенные пункты меню {#example-disabled} Добавьте атрибут `disabled` к компоненту ``, чтобы отключить пункт меню. ```html Item 1 Item 2 Item 3 ``` ### Поддержка одиночного выбора {#example-selects-single} Установите атрибут `selects` компонента `` в значение `single`, чтобы включить режим одиночного выбора. В этом случае значением `value` компонента `` будет значение `value` выбранного ``. ```html Item 1 Item 2 ``` ### Поддержка множественного выбора {#example-selects-multiple} Установите атрибут `selects` компонента `` в значение `multiple`, чтобы включить режим множественного выбора. В этом случае значением `value` компонента `` будет массив значений `value` выбранных ``. Обратите внимание: в режиме множественного выбора `value` компонента `` является массивом, который можно читать и устанавливать только через JavaScript-свойство. ```html Item 1 Item 2 Item 3 ``` ### Иконка {#example-icon} С помощью атрибутов `icon` и `end-icon` у компонента `` можно добавить иконки Material Icons слева и справа от пункта меню. С помощью атрибута `end-text` можно добавить текст справа. Также можно использовать слоты `icon`, `end-icon` и `end-text` для добавления элементов. Если нужно оставить место для иконки слева для выравнивания с другими пунктами меню, установите атрибут `icon` в пустую строку. ```html Item 1 Item 2 Ctrl+X Item 3 ``` В режимах одиночного или множественного выбора можно задать иконку выбранного состояния через атрибут `selected-icon` или слот `selected-icon`. ```html Item 1 Item 2 ``` ### Ссылка {#example-link} Установите атрибут `href` у компонента ``, чтобы превратить пункт меню в ссылку. При этом также можно использовать связанные с ссылками атрибуты: `download`, `target`, `rel`. ```html Item 1 Item 2 ``` ### Подменю {#example-submenu} В компоненте `` можно использовать слот `submenu` для указания элементов подменю. ```html Line spacing Single 1.5 Double Custom: 1.2 Paragraph style ``` В компоненте `` можно задать способ вызова подменю через атрибут `submenu-trigger`. ```html Line spacing Single 1.5 Double Custom: 1.2 Paragraph style ``` Когда атрибут `submenu-trigger` установлен в значение `hover`, можно задать задержку открытия и закрытия подменю через атрибуты `submenu-open-delay` и `submenu-close-delay` у компонента ``. ```html Line spacing Single 1.5 Double Custom: 1.2 Paragraph style ``` ### Пользовательское содержимое {#example-custom} В компоненте `` вы можете использовать слот `custom` для полной настройки содержимого пункта меню. ```html
ABS
Возвращает абсолютное значение числа
ACOS
Возвращает арккосинус числа (в радианах)
ACOSH
Возвращает гиперболический арккосинус числа
 ``` ## mdui-menu-item API ### Свойства
Атрибут Свойство Reflect Тип По умолчанию Описание
value value true string

Значение пункта меню.
disabled disabled true boolean false

Определяет, отключён ли пункт меню.
icon icon true string

Имя иконки Material Icons слева. Можно задать через slot="icon".

Если слева не нужна иконка, но нужно зарезервировать место, можно передать пустую строку в качестве заполнителя.
end-icon endIcon true string

Имя иконки Material Icons справа. Можно задать через slot="end-icon".
end-text endText true string

Текст справа. Можно задать через slot="end-text".
selected-icon selectedIcon true string

Имя иконки Material Icons для выбранного состояния. Можно задать через slot="selected-icon".
submenu-open submenuOpen true boolean false

Определяет, открыто ли подменю.
href href true string

Целевой URL ссылки.

Если задано это свойство, компонент будет отображаться как элемент <a> и можно использовать свойства, связанные со ссылками.
download download true string

Имя файла для скачивания при переходе по ссылке.

Примечание: Это свойство действует только при заданном свойстве href.
target target true '_blank' | '_parent' | '_self' | '_top'

Определяет, где будет открыта ссылка. Возможные значения:

  • _blank — открывает ссылку в новом окне
  • _parent — открывает ссылку в родительском фрейме
  • _self — открывает ссылку в текущем фрейме (по умолчанию)
  • _top — открывает ссылку во всём окне

Примечание: Это свойство действует только при заданном свойстве href.
rel rel true '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 true boolean false

Определяет, будет ли элемент автоматически получать фокус после загрузки страницы.
tabindex tabIndex false number

Порядок перехода к элементу при нажатии клавиши Tab.
### Методы
Название Описание
click(): void

Имитирует щелчок мыши по элементу.
focus(options?: FocusOptions): void

Устанавливает фокус на текущий элемент.

В качестве аргумента можно передать объект со свойством:

  • preventScroll: по умолчанию после получения фокуса страница прокручивается, чтобы элемент появился в области видимости. Чтобы этого избежать, задайте для этого свойства значение true.
blur(): void

Убирает фокус с текущего элемента.
### События
Название Описание
focus

Срабатывает при получении фокуса.
blur

Срабатывает при потере фокуса.
submenu-open

Срабатывает в начале открытия подменю. Можно отменить открытие, вызвав event.preventDefault().
submenu-opened

Срабатывает после завершения анимации открытия подменю.
submenu-close

Срабатывает в начале закрытия подменю. Можно отменить закрытие, вызвав event.preventDefault().
submenu-closed

Срабатывает после завершения анимации закрытия подменю.
### Slots
Название Описание
(по умолчанию)

Текст пункта меню.
icon

Иконка слева от пункта меню.
end-icon

Иконка справа от пункта меню.
end-text

Текст справа от пункта меню.
selected-icon

Иконка выбранного состояния.
submenu

Подменю.
custom

Любое пользовательское содержимое.
### CSS Parts
Название Описание
container

Контейнер пункта меню.
icon

Иконка слева.
label

Текстовое содержимое.
end-icon

Иконка справа.
end-text

Текст справа.
selected-icon

Иконка выбранного состояния.
submenu

Элемент подменю.
## mdui-menu API ### Свойства
Атрибут Свойство Reflect Тип По умолчанию Описание
selects selects true 'single' | 'multiple'

Режим выбора пунктов меню. По умолчанию выбор отключён. Возможные значения:

  • single — одиночный выбор
  • multiple — множественный выбор
value value false string | string[]

Значение текущего выбранного <mdui-menu-item>.

Примечание: HTML-атрибут этого свойства всегда является строкой; задать начальное значение через HTML-атрибут можно только при selects="single". JavaScript-свойство этого свойства является строкой при selects="single" и массивом строк при selects="multiple". Поэтому при selects="multiple" изменить это значение можно только через JavaScript-свойство.
dense dense true boolean false

Определяет, использовать ли компактный режим для пунктов меню.
submenu-trigger submenuTrigger true 'click' | 'hover' | 'focus' | 'manual' | string 'click hover'

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

  • click — открытие по клику на пункт меню
  • hover — открытие при наведении мыши на пункт меню
  • focus — открытие при фокусе на пункте меню
  • manual — можно открывать и закрывать только программно, другие способы не указываются
submenu-open-delay submenuOpenDelay true number 200

Задержка открытия подменю при наведении мыши, в миллисекундах.
submenu-close-delay submenuCloseDelay true number 200

Задержка закрытия подменю при наведении мыши, в миллисекундах.
### Методы
Название Описание
focus(options?: FocusOptions): void

Устанавливает фокус на текущий элемент.
blur(): void

Убирает фокус с текущего элемента.
### События
Название Описание
change

Срабатывает при изменении выбора пунктов меню.
### Slots
Название Описание
(по умолчанию)

Элементы подменю (<mdui-menu-item>), разделители (<mdui-divider>) и т.д.
### Пользовательские CSS-свойства
Название Описание
--shape-corner

Размер скругления углов компонента. Можно указать конкретное значение в пикселях, но рекомендуется использовать дизайн-токены.
# Компонент Панель навигации Панель навигации используется на мобильных устройствах для удобного переключения между нескольсима основными страницами. ## Использование {#usage} При необходимости импортируйте компоненты: ```js import 'mdui/components/navigation-bar.js'; import 'mdui/components/navigation-bar-item.js'; ``` При необходимости импортируйте типы TypeScript: ```ts import type { NavigationBar } from 'mdui/components/navigation-bar.js'; import type { NavigationBarItem } from 'mdui/components/navigation-bar-item.js'; ``` Пример использования: (Пример с `style="position: relative"` добавлен только для демонстрации, при реальном использовании удалите этот стиль.) ```html Item 1 Item 2 Item 3 ``` **Примечания:** Этот компонент по умолчанию использует позиционирование `position: fixed` и автоматически добавляет стиль `padding-bottom` к `body`, чтобы содержимое страницы не перекрывалось компонентом. Однако в следующих двух случаях по умолчанию используется позиционирование `position: absolute`: 1. Когда указан атрибут `scroll-target`. В этом случае стиль `padding-bottom` добавляется к элементу `scroll-target`. 2. Когда компонент находится внутри [``](/ru/docs/2/components/layout). В этом случае стиль `padding-bottom` не добавляется. ## Примеры {#examples} ### Отображение текстовых меток {#example-label-visibility} Текстовые метки на панели навигации по умолчанию отображаются всегда, если количество элементов навигации не превышает 3; если элементов больше 3, текст отображается только для выбранного элемента. ```html Item 1 Item 2 Item 3
Item 1 Item 2 Item 3 Item 4 ``` Вы можете настроить отображение текстовых меток с помощью атрибута `label-visibility` у компонента ``. Возможные значения: - `selected`: текст отображается только для выбранного элемента - `labeled`: текст отображается всегда - `unlabeled`: текст не отображается никогда ```html Item 1 Item 2 Item 3 selected labeled unlabeled ``` ### В указанном контейнере {#example-scroll-target} По умолчанию панель навигации отображается внизу страницы относительно текущего окна. Если вы хотите разместить панель навигации внутри указанного контейнера, укажите атрибут `scroll-target` у компонента ``. Значением атрибута должен быть CSS-селектор или DOM-элемент контейнера с прокручиваемым содержимым. В этом случае панель навигации будет отображаться относительно родительского элемента (вам нужно самостоятельно добавить родительскому элементу стили `position: relative; overflow: hidden`). ```html
Item 1 Item 2 Item 3
Содержимое страницы
``` ### Скрытие при прокрутке {#example-scroll-behavior} Установите атрибут `scroll-behavior` у компонента `` в значение `hide`, чтобы панель навигации скрывалась при прокрутке страницы вниз и показывалась при прокрутке вверх. Используйте атрибут `scroll-threshold`, чтобы задать количество пикселей прокрутки, после которого начнется скрытие панели. ```html
Item 1 Item 2 Item 3
Содержимое страницы
``` ### Иконка {#example-icon} У компонента `` атрибут `icon` задает иконку для неактивного состояния, а атрибут `active-icon` — для активного состояния. Также можно использовать слоты `icon` и `active-icon` для указания элементов иконок. ```html Item 1 Item 2 ``` ### Ссылка {#example-link} Установите атрибут `href` у компонента ``, чтобы превратить элемент навигации в ссылку. При этом также можно использовать связанные с ссылками атрибуты: `download`, `target`, `rel`. ```html Item 1 Item 2 ``` ### Бейдж {#example-badge} В компоненте `` можно добавить бейдж через слот `badge`. ```html Item 1 99+ Item 2 ``` ## mdui-navigation-bar-item API ### Свойства
Атрибут Свойство Reflect Тип По умолчанию Описание
icon icon true string

Имя иконки Material Icons в неактивном состоянии. Можно задать через slot="icon".
active-icon activeIcon true string

Имя иконки Material Icons в активном состоянии. Можно задать через slot="active-icon".
value value true string

Значение элемента панели навигации.
href href true string

Целевой URL ссылки.

Если задано это свойство, компонент будет отображаться как элемент <a> и можно использовать свойства, связанные со ссылками.
download download true string

Имя файла для скачивания при переходе по ссылке.

Примечание: Это свойство действует только при заданном свойстве href.
target target true '_blank' | '_parent' | '_self' | '_top'

Определяет, где будет открыта ссылка. Возможные значения:

  • _blank — открывает ссылку в новом окне
  • _parent — открывает ссылку в родительском фрейме
  • _self — открывает ссылку в текущем фрейме (по умолчанию)
  • _top — открывает ссылку во всём окне

Примечание: Это свойство действует только при заданном свойстве href.
rel rel true '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 true boolean false

Определяет, будет ли элемент автоматически получать фокус после загрузки страницы.
tabindex tabIndex false number

Порядок перехода к элементу при нажатии клавиши Tab.
### Методы
Название Описание
click(): void

Имитирует щелчок мыши по элементу.
focus(options?: FocusOptions): void

Устанавливает фокус на текущий элемент.

В качестве аргумента можно передать объект со свойством:

  • preventScroll: по умолчанию после получения фокуса страница прокручивается, чтобы элемент появился в области видимости. Чтобы этого избежать, задайте для этого свойства значение true.
blur(): void

Убирает фокус с текущего элемента.
### События
Название Описание
focus

Срабатывает при получении фокуса.
blur

Срабатывает при потере фокуса.
### Slots
Название Описание
(по умолчанию)

Текст элемента панели навигации.
icon

Иконка.
active-icon

Элемент иконки в активном состоянии.
badge

Бейдж.
### CSS Parts
Название Описание
container

Контейнер элемента панели навигации.
indicator

Индикатор.
badge

Бейдж.
icon

Иконка.
active-icon

Иконка в активном состоянии.
label

Текст элемента панели навигации.
### Пользовательские CSS-свойства
Название Описание
--shape-corner-indicator

Размер скругления углов индикатора. Можно указать конкретное значение в пикселях, но рекомендуется использовать дизайн-токены.
## mdui-navigation-bar API ### Свойства
Атрибут Свойство Reflect Тип По умолчанию Описание
hide hide true boolean false

Определяет, скрыта ли панель.
label-visibility labelVisibility true 'auto' | 'selected' | 'labeled' | 'unlabeled' 'auto'

Видимость текста. Возможные значения:

  • auto — при количестве пунктов ≤3 текст отображается всегда; при >3 текст отображается только для выбранного пункта
  • selected — текст отображается только для выбранного пункта
  • labeled — текст отображается всегда
  • unlabeled — текст никогда не отображается
value value true string

Значение текущего выбранного <mdui-navigation-bar-item>.
scroll-behavior scrollBehavior true 'hide' | 'shrink' | 'elevate'

Поведение при прокрутке. Возможные значения:

  • hide — скрывать при прокрутке.
scroll-target scrollTarget false string | HTMLElement | JQ<HTMLElement>

Элемент, прокрутку которого нужно отслеживать. В качестве значения можно указать CSS-селектор, DOM-элемент или JQ-объект. По умолчанию отслеживается событие scroll объекта window.
scroll-threshold scrollThreshold true number

Пороговое значение прокрутки в пикселях, при котором срабатывает поведение прокрутки.
order order true number

Порядок этого компонента в <mdui-layout> (по возрастанию). По умолчанию 0.
### События
Название Описание
change

Срабатывает при изменении значения.
show

Срабатывает в начале появления. Можно отменить появление, вызвав event.preventDefault().
shown

Срабатывает после завершения анимации появления.
hide

Срабатывает в начале скрытия. Можно отменить скрытие, вызвав event.preventDefault().
hidden

Срабатывает после завершения анимации скрытия.
### Slots
Название Описание
(по умолчанию)

Компоненты <mdui-navigation-bar-item>.
### Пользовательские CSS-свойства
Название Описание
--shape-corner

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

Значение CSS z-index компонента.
# Компонент Выдвижная панель навигации Выдвижная панель навигации используется для размещения навигации сбоку страницы, позволяя пользователю быстро переходить к разным страницам или разделам. Обычно внутри выдвижной панели навигации используется компонент [``](/ru/docs/2/components/list) для добавления пунктов навигации. ## Использование {#usage} При необходимости импортируйте компонент: ```js import 'mdui/components/navigation-drawer.js'; ``` При необходимости импортируйте типы TypeScript: ```ts import type { NavigationDrawer } from 'mdui/components/navigation-drawer.js'; ``` Пример использования: ```html Закрыть выдвижную панель Открыть выдвижную панель ``` **Примечания:** Этот компонент по умолчанию использует позиционирование `position: fixed`. Когда атрибут `modal` имеет значение `false` и ширина окна больше или равна [`--mdui-breakpoint-md`](/ru/docs/2/styles/design-tokens#breakpoint), к `body` автоматически добавляется стиль `padding-left` или `padding-right`, чтобы содержимое страницы не перекрывалось компонентом. Однако в следующих двух случаях по умолчанию используется позиционирование `position: absolute`: 1. Когда атрибут `contained` имеет значение `true`. 2. Когда компонент находится внутри [``](/ru/docs/2/components/layout). В этом случае стили `padding-left` или `padding-right` не добавляются. ## Примеры {#examples} ### В указанном контейнере {#example-contained} По умолчанию выдвижная панель навигации отображается относительно текущего окна, слева или справа от страницы. Если вы хотите разместить выдвижную панель внутри указанного контейнера, добавьте атрибут `contained`. В этом случае панель будет отображаться относительно родительского элемента (вам нужно самостоятельно добавить родительскому элементу стили `position: relative; overflow: hidden;`). ```html
Закрыть выдвижную панель
Открыть выдвижную панель
``` ### Модальный режим {#example-modal} Добавьте атрибут `modal`, чтобы при открытии выдвижной панели навигации отображался полупрозрачный фон. Обратите внимание, что при ширине окна или родительского элемента меньше [`--mdui-breakpoint-md`](/ru/docs/2/styles/design-tokens#breakpoint) этот параметр игнорируется, и фон отображается всегда. Добавьте атрибут `close-on-esc`, чтобы панель закрывалась при нажатии клавиши ESC. Добавьте атрибут `close-on-overlay-click`, чтобы панель закрывалась при клике на фон. ```html
Закрыть выдвижную панель
Открыть выдвижную панель
``` ### Расположение справа {#example-placement} Установите атрибут `placement` в значение `right`, чтобы выдвижная панель навигации отображалась справа. ```html
Закрыть выдвижную панель
Открыть выдвижную панель
``` ## mdui-navigation-drawer API ### Свойства
Атрибут Свойство Reflect Тип По умолчанию Описание
open open true boolean false

Определяет, открыта ли выдвижная панель.
modal modal true boolean false

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

На устройствах с узким экраном (ширина меньше --mdui-breakpoint-md) затемнение отображается всегда, независимо от этого параметра.
close-on-esc closeOnEsc true boolean false

Определяет, нужно ли закрывать выдвижную панель по нажатию ESC, если отображается затемнение.
close-on-overlay-click closeOnOverlayClick true boolean false

Определяет, нужно ли закрывать выдвижную панель при клике на затемнение.
placement placement true 'left' | 'right' 'left'

Положение выдвижной панели. Возможные значения:

  • left — слева
  • right — справа
contained contained true boolean false

По умолчанию выдвижная панель позиционируется относительно элемента body. При задании этого свойства в true панель будет позиционироваться относительно своего родительского элемента.

Примечание: При задании этого свойства необходимо вручную задать родительскому элементу стили position: relative; overflow: hidden;.
order order true number

Порядок этого компонента в <mdui-layout> (по возрастанию). По умолчанию 0.
### События
Название Описание
open

Возникает перед открытием выдвижной панели. Можно отменить открытие, вызвав event.preventDefault().
opened

Срабатывает после завершения анимации открытия выдвижной панели.
close

Возникает перед закрытием выдвижной панели. Можно отменить закрытие, вызвав event.preventDefault().
closed

Срабатывает после завершения анимации закрытия выдвижной панели.
overlay-click

Срабатывает при клике на затемнение.
### Slots
Название Описание
(по умолчанию)

Содержимое выдвижной панели.
### CSS Parts
Название Описание
overlay

Затемнение.
panel

Контейнер выдвижной панели.
### Пользовательские CSS-свойства
Название Описание
--shape-corner

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

Значение CSS z-index компонента.
# Компонент Боковая панель навигации Боковая панель навигации предоставляет доступ к различным основным разделам страницы на планшетах и настольных компьютерах. ## Использование {#usage} При необходимости импортируйте компоненты: ```js import 'mdui/components/navigation-rail.js'; import 'mdui/components/navigation-rail-item.js'; ``` При необходимости импортируйте типы TypeScript: ```ts import type { NavigationRail } from 'mdui/components/navigation-rail.js'; import type { NavigationRailItem } from 'mdui/components/navigation-rail-item.js'; ``` Пример использования: (Пример с `style="position: relative"` добавлен только для демонстрации, при реальном использовании удалите этот стиль.) ```html Recent Images Library ``` **Примечания:** Этот компонент по умолчанию использует позиционирование `position: fixed` и автоматически добавляет стиль `padding-left` или `padding-right` к `body`, чтобы содержимое страницы не перекрывалось компонентом. Однако в следующих двух случаях по умолчанию используется позиционирование `position: absolute`: 1. Когда атрибут `contained` компонента `` имеет значение `true`. В этом случае стили `padding-left` или `padding-right` добавляются к родительскому элементу. 2. Когда компонент находится внутри [``](/ru/docs/2/components/layout). В этом случае стили `padding-left` или `padding-right` не добавляются. ## Примеры {#examples} ### В указанном контейнере {#example-contained} По умолчанию боковая панель навигации отображается относительно текущего окна, слева или справа от страницы. Если вы хотите разместить панель внутри указанного контейнера, добавьте атрибут `contained` к компоненту ``. В этом случае панель будет отображаться относительно родительского элемента (вам нужно самостоятельно добавить родительскому элементу стиль `position: relative`). ```html
Recent Images Library
Содержимое страницы
``` ### Расположение справа {#example-placement} Установите атрибут `placement` у компонента `` в значение `right`, чтобы панель отображалась справа. ```html
Recent Images Library
Содержимое страницы
``` ### Отображение разделителя {#example-divider} Добавьте атрибут `divider` к компоненту ``, чтобы добавить разделитель для отделения панели от содержимого страницы. ```html
Recent Images Library
Содержимое страницы
``` ### Добавление элементов в верхней/нижней части {#example-top-bottom} В компоненте `` вы можете добавлять элементы в верхней и нижней части через слоты `top` и `bottom`. ```html
Recent Images Library
Содержимое страницы
``` ### Вертикальное выравнивание элементов навигации {#example-alignment} Используйте атрибут `alignment` у компонента ``, чтобы изменить вертикальное выравнивание элементов навигации. ```html
Recent Images Library
start center end
``` ### Иконка {#example-icon} У компонента `` можно использовать атрибут `icon` для неактивного состояния и атрибут `active-icon` для активного состояния. Также можно использовать слоты `icon` и `active-icon` для указания элементов иконок. ```html
Recent Images Library
Содержимое страницы
``` ### Только иконка {#example-no-label} Компонент `` может содержать только иконку, без текста. ```html
Содержимое страницы
``` ### Ссылка {#example-link} Установите атрибут `href` у компонента ``, чтобы превратить элемент навигации в ссылку. При этом также можно использовать связанные с ссылками атрибуты: `download`, `target`, `rel`. ```html
Recent Images Library
Содержимое страницы
``` ### Бейдж {#example-badge} В компоненте `` можно добавить бейдж через слот `badge`. ```html
Recent 99+ Images Library
Содержимое страницы
``` ## mdui-navigation-rail-item API ### Свойства
Атрибут Свойство Reflect Тип По умолчанию Описание
icon icon true string

Имя иконки Material Icons в неактивном состоянии. Можно задать через slot="icon".
active-icon activeIcon true string

Имя иконки Material Icons в активном состоянии. Можно задать через slot="active-icon".
value value true string

Значение элемента панели навигации.
href href true string

Целевой URL ссылки.

Если задано это свойство, компонент будет отображаться как элемент <a> и можно использовать свойства, связанные со ссылками.
download download true string

Имя файла для скачивания при переходе по ссылке.

Примечание: Это свойство действует только при заданном свойстве href.
target target true '_blank' | '_parent' | '_self' | '_top'

Определяет, где будет открыта ссылка. Возможные значения:

  • _blank — открывает ссылку в новом окне
  • _parent — открывает ссылку в родительском фрейме
  • _self — открывает ссылку в текущем фрейме (по умолчанию)
  • _top — открывает ссылку во всём окне

Примечание: Это свойство действует только при заданном свойстве href.
rel rel true '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 true boolean false

Определяет, будет ли элемент автоматически получать фокус после загрузки страницы.
tabindex tabIndex false number

Порядок перехода к элементу при нажатии клавиши Tab.
### Методы
Название Описание
click(): void

Имитирует щелчок мыши по элементу.
focus(options?: FocusOptions): void

Устанавливает фокус на текущий элемент.

В качестве аргумента можно передать объект со свойством:

  • preventScroll: по умолчанию после получения фокуса страница прокручивается, чтобы элемент появился в области видимости. Чтобы этого избежать, задайте для этого свойства значение true.
blur(): void

Убирает фокус с текущего элемента.
### События
Название Описание
focus

Срабатывает при получении фокуса.
blur

Срабатывает при потере фокуса.
### Slots
Название Описание
(по умолчанию)

Текстовое содержимое.
icon

Иконка.
active-icon

Иконка в активном состоянии.
badge

Бейдж.
### CSS Parts
Название Описание
container

Контейнер элемента панели навигации.
indicator

Индикатор.
badge

Бейдж.
icon

Иконка.
active-icon

Иконка в активном состоянии.
label

Текстовое содержимое.
### Пользовательские CSS-свойства
Название Описание
--shape-corner-indicator

Размер скругления углов индикатора. Можно указать конкретное значение в пикселях, но рекомендуется использовать дизайн-токены.
## mdui-navigation-rail API ### Свойства
Атрибут Свойство Reflect Тип По умолчанию Описание
value value true string

Значение текущего выбранного <mdui-navigation-rail-item>.
placement placement true 'left' | 'right' 'left'

Положение панели навигации. Возможные значения:

  • left — слева
  • right — справа
alignment alignment true 'start' | 'center' | 'end' 'start'

Выравнивание элементов <mdui-navigation-rail-item>. Возможные значения:

  • start — по верхнему краю
  • center — по центру
  • end — по нижнему краю
contained contained true boolean false

По умолчанию панель навигации позиционируется относительно элемента body. При задании этого свойства в true панель будет позиционироваться относительно своего родительского элемента.

Примечание: При задании этого свойства необходимо вручную задать родительскому элементу стиль position: relative;.
divider divider true boolean false

Определяет, добавлять ли разделитель между панелью и содержимым страницы.
order order true number

Порядок этого компонента в <mdui-layout> (по возрастанию). По умолчанию 0.
### События
Название Описание
change

Срабатывает при изменении значения.
### Slots
Название Описание
(по умолчанию)

Компоненты <mdui-navigation-rail-item>.
top

Элементы в верхней части.
bottom

Элементы в нижней части.
### CSS Parts
Название Описание
top

Контейнер элементов в верхней части.
bottom

Контейнер элементов в нижней части.
items

Контейнер компонентов <mdui-navigation-rail-item>.
### Пользовательские CSS-свойства
Название Описание
--shape-corner

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

Значение CSS z-index компонента.
# Компонент радиокнопки Радиокнопка используется для выбора одного из нескольких вариантов, гарантируя, что одновременно может быть выбран только один вариант. ## Использование {#usage} При необходимости импортируйте компоненты: ```js import 'mdui/components/radio-group.js'; import 'mdui/components/radio.js'; ``` При необходимости импортируйте типы TypeScript: ```ts import type { RadioGroup } from 'mdui/components/radio-group.js'; import type { Radio } from 'mdui/components/radio.js'; ``` Пример использования: ```html Chinese English ``` ## Примеры {#examples} ### Состояние выбора {#example-checked} Значением атрибута `value` компонента `` является значение `value` выбранной радиокнопки ``. Вы также можете переключать выбранную радиокнопку, обновляя значение `value` компонента ``. ```html Chinese English ``` Вы можете использовать радиокнопку отдельно, управляя состоянием выбора через атрибут `checked`. ```html Radio ``` ### Отключенное состояние {#example-disabled} Добавьте атрибут `disabled` к компоненту ``, чтобы отключить всю группу радиокнопок. ```html Chinese English ``` Чтобы отключить отдельную радиокнопку, добавьте атрибут `disabled` к компоненту ``. ```html Chinese English ``` ### Иконка {#example-icon} С помощью атрибутов `unchecked-icon` и `checked-icon` можно задать иконки Material Icons для невыбранного и выбранного состояний соответственно. Также можно использовать слоты `unchecked-icon` и `checked-icon`. ```html Chinese English ``` ## mdui-radio-group API ### Свойства
Атрибут Свойство Reflect Тип По умолчанию Описание
disabled disabled true boolean false

Определяет, отключён ли этот компонент.
form form true string

Связанный элемент <form>. В качестве значения укажите id элемента <form> на той же странице.

Если свойство не задано, элемент должен быть дочерним по отношению к <form>. С этим свойством элемент можно разместить в любом месте страницы, а не только внутри <form>.
name name true string ''

Имя группы радиокнопок, которое будет отправлено вместе с данными формы.
value value true string ''

Текущее значение выбранной радиокнопки, будет отправлено вместе с данными формы.
undefined defaultValue false string ''

Значение по умолчанию. При сбросе формы восстанавливается именно оно. Это свойство задаётся только через JavaScript.
required required true boolean false

Определяет, обязательно ли выбрать одну из радиокнопок при отправке формы.
undefined validity false ValidityState

Объект, содержащий состояние валидации формы. См. ValidityState.
undefined validationMessage false string

Если проверка формы не пройдена, это свойство содержит сообщение об ошибке. Если проверка пройдена, это свойство будет пустой строкой.
### Методы
Название Описание
checkValidity(): boolean

Проверяет, прошло ли поле формы валидацию. Если не прошло, возвращает false и вызывает событие invalid; если прошло, возвращает true.
reportValidity(): boolean

Проверяет, прошло ли поле формы валидацию. Если не прошло, возвращает false и вызывает событие invalid; если прошло, возвращает true.

Если проверка не пройдена, также отображает сообщение об ошибке валидации в компоненте.
setCustomValidity(message: string): void

Устанавливает пользовательский текст сообщения об ошибке. Пока задан непустой текст, поле считается не прошедшим проверку.
### События
Название Описание
change

Срабатывает при изменении выбранного значения.
input

Срабатывает при изменении выбранного значения.
invalid

Возникает, когда поле формы не проходит валидацию.
### Slots
Название Описание
(по умолчанию)

Элементы <mdui-radio>.
## mdui-radio API ### Свойства
Атрибут Свойство Reflect Тип По умолчанию Описание
value value true string ''

Значение текущей радиокнопки.
disabled disabled true boolean false

Определяет, отключена ли радиокнопка.
checked checked true boolean false

Определяет, выбрана ли эта радиокнопка.
unchecked-icon uncheckedIcon true string

Имя иконки Material Icons для невыбранного состояния. Можно задать через slot="unchecked-icon".
checked-icon checkedIcon true string

Имя иконки Material Icons для выбранного состояния. Можно задать через slot="checked-icon".
autofocus autofocus true boolean false

Определяет, будет ли элемент автоматически получать фокус после загрузки страницы.
tabindex tabIndex false number

Порядок перехода к элементу при нажатии клавиши Tab.
### Методы
Название Описание
click(): void

Имитирует щелчок мыши по элементу.
focus(options?: FocusOptions): void

Устанавливает фокус на текущий элемент.

В качестве аргумента можно передать объект со свойством:

  • preventScroll: по умолчанию после получения фокуса страница прокручивается, чтобы элемент появился в области видимости. Чтобы этого избежать, задайте для этого свойства значение true.
blur(): void

Убирает фокус с текущего элемента.
### События
Название Описание
focus

Срабатывает при получении фокуса.
blur

Срабатывает при потере фокуса.
change

Срабатывает при выборе этой радиокнопки.
### Slots
Название Описание
(по умолчанию)

Текстовое содержимое.
unchecked-icon

Иконка невыбранного состояния.
checked-icon

Иконка выбранного состояния.
### CSS Parts
Название Описание
control

Контейнер для иконки слева.
unchecked-icon

Иконка невыбранного состояния.
checked-icon

Иконка выбранного состояния.
label

Текстовое содержимое.
# Компонент Слайдер диапазона Слайдер диапазона позволяет пользователю выбирать диапазон значений из заданного интервала. ## Использование {#usage} При необходимости импортируйте компонент: ```js import 'mdui/components/range-slider.js'; ``` При необходимости импортируйте типы TypeScript: ```ts import type { RangeSlider } from 'mdui/components/range-slider.js'; ``` Пример использования: ```html ``` ## Примеры {#examples} ### Значение по умолчанию {#example-value} Через атрибут `value` можно читать и устанавливать текущее значение слайдера. Этот атрибут является массивом, который можно читать и устанавливать только через JavaScript-свойство. ```html ``` ### Отключенное состояние {#example-disabled} Добавьте атрибут `disabled`, чтобы отключить слайдер. ```html ``` ### Диапазон {#example-min-max} Используйте атрибуты `min` и `max`, чтобы задать минимальное и максимальное значение слайдера. ```html ``` ### Шаг {#example-step} Используйте атрибут `step`, чтобы задать шаг слайдера. ```html ``` ### Деления {#example-tickmarks} Добавьте атрибут `tickmarks`, чтобы отобразить деления на слайдере. ```html ``` ### Скрытие подсказки {#example-nolabel} Добавьте атрибут `nolabel`, чтобы скрыть текстовую подсказку на слайдере. ```html ``` ### Настройка формата подсказки {#example-labelFormatter} Через JavaScript-свойство `labelFormatter` можно изменить формат отображения текстовой подсказки. Значение этого свойства — функция, которая принимает текущее значение слайдера и возвращает строку для отображения. ```html ``` ## mdui-range-slider API ### Свойства
Атрибут Свойство Reflect Тип По умолчанию Описание
undefined defaultValue false number[] []

Значение по умолчанию. При сбросе формы восстанавливается именно оно. Это свойство задаётся только через JavaScript.
undefined value false number[]

Значение слайдера в виде массива; будет отправлено вместе с данными формы.

Примечание: Это свойство нельзя задать через HTML-атрибут. Для изменения используйте JavaScript-свойство.
autofocus autofocus true boolean false

Определяет, будет ли элемент автоматически получать фокус после загрузки страницы.
tabindex tabIndex false number

Порядок перехода к элементу при нажатии клавиши Tab.
min min true number 0

Минимальное значение ползунка, по умолчанию 0.
max max true number 100

Максимальное значение ползунка, по умолчанию 100.
step step true number 1

Шаг изменения значения, по умолчанию 1.
tickmarks tickmarks true boolean false

Определяет, добавлять ли отметки делений.
nolabel nolabel true boolean false

Определяет, скрывать ли текстовую подсказку.
disabled disabled true boolean false

Определяет, отключён ли ползунок.
form form true string

Связанный элемент <form>. В качестве значения укажите id элемента <form> на той же странице.

Если свойство не задано, элемент должен быть дочерним по отношению к <form>. С этим свойством элемент можно разместить в любом месте страницы, а не только внутри <form>.
name name true string ''

Имя ползунка, которое будет отправлено вместе с данными формы.
undefined validity false ValidityState

Объект, содержащий состояние валидации формы. См. ValidityState.
undefined validationMessage false string

Если проверка формы не пройдена, это свойство содержит сообщение об ошибке. Если проверка пройдена, это свойство будет пустой строкой.
undefined labelFormatter false (value: number) => 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

Срабатывает при потере фокуса.
change

Срабатывает при изменении значения и потере фокуса.
input

Срабатывает при изменении значения.
invalid

Возникает, когда поле формы не проходит валидацию.
### CSS Parts
Название Описание
track-inactive

Неактивная часть дорожки.
track-active

Активная часть дорожки.
handle

Ручка.
label

Текст подсказки.
tickmark

Отметка деления.
# Компонент Выпадающий список Компонент выпадающего списка предоставляет множество опций в выпадающем меню для удобного выбора пользователем. На этой странице описывается использование компонента ``. Об использовании пунктов выпадающего меню см. [``](/ru/docs/2/components/menu#menu-item-api). ## Использование {#usage} При необходимости импортируйте компоненты: ```js import 'mdui/components/select.js'; import 'mdui/components/menu-item.js'; ``` При необходимости импортируйте типы TypeScript: ```ts import type { Select } from 'mdui/components/select.js'; import type { MenuItem } from 'mdui/components/menu-item.js'; ``` Пример использования: ```html Item 1 Item 2 ``` ## Примеры {#examples} ### Форма {#example-variant} Используйте атрибут `variant` для установки формы выпадающего списка. ```html Item 1 Item 2 Item 1 Item 2 ``` ### Поддержка множественного выбора {#example-multiple} По умолчанию выпадающий список поддерживает одиночный выбор, и значением `value` компонента `` является значение `value` выбранного ``. Добавьте атрибут `multiple`, чтобы включить поддержку множественного выбора. В этом случае значением `value` компонента `` будет массив значений `value` выбранных ``. Обратите внимание: в режиме множественного выбора `value` является массивом, который можно читать и устанавливать только через JavaScript-свойство. ```html Item 1 Item 2 Item 3 ``` ### Вспомогательный текст {#example-helper-text} Используйте атрибут `label` для задания текста метки над выпадающим списком. ```html Item 1 Item 2 ``` Используйте атрибут `placeholder` для задания текста-заполнителя, когда значение не выбрано. ```html Item 1 Item 2 ``` Используйте атрибут `helper` для задания вспомогательного текста внизу выпадающего списка. Также можно использовать слот `helper`. ```html Item 1 Item 2 Item 1 Item 2 Supporting text ``` ### Режим только для чтения {#example-readonly} Добавьте атрибут `readonly`, чтобы перевести выпадающий список в режим только для чтения. ```html Item 1 Item 2 ``` ### Отключенное состояние {#example-disabled} Добавьте атрибут `disabled`, чтобы отключить выпадающий список. ```html Item 1 Item 2 ``` ### Возможность очистки {#example-clearable} Добавьте атрибут `clearable`, чтобы справа от выпадающего списка появлялась кнопка очистки, когда значение выбрано. ```html Item 1 Item 2 ``` Также можно настроить кнопку очистки через слот `clear`. ```html Item 1 Item 2 ``` ### Положение выпадающего меню {#example-placement} Используйте атрибут `placement` для задания положения выпадающего меню. ```html Item 1 Item 2 ``` ### Выравнивание текста по правому краю {#example-end-aligned} Добавьте атрибут `end-aligned`, чтобы выровнять текст по правому краю. ```html Item 1 Item 2 ``` ### Префиксные и суффиксные текст и иконки {#example-prefix-suffix} С помощью атрибутов `icon` и `end-icon` можно добавить иконки Material Icons слева и справа от выпадающего списка. Также можно использовать слоты `icon` и `end-icon`. ```html Item 1 Item 2

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

Item 1 Item 2 $ /100 ``` ## mdui-select API ### Свойства
Атрибут Свойство Reflect Тип По умолчанию Описание
variant variant true 'filled' | 'outlined' 'filled'

Стиль выпадающего списка. Возможные значения:

  • filled — список с фоновым цветом, более выраженный визуальный акцент
  • outlined — список с рамкой, менее выраженный визуальный акцент
multiple multiple true boolean false

Определяет, поддерживается ли множественный выбор.
name name true string ''

Имя поля выбора, будет отправлено вместе с данными формы.
value value false string | string[] ''

Значение поля выбора, будет отправлено вместе с данными формы.

Если атрибут multiple не указан, значение — строка; если указан, значение — массив строк. HTML-атрибут может задавать только строковое значение; для задания массива используйте JavaScript-свойство.
undefined defaultValue false string | string[] ''

Значение по умолчанию. При сбросе формы восстанавливается именно оно. Это свойство задаётся только через JavaScript.
label label true string

Текст метки.
placeholder placeholder true string

Текст-заполнитель.
helper helper true string

Вспомогательный текст внизу поля выбора. Можно задать через slot="helper".
clearable clearable true boolean false

Определяет, можно ли очистить выбранное значение.
clear-icon clearIcon true string

Имя иконки Material Icons для кнопки очистки справа, когда поле выбора можно очистить. Можно задать через slot="clear-icon".
placement placement true 'auto' | 'bottom' | 'top' 'auto'

Расположение выпадающего списка. Возможные значения:

  • auto — автоматическое определение положения
  • bottom — снизу
  • top — сверху
end-aligned endAligned true boolean false

Определяет, выравнивать ли текст по правому краю.
prefix prefix true string

Текст-префикс поля выбора. Отображается только при фокусе или когда поле выбора имеет значение. Можно задать через slot="prefix".
suffix suffix true string

Текст-суффикс поля выбора. Отображается только при фокусе или когда поле выбора имеет значение. Можно задать через slot="suffix".
icon icon true string

Имя иконки Material Icons для префикса слева. Можно задать через slot="icon".
end-icon endIcon true string

Имя иконки Material Icons для суффикса справа. Можно задать через slot="end-icon".
error-icon errorIcon true string

Имя иконки Material Icons справа при ошибке валидации поля формы. Можно задать через slot="error-icon".
form form true string

Связанный элемент <form>. В качестве значения укажите id элемента <form> на той же странице.

Если свойство не задано, элемент должен быть дочерним по отношению к <form>. С этим свойством элемент можно разместить в любом месте страницы, а не только внутри <form>.
readonly readonly true boolean false

Только для чтения.
disabled disabled true boolean false

Определяет, отключён ли компонент.
required required true boolean false

Определяет, обязательно ли для заполнения при отправке формы.
undefined validity false ValidityState

Объект, содержащий состояние валидации формы. См. ValidityState.
undefined validationMessage false string

Если проверка формы не пройдена, это свойство содержит сообщение об ошибке. Если проверка пройдена, это свойство будет пустой строкой.
autofocus autofocus true boolean false

Определяет, будет ли элемент автоматически получать фокус после загрузки страницы.
tabindex tabIndex false 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>.
# Компонент Сегментированная кнопка Компонент сегментированной кнопки объединяет набор кнопок для выбора опций, переключения представлений или сортировки элементов. ## Использование {#usage} При необходимости импортируйте компоненты: ```js import 'mdui/components/segmented-button-group.js'; import 'mdui/components/segmented-button.js'; ``` При необходимости импортируйте типы TypeScript: ```ts import type { SegmentedButtonGroup } from 'mdui/components/segmented-button-group.js'; import type { SegmentedButton } from 'mdui/components/segmented-button.js'; ``` Пример использования: ```html Day Week Month ``` ## Примеры {#examples} ### Полная ширина {#example-full-width} Добавьте атрибут `full-width` к элементу ``, чтобы компонент занимал всю ширину. ```html Day Week Month ``` ### Режим одиночного выбора {#example-selects-single} Установите атрибут `selects` элемента `` в значение `single`, чтобы включить режим одиночного выбора. В этом случае значением `value` компонента `` будет значение `value` выбранного ``. ```html Day Week Month Day Week Month ``` ### Режим множественного выбора {#example-selects-multiple} Установите атрибут `selects` элемента `` в значение `multiple`, чтобы включить режим множественного выбора. В этом случае значением `value` компонента будет массив значений `value` выбранных ``. Обратите внимание: в режиме множественного выбора `value` является массивом, который можно читать и устанавливать только через JavaScript-свойство. ```html Day Week Month Day Week Month ``` ### Иконка {#example-icon} С помощью атрибутов `icon` и `end-icon` у элемента `` можно добавить иконки Material Icons слева и справа от кнопки. Также можно использовать слоты `icon` и `end-icon`. ```html Day Week Month ``` С помощью атрибута `selected-icon` у элемента `` можно задать иконку выбранного состояния. Также можно использовать слот `selected-icon`. ```html Day Week ``` ### Ссылка {#example-link} Установите атрибут `href` у элемента ``, чтобы превратить кнопку в ссылку. При этом также можно использовать связанные с ссылками атрибуты: `download`, `target`, `rel`. ```html Link Week Month ``` ### Отключенное состояние и состояние загрузки {#example-disabled} Добавьте атрибут `disabled` к элементу ``, чтобы отключить всю группу сегментированных кнопок. ```html Day Week Month ``` Добавьте атрибут `disabled` к элементу ``, чтобы отключить конкретную кнопку; добавьте атрибут `loading`, чтобы добавить состояние загрузки. ```html Day Week Month Year ``` ## mdui-segmented-button-group API ### Свойства
Атрибут Свойство Reflect Тип По умолчанию Описание
full-width fullWidth true boolean false

Определяет, растягивать ли на всю ширину родительского элемента.
selects selects true 'single' | 'multiple'

Режим выбора сегментированных кнопок. По умолчанию выбор отключён. Возможные значения:

  • single — одиночный выбор
  • multiple — множественный выбор
disabled disabled true boolean false

Определяет, отключена ли группа.
required required true boolean false

Определяет, обязательно ли выбрать при отправке формы.
form form true string

Связанный элемент <form>. В качестве значения укажите id элемента <form> на той же странице.

Если свойство не задано, элемент должен быть дочерним по отношению к <form>. С этим свойством элемент можно разместить в любом месте страницы, а не только внутри <form>.
name name true string ''

Имя при отправке формы, будет отправлено вместе с данными формы.
value value false string | string[] ''

Значение текущего выбранного <mdui-segmented-button>.

Примечание: HTML-атрибут этого свойства всегда является строкой; задать начальное значение через HTML-атрибут можно только при selects="single". JavaScript-свойство этого свойства является строкой при selects="single" и массивом строк при selects="multiple". Поэтому при selects="multiple" изменить это значение можно только через JavaScript-свойство.
undefined defaultValue false string | string[] ''

Значение по умолчанию. При сбросе формы восстанавливается именно оно. Это свойство задаётся только через JavaScript.
undefined validity false ValidityState

Объект, содержащий состояние валидации формы. См. ValidityState.
undefined validationMessage false 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 ### Свойства
Атрибут Свойство Reflect Тип По умолчанию Описание
icon icon true string

Имя иконки Material Icons слева. Можно задать через slot="icon".
end-icon endIcon true string

Имя иконки Material Icons справа. Можно задать через slot="end-icon".
selected-icon selectedIcon true string

Имя иконки Material Icons в выбранном состоянии. Можно задать через slot="selected-icon".
href href true string

Целевой URL ссылки.

Если задано это свойство, компонент будет отображаться как элемент <a> и можно использовать свойства, связанные со ссылками.
download download true string

Имя файла для скачивания при переходе по ссылке.

Примечание: Это свойство действует только при заданном свойстве href.
target target true '_blank' | '_parent' | '_self' | '_top'

Определяет, где будет открыта ссылка. Возможные значения:

  • _blank — открывает ссылку в новом окне
  • _parent — открывает ссылку в родительском фрейме
  • _self — открывает ссылку в текущем фрейме (по умолчанию)
  • _top — открывает ссылку во всём окне

Примечание: Это свойство действует только при заданном свойстве href.
rel rel true '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 true boolean false

Определяет, будет ли элемент автоматически получать фокус после загрузки страницы.
tabindex tabIndex false number

Порядок перехода к элементу при нажатии клавиши Tab.
disabled disabled true boolean false

Отключает элемент.
loading loading true boolean false

Переводит элемент в состояние загрузки.
name name true string ''

Имя кнопки, которое будет отправлено вместе с данными формы.

Примечание: Это свойство действует, только если не задано свойство href.
value value true string ''

Значение кнопки, которое будет отправлено вместе с данными формы.

Примечание: Это свойство действует, только если не задано свойство href.
type type true 'submit' | 'reset' | 'button' 'button'

Тип кнопки. По умолчанию button. Возможные значения:

  • submit — эта кнопка отправляет данные формы на сервер
  • reset — эта кнопка сбрасывает все компоненты к начальным значениям
  • button — эта кнопка не имеет поведения по умолчанию

Примечание: Это свойство действует, только если не задано свойство href.
form form true string

Связанный элемент <form>. В качестве значения укажите id элемента <form> на той же странице.

Если свойство не задано, элемент должен быть дочерним по отношению к <form>. С этим свойством элемент можно разместить в любом месте страницы, а не только внутри <form>.

Примечание: Это свойство действует, только если не задано свойство href.
formaction formAction true string

Задаёт URL-адрес для отправки формы.

Если это свойство задано, оно переопределяет атрибут action элемента <form>.

Примечание: Это свойство действует, только если не задано свойство href и type="submit".
formenctype formEnctype true '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 true 'post' | 'get'

Определяет HTTP-метод, который используется при отправке формы. Возможные значения:

  • post — данные формы отправляются на сервер в теле запроса
  • get — данные формы добавляются к URI формы после символа ?, и полученный URI отправляется на сервер. Используется, если форма не имеет побочных эффектов и содержит только ASCII-символы.

Если это свойство задано, оно переопределяет атрибут method элемента <form>.

Примечание: Это свойство действует, только если не задано свойство href и type="submit".
formnovalidate formNoValidate true boolean false

Если задано, проверка формы при отправке не выполняется.

Если задано, переопределяет атрибут novalidate элемента <form>.

Примечание: Это свойство действует, только если не задано свойство href и type="submit".
formtarget formTarget true '_self' | '_blank' | '_parent' | '_top'

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

  • _self — по умолчанию, открывается в текущем фрейме
  • _blank — открывается в новом окне
  • _parent — открывается в родительском фрейме
  • _top — открывается во всём окне

Если это свойство задано, оно переопределяет атрибут target элемента <form>.

Примечание: Это свойство действует, только если не задано свойство href и type="submit".
undefined validity false ValidityState

Объект, содержащий состояние валидации формы. См. ValidityState.
undefined validationMessage false 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> в состоянии загрузки.
# Компонент слайдера Слайдер позволяет пользователю выбирать значение из заданного интервала с помощью ползунка. ## Использование {#usage} При необходимости импортируйте компонент: ```js import 'mdui/components/slider.js'; ``` При необходимости импортируйте типы TypeScript: ```ts import type { Slider } from 'mdui/components/slider.js'; ``` Пример использования: ```html ``` ## Примеры {#examples} ### Значение по умолчанию {#example-value} Через атрибут `value` можно читать и устанавливать текущее значение слайдера. ```html ``` ### Отключенное состояние {#example-disabled} Добавьте атрибут `disabled`, чтобы отключить слайдер. ```html ``` ### Диапазон {#example-min-max} Используйте атрибуты `min` и `max`, чтобы задать минимальное и максимальное значение слайдера. ```html ``` ### Шаг {#example-step} Используйте атрибут `step`, чтобы задать шаг слайдера. ```html ``` ### Деления {#example-tickmarks} Добавьте атрибут `tickmarks`, чтобы отобразить деления на слайдере. ```html ``` ### Скрытие подсказки {#example-nolabel} Добавьте атрибут `nolabel`, чтобы скрыть текстовую подсказку на слайдере. ```html ``` ### Настройка формата подсказки {#example-labelFormatter} Через JavaScript-свойство `labelFormatter` можно изменить формат отображения текстовой подсказки. Значение этого свойства — функция, которая принимает текущее значение слайдера и возвращает строку для отображения. ```html ``` ## mdui-slider API ### Свойства
Атрибут Свойство Reflect Тип По умолчанию Описание
value value false number 0

Значение слайдера, будет отправлено вместе с данными формы.
undefined defaultValue false number 0

Значение по умолчанию. При сбросе формы восстанавливается именно оно. Это свойство задаётся только через JavaScript.
autofocus autofocus true boolean false

Определяет, будет ли элемент автоматически получать фокус после загрузки страницы.
tabindex tabIndex false number

Порядок перехода к элементу при нажатии клавиши Tab.
min min true number 0

Минимальное значение ползунка, по умолчанию 0.
max max true number 100

Максимальное значение ползунка, по умолчанию 100.
step step true number 1

Шаг изменения значения, по умолчанию 1.
tickmarks tickmarks true boolean false

Определяет, добавлять ли отметки делений.
nolabel nolabel true boolean false

Определяет, скрывать ли текстовую подсказку.
disabled disabled true boolean false

Определяет, отключён ли ползунок.
form form true string

Связанный элемент <form>. В качестве значения укажите id элемента <form> на той же странице.

Если свойство не задано, элемент должен быть дочерним по отношению к <form>. С этим свойством элемент можно разместить в любом месте страницы, а не только внутри <form>.
name name true string ''

Имя ползунка, которое будет отправлено вместе с данными формы.
undefined validity false ValidityState

Объект, содержащий состояние валидации формы. См. ValidityState.
undefined validationMessage false string

Если проверка формы не пройдена, это свойство содержит сообщение об ошибке. Если проверка пройдена, это свойство будет пустой строкой.
undefined labelFormatter false (value: number) => 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

Срабатывает при потере фокуса.
change

Срабатывает при изменении значения и потере фокуса.
input

Срабатывает при изменении значения.
invalid

Возникает, когда поле формы не проходит валидацию.
### CSS Parts
Название Описание
track-inactive

Неактивная часть дорожки.
track-active

Активная часть дорожки.
handle

Ручка.
label

Текст подсказки.
tickmark

Отметка деления.
# Компонент снэкбара Снэкбар используется для отображения краткой информации о процессе выполнения приложения на странице. Помимо прямого использования этого компонента, mdui предоставляет функцию [`mdui.snackbar`](/ru/docs/2/functions/snackbar) для упрощения работы с компонентом Snackbar. ## Использование {#usage} При необходимости импортируйте компонент: ```js import 'mdui/components/snackbar.js'; ``` При необходимости импортируйте типы TypeScript: ```ts import type { Snackbar } from 'mdui/components/snackbar.js'; ``` Пример использования: ```html Photo archived Открыть Snackbar ``` ## Примеры {#examples} ### Положение {#example-placement} Используйте атрибут `placement` для установки положения снэкбара. ```html
Photo archived top-start Photo archived top Photo archived top-end
Photo archived bottom-start Photo archived bottom Photo archived bottom-end
``` ### Кнопка действия {#example-action} Используйте атрибут `action` для добавления кнопки действия справа от снэкбара, указав текст кнопки. Нажатие на кнопку действия вызывает событие `action-click`. Чтобы отобразить кнопку действия в состоянии загрузки, добавьте атрибут `action-loading`. ```html Photo archived Открыть Snackbar ``` Также можно добавить пользовательский элемент справа с помощью слота `action`. ```html Photo archived Undo Открыть Snackbar ``` ### Возможность закрытия {#example-closeable} Добавьте атрибут `closeable`, чтобы справа от снэкбара появилась кнопка закрытия. Нажатие на эту кнопку закрывает снэкбар и вызывает событие `close`. ```html Photo archived Открыть Snackbar ``` Можно настроить элемент кнопки закрытия с помощью слота `close-button`. ```html Photo archived Открыть Snackbar ``` С помощью атрибута `close-icon` можно изменить иконку Material Icons на кнопке закрытия. Также можно использовать слот `close-icon` для настройки иконки. ```html Photo archived Открыть Snackbar ``` ### Количество строк текста {#example-message-line} По умолчанию текст сообщения не имеет ограничений по количеству строк. Вы можете ограничить количество строк с помощью атрибута `message-line` (максимум 2 строки). ```html The item already has the label "travel". You can add a new label. You can add a new label. Открыть Snackbar ``` ### Задержка автоматического закрытия {#example-auto-close-delay} Используйте атрибут `auto-close-delay` для установки задержки автоматического закрытия в миллисекундах. Значение по умолчанию — 5000 мс. ```html Photo archived Открыть Snackbar ``` ### Закрытие по клику вне области {#example-close-on-outside-click} Добавьте атрибут `close-on-outside-click`, чтобы снэкбар закрывался при клике на область вне него. ```html Photo archived Открыть Snackbar ``` ## mdui-snackbar API ### Свойства
Атрибут Свойство Reflect Тип По умолчанию Описание
open open true boolean false

Определяет, отображать ли снэкбар.
placement placement true 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' 'bottom'

Положение снэкбара. По умолчанию bottom. Возможные значения:

  • top — сверху по центру
  • top-start — сверху слева
  • top-end — сверху справа
  • bottom — снизу по центру
  • bottom-start — снизу слева
  • bottom-end — снизу справа
action action true string

Текст кнопки действия. Можно задать через слот action.
action-loading actionLoading true boolean false

Определяет, находится ли кнопка действия в состоянии загрузки.
closeable closeable true boolean false

Определяет, отображать ли кнопку закрытия справа.
close-icon closeIcon true string

Имя иконки Material Icons для кнопки закрытия. Можно задать через slot="close-icon".
message-line messageLine true 1 | 2

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

  • 1 — максимум одна строка
  • 2 — максимум две строки
auto-close-delay autoCloseDelay true number 5000

Задержка автоматического закрытия (в миллисекундах). При значении 0 автоматическое закрытие отключается. По умолчанию 5000 мс.
close-on-outside-click closeOnOutsideClick true boolean false

Определяет, нужно ли закрывать снэкбар при клике или касании вне его.
### События
Название Описание
open

Срабатывает в начале показа снэкбара. Можно отменить показ, вызвав event.preventDefault().
opened

Срабатывает после завершения анимации показа снэкбара.
close

Срабатывает в начале скрытия снэкбара. Можно отменить скрытие, вызвав event.preventDefault().
closed

Срабатывает после завершения анимации скрытия снэкбара.
action-click

Срабатывает при клике на кнопку действия.
### Slots
Название Описание
(по умолчанию)

Текстовое содержимое сообщения снэкбара.
action

Кнопка действия справа.
close-button

Кнопка закрытия справа. Отображается только при closeable=true.
close-icon

Иконка внутри кнопки закрытия.
### CSS Parts
Название Описание
message

Текст сообщения.
action

Кнопка действия.
close-button

Кнопка закрытия.
close-icon

Иконка внутри кнопки закрытия.
### Пользовательские CSS-свойства
Название Описание
--shape-corner

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

Значение CSS z-index компонента.
# Компонент переключателя Переключатель используется для переключения состояния отдельного параметра (вкл/выкл), обеспечивая интуитивно понятное управление настройкой. ## Использование {#usage} При необходимости импортируйте компонент: ```js import 'mdui/components/switch.js'; ``` При необходимости импортируйте типы TypeScript: ```ts import type { Switch } from 'mdui/components/switch.js'; ``` Пример использования: ```html ``` ## Примеры {#examples} ### Состояние выбора {#example-checked} Когда переключатель выбран, атрибут `checked` имеет значение `true`. Вы также можете добавить атрибут `checked`, чтобы переключатель по умолчанию был в выбранном состоянии. ```html ``` ### Отключенное состояние {#example-disabled} Добавьте атрибут `disabled`, чтобы отключить переключатель. ```html ``` ### Иконка {#example-icon} С помощью атрибута `unchecked-icon` можно задать иконку Material Icons для невыбранного состояния, а с помощью `checked-icon` — для выбранного. Также можно использовать слоты `unchecked-icon` и `checked-icon`. ```html ``` ## mdui-switch API ### Свойства
Атрибут Свойство Reflect Тип По умолчанию Описание
disabled disabled true boolean false

Определяет, отключён ли переключатель.
checked checked true boolean false

Определяет, включён ли переключатель.
undefined defaultChecked false boolean false

Исходное состояние. При сбросе формы оно восстанавливается. Это свойство задаётся только через JavaScript.
unchecked-icon uncheckedIcon true string

Имя иконки Material Icons для выключенного состояния. Можно задать через slot="unchecked-icon".
checked-icon checkedIcon true string

Имя иконки Material Icons для включённого состояния. Можно задать через slot="checked-icon".

По умолчанию используется иконка check. Можно передать пустую строку, чтобы скрыть иконку по умолчанию.
required required true boolean false

Определяет, обязательно ли включить этот переключатель при отправке формы.
form form true string

Связанный элемент <form>. В качестве значения укажите id элемента <form> на той же странице.

Если свойство не задано, элемент должен быть дочерним по отношению к <form>. С этим свойством элемент можно разместить в любом месте страницы, а не только внутри <form>.
name name true string ''

Имя переключателя, будет отправлено вместе с данными формы.
value value true string 'on'

Значение переключателя, будет отправлено вместе с данными формы.
undefined validity false ValidityState

Объект, содержащий состояние валидации формы. См. ValidityState.
undefined validationMessage false string

Если проверка формы не пройдена, это свойство содержит сообщение об ошибке. Если проверка пройдена, это свойство будет пустой строкой.
autofocus autofocus true boolean false

Определяет, будет ли элемент автоматически получать фокус после загрузки страницы.
tabindex tabIndex false 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

Срабатывает при изменении состояния.
input

Срабатывает при изменении состояния.
invalid

Возникает, когда поле формы не проходит валидацию.
### Slots
Название Описание
unchecked-icon

Элемент для выключенного состояния.
checked-icon

Элемент для включённого состояния.
### CSS Parts
Название Описание
track

Дорожка.
thumb

Контейнер иконки.
unchecked-icon

Иконка выключенного состояния.
checked-icon

Иконка включённого состояния.
### Пользовательские CSS-свойства
Название Описание
--shape-corner

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

Размер скругления углов контейнера иконки компонента. Можно указать конкретное значение в пикселях, но рекомендуется использовать дизайн-токены.
# Компонент вкладок Компонент вкладок используется для группировки и отображения наборов данных или контента, обеспечивая удобное переключение между разными категориями. ## Использование {#usage} При необходимости импортируйте компоненты: ```js import 'mdui/components/tabs.js'; import 'mdui/components/tab.js'; import 'mdui/components/tab-panel.js'; ``` При необходимости импортируйте типы TypeScript компонентов: ```ts import type { Tabs } from 'mdui/components/tabs.js'; import type { Tab } from 'mdui/components/tab.js'; import type { TabPanel } from 'mdui/components/tab-panel.js'; ``` Пример использования: ```html Tab 1 Tab 2 Tab 3 Panel 1 Panel 2 Panel 3 ``` ## Примеры {#examples} ### Стиль вкладок {#example-variant} Используйте атрибут `variant` на компоненте `` для установки стиля вкладок. ```html Tab 1 Tab 2 Tab 3 Panel 1 Panel 2 Panel 3 Tab 1 Tab 2 Tab 3 Panel 1 Panel 2 Panel 3 ``` ### Расположение вкладок {#example-placement} Используйте атрибут `placement` на компоненте `` для установки расположения вкладок. ```html top-start top top-end bottom-start bottom bottom-end left-start left left-end right-start right right-end Tab 1 Tab 2 Tab 3 Panel 1 Panel 2 Panel 3 ``` ### Полная ширина {#example-full-width} Добавьте атрибут `full-width` на компоненте ``, чтобы вкладки занимали всю ширину, равномерно распределяя пространство между ними. ```html Tab 1 Tab 2 Tab 3 Panel 1 Panel 2 Panel 3 ``` ### Иконка {#example-icon} Установите атрибут `icon` на компоненте ``, чтобы добавить иконку Material Icons на вкладку. Также можно использовать слот `icon`. Добавьте атрибут `inline`, чтобы расположить иконку и текст горизонтально. ```html Tab 1 Tab 2 Tab 3 Panel 1 Panel 2 Panel 3 ``` ### Бейдж {#example-badge} В компоненте `` можно добавить бейдж с помощью слота `badge`. ```html Tab 1 99+ Tab 2 Tab 3 Panel 1 Panel 2 Panel 3 ``` ### Пользовательское содержимое {#example-custom} Используйте слот `custom` в компоненте ``, чтобы полностью настроить содержимое вкладки. ```html Tab 1 Icon Tab 2 Tab 3 Panel 1 Panel 2 Panel 3 ``` ## mdui-tab-panel API ### Свойства
Атрибут Свойство Reflect Тип По умолчанию Описание
value value true string

Значение панели вкладки.
### Slots
Название Описание
(по умолчанию)

Содержимое панели вкладки.
## mdui-tab API ### Свойства
Атрибут Свойство Reflect Тип По умолчанию Описание
value value true string

Значение вкладки.
icon icon true string

Имя иконки Material Icons. Можно задать через slot="icon".
inline inline true boolean false

Определяет, располагать ли иконку и текст в одну линию.
autofocus autofocus true boolean false

Определяет, будет ли элемент автоматически получать фокус после загрузки страницы.
tabindex tabIndex false number

Порядок перехода к элементу при нажатии клавиши Tab.
### Методы
Название Описание
click(): void

Имитирует щелчок мыши по элементу.
focus(options?: FocusOptions): void

Устанавливает фокус на текущий элемент.

В качестве аргумента можно передать объект со свойством:

  • preventScroll: по умолчанию после получения фокуса страница прокручивается, чтобы элемент появился в области видимости. Чтобы этого избежать, задайте для этого свойства значение true.
blur(): void

Убирает фокус с текущего элемента.
### События
Название Описание
focus

Срабатывает при получении фокуса.
blur

Срабатывает при потере фокуса.
### Slots
Название Описание
(по умолчанию)

Текстовое содержимое вкладки.
icon

Иконка вкладки.
badge

Бейдж.
custom

Полностью пользовательское содержимое вкладки.
### CSS Parts
Название Описание
container

Контейнер вкладки.
icon

Иконка вкладки.
label

Текст вкладки.
## mdui-tabs API ### Свойства
Атрибут Свойство Reflect Тип По умолчанию Описание
variant variant true 'primary' | 'secondary' 'primary'

Форма вкладок. Возможные значения:

  • primary — подходит для размещения под <mdui-top-app-bar> для переключения главных страниц приложения
  • secondary — подходит для размещения внутри страницы для переключения группы связанного контента
value value true string

Значение текущей активной вкладки <mdui-tab>.
placement placement true 'top-start' | 'top' | 'top-end' | 'bottom-start' | 'bottom' | 'bottom-end' | 'left-start' | 'left' | 'left-end' | 'right-start' | 'right' | 'right-end' 'top-start'

Положение вкладок. По умолчанию top-start. Возможные значения:

  • top-start — сверху, выравнивание по левому краю
  • top — сверху, по центру
  • top-end — сверху, выравнивание по правому краю
  • bottom-start — снизу, выравнивание по левому краю
  • bottom — снизу, по центру
  • bottom-end — снизу, выравнивание по правому краю
  • left-start — слева, выравнивание по верхнему краю
  • left — слева, по центру
  • left-end — слева, выравнивание по нижнему краю
  • right-start — справа, выравнивание по верхнему краю
  • right — справа, по центру
  • right-end — справа, выравнивание по нижнему краю
full-width fullWidth true boolean false

Определяет, растягивать ли на всю ширину родительского элемента.
### События
Название Описание
change

Срабатывает при изменении выбранной вкладки.
### Slots
Название Описание
(по умолчанию)

Элементы <mdui-tab>.
panel

Элементы <mdui-tab-panel>.
### CSS Parts
Название Описание
container

Контейнер элементов <mdui-tab>.
indicator

Индикатор активного состояния.
# Компонент Текстовое поле Текстовое поле позволяет пользователю вводить текст на странице, обычно используется в формах и диалоговых окнах. ## Использование {#usage} При необходимости импортируйте компонент: ```js import 'mdui/components/text-field.js'; ``` При необходимости импортируйте типы TypeScript: ```ts import type { TextField } from 'mdui/components/text-field.js'; ``` Пример использования: ```html ``` ## Примеры {#examples} ### Форма {#example-variant} Используйте атрибут `variant` для установки формы текстового поля. ```html

``` ### Вспомогательный текст {#example-helper-text} Используйте атрибут `label` для задания текста метки над текстовым полем. ```html ``` Используйте атрибут `placeholder` для задания текста-заполнителя, когда поле пусто. ```html ``` Используйте атрибут `helper` для задания вспомогательного текста внизу поля. Также можно использовать слот `helper`. Добавьте атрибут `helper-on-focus`, чтобы вспомогательный текст отображался только при фокусе на поле ввода. ```html Supporting text ``` ### Возможность очистки {#example-clearable} Добавьте атрибут `clearable`, чтобы справа от текстового поля появлялась кнопка очистки, когда поле не пусто. ```html ``` ### Выравнивание текста по правому краю {#example-end-aligned} Добавьте атрибут `end-aligned`, чтобы выровнять текст по правому краю. ```html ``` ### Префиксы, суффиксы и иконки {#example-prefix-suffix} С помощью атрибутов `icon` и `end-icon` можно добавить иконки Material Icons слева и справа от текстового поля. Также можно использовать слоты `icon` и `end-icon`. ```html

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

$ /100 ``` ### Режим только для чтения {#example-readonly} Добавьте атрибут `readonly`, чтобы перевести текстовое поле в режим только для чтения. ```html ``` ### Отключенное состояние {#example-disabled} Добавьте атрибут `disabled`, чтобы отключить текстовое поле. ```html ``` ### Многострочное текстовое поле {#example-rows} Используйте атрибут `rows`, чтобы задать количество строк для многострочного текстового поля. ```html ``` Также можно добавить атрибут `autosize`, чтобы поле автоматически подстраивало высоту под длину вводимого текста. С помощью атрибутов `min-rows` и `max-rows` можно задать минимальное и максимальное количество строк при автоматическом изменении высоты. ```html

``` ### Счетчик символов {#example-counter} Когда атрибут `maxlength` установлен, можно добавить атрибут `counter`, чтобы внизу текстового поля отображался счетчик символов. ```html ``` ### Поле для пароля {#example-password} При установке `type="password"` добавление атрибута `toggle-password` добавляет кнопку переключения видимости пароля справа от поля. ```html ``` ## mdui-text-field API ### Свойства
Атрибут Свойство Reflect Тип По умолчанию Описание
variant variant true 'filled' | 'outlined' 'filled'

Форма текстового поля. По умолчанию filled. Возможные значения:

  • filled — текстовое поле с фоновым цветом, более выраженный визуальный акцент
  • outlined — текстовое поле с рамкой, менее выраженный визуальный акцент
type type true 'text' | 'number' | 'password' | 'url' | 'email' | 'search' | 'tel' | 'hidden' | 'date' | 'datetime-local' | 'month' | 'time' | 'week' 'text'

Тип ввода текстового поля. По умолчанию text. Возможные значения:

  • text — значение по умолчанию. Текстовое поле
  • number — только цифры. На устройствах с динамической клавиатурой отображается цифровая клавиатура
  • password — для ввода пароля, значение скрывается
  • url — для ввода URL, проверяет формат URL. На поддерживаемых устройствах отображается соответствующая клавиатура
  • email — для ввода email, проверяет формат email. На поддерживаемых устройствах отображается соответствующая клавиатура
  • search — для поля поиска. На устройствах с динамической клавиатурой иконка Enter меняется на иконку поиска
  • tel — для ввода номера телефона. На устройствах с динамической клавиатурой отображается цифровая клавиатура телефона
  • hidden — скрывает элемент, но его значение отправляется на сервер
  • date — элемент для ввода даты (год, месяц, день, без времени). В поддерживаемых браузерах при активации открывается выбор даты
  • datetime-local — элемент для ввода даты и времени без часового пояса. В поддерживаемых браузерах при активации открывается выбор даты
  • month — элемент для ввода года и месяца, без часового пояса
  • time — элемент для ввода времени, без часового пояса
  • week — элемент для ввода даты в формате год-неделя, без часового пояса
name name true string ''

Имя текстового поля, будет отправлено вместе с данными формы.
value value false string ''

Значение текстового поля, будет отправлено вместе с данными формы.
undefined defaultValue false string ''

Значение по умолчанию. При сбросе формы восстанавливается именно оно. Это свойство задаётся только через JavaScript.
label label true string

Текст метки.
placeholder placeholder true string

Текст-заполнитель.
helper helper true string

Вспомогательный текст внизу текстового поля. Можно задать через slot="helper".
helper-on-focus helperOnFocus true boolean false

Определяет, показывать ли вспомогательный текст только при фокусе.
clearable clearable true boolean false

Определяет, можно ли очистить текстовое поле.
clear-icon clearIcon true string

Имя иконки Material Icons для кнопки очистки справа, когда поле можно очистить. Можно задать через slot="clear-icon".
end-aligned endAligned true boolean false

Определяет, выравнивать ли текст по правому краю.
prefix prefix true string

Текст-префикс текстового поля. Отображается только при фокусе или когда поле имеет значение. Можно задать через slot="prefix".
suffix suffix true string

Текст-суффикс текстового поля. Отображается только при фокусе или когда поле имеет значение. Можно задать через slot="suffix".
icon icon true string

Имя иконки Material Icons для префикса слева. Можно задать через slot="icon".
end-icon endIcon true string

Имя иконки Material Icons для суффикса справа. Можно задать через slot="end-icon".
error-icon errorIcon true string

Имя иконки Material Icons справа при ошибке валидации поля формы. Можно задать через slot="error-icon".
form form true string

Связанный элемент <form>. В качестве значения укажите id элемента <form> на той же странице.

Если свойство не задано, элемент должен быть дочерним по отношению к <form>. С этим свойством элемент можно разместить в любом месте страницы, а не только внутри <form>.
readonly readonly true boolean false

Только для чтения.
disabled disabled true boolean false

Определяет, отключён ли компонент.
required required true boolean false

Определяет, обязательно ли для заполнения при отправке формы.
rows rows true number

Фиксированное количество отображаемых строк (для <textarea>).
autosize autosize true boolean false

Автоматически подстраивать высоту под содержимое (для <textarea>).
min-rows minRows true number

Минимальное количество строк при autosize=true.
max-rows maxRows true number

Максимальное количество строк при autosize=true.
minlength minlength true number

Минимальное количество символов.
maxlength maxlength true number

Максимальное количество символов.
counter counter true boolean false

Определяет, показывать ли счётчик символов. Действует только при указании maxlength.
min min true number

Минимальное числовое значение (при type="number").
max max true number

Максимальное числовое значение (при type="number").
step step true number

Шаг изменения числового значения (при type="number").
pattern pattern true string

Регулярное выражение для валидации формы.
toggle-password togglePassword true boolean false

При type="password" добавляет кнопку для отображения/скрытия пароля.
show-password-icon showPasswordIcon true string

Имя иконки Material Icons для кнопки отображения пароля. Можно задать через slot="show-password-icon".
hide-password-icon hidePasswordIcon true string

Имя иконки Material Icons для кнопки скрытия пароля. Можно задать через slot="hide-password-icon".
autocapitalize autocapitalize true 'none' | 'sentences' | 'words' | 'characters'

Нестандартный атрибут iOS для управления автокапитализацией. Действует в iOS5 и новее. Возможные значения:

  • none — отключить капитализацию
  • sentences — капитализация первого слова в предложении
  • words — капитализация первого символа каждого слова
  • characters — капитализация всех символов
autocorrect autocorrect true string

Атрибут autocorrect элемента <input>.
autocomplete autocomplete true string

Атрибут autocomplete элемента <input>.
enterkeyhint enterkeyhint true 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send'

Атрибут enterkeyhint элемента <input> для настройки текста или иконки на клавише Enter виртуальной клавиатуры. Отображение зависит от устройства и языка. Возможные значения:

  • enter — вставить новую строку
  • done — готово
  • go — перейти
  • next — далее
  • previous — назад
  • search — поиск
  • send — отправить
spellcheck spellcheck true boolean false

Определяет, включена ли проверка орфографии.
inputmode inputmode true 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url'

Атрибут inputmode элемента <input> для настройки типа виртуальной клавиатуры. Возможные значения:

  • none — без виртуальной клавиатуры. Полезно при реализации собственного ввода
  • text — стандартная текстовая клавиатура
  • decimal — клавиатура для ввода десятичных чисел, может содержать десятичную точку . или запятую ,
  • numeric — цифровая клавиатура (0-9)
  • tel — телефонная клавиатура, содержит цифры 0-9, звёздочку * и решётку #
  • search — клавиатура, оптимизированная для поиска, кнопка отправки обычно показывает search или «Поиск»
  • email — клавиатура, оптимизированная для ввода email, обычно содержит @ и .
  • url — клавиатура, оптимизированная для ввода URL, обычно содержит ., /, #
undefined validity false ValidityState

Объект, содержащий состояние валидации формы. См. ValidityState.
undefined validationMessage false string

Если проверка формы не пройдена, это свойство содержит сообщение об ошибке. Если проверка пройдена, это свойство будет пустой строкой.
undefined valueAsNumber false number

Получает текущее значение в виде числа number; или задаёт значение в виде числа. Если значение не может быть преобразовано в число, возвращается NaN.
autofocus autofocus true boolean false

Определяет, будет ли элемент автоматически получать фокус после загрузки страницы.
tabindex tabIndex false number

Порядок перехода к элементу при нажатии клавиши Tab.
### Методы
Название Описание
select(): void

Выделяет текст в текстовом поле.
setSelectionRange(start: number, end: number, direction: 'forward' | 'backward' | 'none'): void

Выделяет определённый диапазон текста в текстовом поле.
setRangeText(replacement: string, start: number, end: number, selectMode: 'select' | 'start' | 'end' | 'preserve'): void

Заменяет текст в определённом диапазоне на новый текст.
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

Срабатывает при изменении значения и потере фокуса.
input

Срабатывает при изменении значения.
invalid

Возникает, когда поле формы не проходит валидацию.
clear

Срабатывает при клике на кнопку очистки, добавленную свойством clearable. Можно отменить очистку, вызвав event.preventDefault().
### Slots
Название Описание
icon

Иконка слева.
end-icon

Иконка справа.
error-icon

Иконка справа в состоянии ошибки валидации.
prefix

Текст слева.
suffix

Текст справа.
clear-button

Кнопка очистки.
clear-icon

Иконка внутри кнопки очистки.
toggle-password-button

Кнопка переключения видимости пароля.
show-password-icon

Иконка внутри кнопки переключения пароля в режиме отображения пароля.
hide-password-icon

Иконка внутри кнопки переключения пароля в режиме скрытия пароля.
helper

Вспомогательный текст внизу.
### CSS Parts
Название Описание
container

Контейнер текстового поля.
icon

Иконка слева.
end-icon

Иконка справа.
error-icon

Иконка справа в состоянии ошибки валидации.
prefix

Текст слева.
suffix

Текст справа.
label

Текст метки сверху.
input

Внутренний элемент <input> или <textarea>.
clear-button

Кнопка очистки.
clear-icon

Иконка внутри кнопки очистки.
toggle-password-button

Кнопка переключения видимости пароля.
show-password-icon

Иконка внутри кнопки переключения пароля в режиме отображения пароля.
hide-password-icon

Иконка внутри кнопки переключения пароля в режиме скрытия пароля.
supporting

Контейнер вспомогательной информации внизу, включая helper, error, counter.
helper

Вспомогательный текст внизу.
error

Текст ошибки внизу.
counter

Счётчик символов справа внизу.
# Компонент тултипа Тултип используется для отображения дополнительного пояснительного текста или контекстной информации для определенного элемента, помогая пользователю лучше понять его функцию или назначение. ## Использование {#usage} При необходимости импортируйте компонент: ```js import 'mdui/components/tooltip.js'; ``` При необходимости импортируйте типы TypeScript: ```ts import type { Tooltip } from 'mdui/components/tooltip.js'; ``` Пример использования: ```html button ``` ## Примеры {#examples} ### Обычный текстовый тултип {#example-plain} По умолчанию тултип отображает только текст. Содержимое тултипа можно задать через атрибут `content`. ```html button ``` Также можно задать содержимое с помощью слота `content`. ```html button
title
content
 ``` ### Богатый тултип {#example-rich} Установите атрибут `variant` в значение `rich`, чтобы создать богатый тултип. Заголовок можно задать через атрибут `headline`, а содержимое — через `content`. ```html button ``` Также можно использовать слоты `headline` и `content` для задания заголовка и содержимого, а слот `action` — для кнопки действия. ```html button
Rich tooltip
Rich tooltips bring attention to a particular element of feature that warrants the user's focus. It supports multiple lines of informational text.
Action ``` ### Положение {#example-placement} Используйте атрибут `placement` для установки положения тултипа. ```html
``` ### Способ вызова {#example-trigger} Используйте атрибут `trigger` для установки способа вызова тултипа. ```html button ``` ### Задержка открытия/закрытия {#example-delay} Когда способ вызова `hover`, можно задать задержку открытия и закрытия тултипа через атрибуты `open-delay` и `close-delay` (в миллисекундах). ```html button ``` ### Отключенное состояние {#example-disabled} Добавьте атрибут `disabled`, чтобы отключить тултип. ```html button ``` ## mdui-tooltip API ### Свойства
Атрибут Свойство Reflect Тип По умолчанию Описание
variant variant true 'plain' | 'rich' 'plain'

Форма тултипа. По умолчанию plain. Возможные значения:

  • plain — простой текст, подходит для однострочных подсказок
  • rich — расширенный контент, может содержать заголовок, основной текст и кнопки действий
placement placement true 'auto' | 'top-left' | 'top-start' | 'top' | 'top-end' | 'top-right' | 'bottom-left' | 'bottom-start' | 'bottom' | 'bottom-end' | 'bottom-right' | 'left-start' | 'left' | 'left-end' | 'right-start' | 'right' | 'right-end' 'auto'

Расположение тултипа. По умолчанию auto. Возможные значения:

  • auto — автоматическое определение положения. При variant="plain" предпочтение отдаётся top; при variant="rich" — bottom-right
  • top-left — слева сверху
  • top-start — сверху, выравнивание по левому краю
  • top — сверху, по центру
  • top-end — сверху, выравнивание по правому краю
  • top-right — справа сверху
  • bottom-left — слева снизу
  • bottom-start — снизу, выравнивание по левому краю
  • bottom — снизу, по центру
  • bottom-end — снизу, выравнивание по правому краю
  • bottom-right — справа снизу
  • left-start — слева, выравнивание по верхнему краю
  • left — слева, по центру
  • left-end — слева, выравнивание по нижнему краю
  • right-start — справа, выравнивание по верхнему краю
  • right — справа, по центру
  • right-end — справа, выравнивание по нижнему краю
open-delay openDelay true number 150

Задержка открытия тултипа при наведении мыши, в миллисекундах.
close-delay closeDelay true number 150

Задержка закрытия тултипа при наведении мыши, в миллисекундах.
headline headline true string

Заголовок тултипа. Доступно только при variant="rich". Можно задать через slot="headline".
content content true string

Содержимое тултипа. Можно задать через slot="content".
trigger trigger true 'click' | 'hover' | 'focus' | 'manual' | string 'hover focus'

Способ открытия тултипа, можно указать несколько значений через пробел. Возможные значения:

  • click — открытие по клику
  • hover — открытие при наведении мыши
  • focus — открытие при фокусе
  • manual — можно открывать и закрывать только программно, другие способы не указываются
disabled disabled true boolean false

Определяет, отключён ли тултип.
open open true boolean false

Определяет, отображать ли тултип.
### События
Название Описание
open

Срабатывает в начале показа тултипа. Можно отменить показ, вызвав event.preventDefault().
opened

Срабатывает после завершения анимации показа тултипа.
close

Срабатывает в начале скрытия тултипа. Можно отменить скрытие, вызвав event.preventDefault().
closed

Срабатывает после завершения анимации скрытия тултипа.
### Slots
Название Описание
(по умолчанию)

Целевой элемент для тултипа. Используется первый элемент в слоте по умолчанию.
headline

Заголовок тултипа. Действует только при variant="rich".
content

Содержимое тултипа, может содержать HTML. Если нужен только простой текст, можно использовать свойство content.
action

Кнопки действий внизу тултипа. Действует только при variant="rich".
### CSS Parts
Название Описание
popup

Контейнер тултипа.
headline

Заголовок.
content

Основной текст.
action

Кнопки действий.
### Пользовательские CSS-свойства
Название Описание
--shape-corner-plain

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

Размер скругления углов компонента при variant="rich". Можно указать конкретное значение в пикселях, но рекомендуется использовать дизайн-токены.
--z-index

Значение CSS z-index компонента.
# Компонент Верхняя панель приложения Верхняя панель приложения используется для отображения ключевой информации и связанных действий в верхней части страницы, обеспечивая четкую навигацию и удобный доступ к функциям. ## Использование {#usage} При необходимости импортируйте компоненты: ```js import 'mdui/components/top-app-bar.js'; import 'mdui/components/top-app-bar-title.js'; ``` При необходимости импортируйте типы TypeScript компонентов: ```ts import type { TopAppBar } from 'mdui/components/top-app-bar.js'; import type { TopAppBarTitle } from 'mdui/components/top-app-bar-title.js'; ``` Пример использования: (Пример с `style="position: relative"` добавлен только для демонстрации, при реальном использовании удалите этот стиль.) ```html Title
``` **Примечания:** Этот компонент по умолчанию использует позиционирование `position: fixed` и автоматически добавляет стиль `padding-top` к `body`, чтобы содержимое страницы не перекрывалось компонентом. Однако в следующих двух случаях по умолчанию используется позиционирование `position: absolute`: 1. Когда указан атрибут `scroll-target`. В этом случае стиль `padding-top` добавляется к элементу `scroll-target`. 2. Когда компонент находится внутри [``](/ru/docs/2/components/layout). В этом случае стиль `padding-top` не добавляется. ## Примеры {#examples} ### В указанном контейнере {#example-scroll-target} По умолчанию верхняя панель приложения отображается вверху страницы относительно текущего окна. Если вы хотите разместить панель внутри указанного контейнера, укажите атрибут `scroll-target` на компоненте ``. Значением атрибута должен быть CSS-селектор или DOM-элемент контейнера с прокручиваемым содержимым. В этом случае панель будет отображаться относительно родительского элемента (вам нужно самостоятельно добавить родительскому элементу стили `position: relative; overflow: hidden`). ```html
Title
``` ### Форма {#example-variant} Используйте атрибут `variant` на компоненте `` для установки формы панели. ```html
Title
center-aligned small medium large
``` ### Поведение при прокрутке страницы {#example-scroll-behavior} Установите атрибут `scroll-behavior` на компоненте ``, чтобы определить поведение панели при прокрутке страницы. Можно указать несколько действий, разделив их пробелами. Доступные действия: - `hide`: Панель скрывается при прокрутке вниз и показывается при прокрутке вверх. - `shrink`: Действует только когда `variant` имеет значение `medium` или `large`. Панель сжимается при прокрутке вниз и разворачивается при прокрутке вверх. - `elevate`: При прокрутке вниз добавляется тень; при возврате к верху тень убирается. Используйте атрибут `scroll-threshold`, чтобы задать количество пикселей прокрутки, после которого начнется действие панели. (Обратите внимание: для своевременной реакции при использовании `elevate` не следует устанавливать `scroll-threshold`.) **Пример: скрытие при прокрутке** ```html
Title
``` **Пример: добавление тени при прокрутке** ```html
Title
``` **Пример: сжатие при прокрутке** ```html
Title
``` **Пример: сжатие и добавление тени при прокрутке** ```html
Title
``` ### Текст в развернутом состоянии {#label-large} Для панели с `variant` равным `medium` или `large` и `scroll-behavior` равным `shrink`, вы можете установить текст для развернутого состояния с помощью слота `label-large` внутри компонента ``. ```html
Это заголовок в свернутом состоянии Это заголовок в развернутом состоянии
``` ## mdui-top-app-bar-title API ### Slots
Название Описание
(по умолчанию)

Текст заголовка верхней панели приложения.
label-large

Текст заголовка в развёрнутом состоянии (для панелей medium и large).
### CSS Parts
Название Описание
label

Текст заголовка.
label-large

Текст заголовка в развёрнутом состоянии.
## mdui-top-app-bar API ### Свойства
Атрибут Свойство Reflect Тип По умолчанию Описание
variant variant true 'center-aligned' | 'small' | 'medium' | 'large' 'small'

Форма верхней панели приложения. По умолчанию small. Возможные значения:

  • center-aligned — маленькая панель, заголовок по центру
  • small — маленькая панель
  • medium — средняя панель
  • large — большая панель
hide hide true boolean false

Определяет, скрыт ли компонент.
shrink shrink true boolean false

Определяет, должен ли компонент сжиматься до стиля variant="small". Действует только при variant="medium" или variant="large".
scroll-behavior scrollBehavior true 'hide' | 'shrink' | 'elevate'

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

  • hide — скрывать при прокрутке
  • shrink — для средних и больших панелей, сжиматься до стиля маленькой панели при прокрутке
  • elevate — добавлять тень при прокрутке
scroll-target scrollTarget false string | HTMLElement | JQ<HTMLElement>

Элемент, прокрутку которого нужно отслеживать. В качестве значения можно указать CSS-селектор, DOM-элемент или JQ-объект. По умолчанию отслеживается событие scroll объекта window.
scroll-threshold scrollThreshold true number

Пороговое значение прокрутки в пикселях, при котором срабатывает поведение прокрутки.
order order true number

Порядок этого компонента в <mdui-layout> (по возрастанию). По умолчанию 0.
### События
Название Описание
show

Срабатывает в начале появления. Можно отменить появление, вызвав event.preventDefault().
shown

Срабатывает после завершения анимации появления.
hide

Срабатывает в начале скрытия. Можно отменить скрытие, вызвав event.preventDefault().
hidden

Срабатывает после завершения анимации скрытия.
### Slots
Название Описание
(по умолчанию)

Элементы внутри верхней панели приложения.
### Пользовательские CSS-свойства
Название Описание
--shape-corner

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

Значение CSS z-index компонента.
# Библиотека jq mdui включает в себя лёгкую JavaScript-библиотеку, которая предоставляет API и цепочечные вызовы, подобные jQuery, но её размер составляет лишь одну шестую от jQuery. Вы можете импортировать эту библиотеку по мере необходимости: ```js import { $ } from 'mdui/jq.js'; ``` ## Основное {#api-core} ### `$()` {#dollar} Функция имеет несколько вариантов использования: Передайте CSS-селектор, чтобы получить JQ-объект, содержащий соответствующие элементы. ```js $('.box'); ``` Передайте DOM-элемент, любой массив, NodeList или JQ-объект, чтобы получить JQ-объект, содержащий указанные элементы. ```js $(document); ``` Передайте HTML-строку, чтобы получить JQ-объект, содержащий DOM-элементы, созданные на основе этой строки. ```js $(`
`); ``` Передайте функцию, которая будет вызвана после загрузки DOM. ```js $(function () { console.log('DOM Loaded'); }); ``` ## Расширение {#api-extend} ### `$.extend()` {#d-extend} Если передан только один объект, его свойства будут объединены с объектом `$`, что эквивалентно добавлению новых функций в пространство имён `$`. ```js $.extend({ customFunc: function () {}, }); // Затем можно вызывать пользовательский метод так: $.customFunc(); ``` Если передано два или более объектов, свойства всех объектов добавляются к первому объекту, и возвращается объединённый объект. Свойства со значением `undefined` не объединяются. ```js const object = $.extend({ key1: val1 }, { key2: val2 }, { key3: val3 }); // Первый объект и возвращаемое значение будут { key1: val1, key2: val2, key3: val3 } ``` ### `$.fn.extend()` {#fn-extend} Расширяет методы в цепочке прототипов `$`. ```js $.fn.extend({ customFunc: function () {}, }); // Затем можно использовать расширенный метод так: $(document).customFunc(); ``` ## URL {#api-url} ### `$.param()` {#d-param} Преобразует массив или объект в строку запроса URL. ```js $.param({ width: 1680, height: 1050 }); // width=1680&height=1050 $.param({ foo: { one: 1, two: 2 } }); // foo[one]=1&foo[two]=2 $.param({ ids: [1, 2, 3] }); // ids[]=1&ids[]=2&ids[]=3 ``` Если передан массив, его формат должен соответствовать формату, возвращаемому методом [`.serializeArray()`](#serializeArray). ```js $.param([ { name: 'name', value: 'mdui' }, { name: 'password', value: '123456' }, ]); // name=mdui&password=123456 ``` ## Работа с массивами и объектами {#api-array} ### `$.each()` {#d-each} Перебирает массив или объект. Возвращает первый аргумент — перебираемый массив или объект. Первый аргумент функции обратного вызова — индекс массива или ключ объекта, второй — соответствующее значение. Внутри функции обратного вызова `this` указывает на соответствующее значение. Если функция обратного вызова возвращает `false`, перебор прекращается. ```js // Перебор массива $.each(['a', 'b', 'c'], function (index, value) { console.log(index + ':' + value); }); // Результат: // 0:a // 1:b // 2:c ``` ```js // Перебор объекта $.each({ name: 'mdui', lang: 'zh' }, function (key, value) { console.log(key + ':' + value); }); // Результат: // name:mdui // lang:zh ``` ### `$.merge()` {#d-merge} Добавляет элементы второго массива к первому и возвращает объединённый массив. ```js const first = ['a', 'b', 'c']; const second = ['c', 'd', 'e']; const result = $.merge(first, second); console.log(first); // ['a', 'b', 'c', 'c', 'd', 'e'] console.log(result); // ['a', 'b', 'c', 'c', 'd', 'e'] ``` ### `$.unique()` {#d-unique} Удаляет повторяющиеся элементы из массива. ```js const result = $.unique([1, 2, 12, 3, 2, 1, 2, 1, 1, 1, 1]); console.log(result); // [1, 2, 12, 3] ``` ### `$.map()` {#d-map} Перебирает массив или объект и возвращает новый массив, составленный из значений, возвращённых функцией обратного вызова. Первый аргумент функции обратного вызова — значение массива или объекта, второй — индекс массива или ключ объекта. Функция обратного вызова может возвращать любое значение. Если возвращается массив, он будет развёрнут. Если возвращается `null` или `undefined`, это значение игнорируется. Внутри функции обратного вызова `this` указывает на объект `window`. ```js // Перебор массива const result = $.map(['a', 'b', 'c'], function (value, index) { return index + value; }); console.log(result); // ['0a', '1b', '2c'] ``` ```js // Когда функция обратного вызова возвращает массив, он разворачивается const result = $.map([1, 2, 3], function (value, index) { return [value, value + 1]; }); console.log(result); // [1, 2, 2, 3, 3, 4] ``` ```js // Перебор объекта const result = $.map( { name: 'mdui', password: '123456' }, function (value, key) { return key + ':' + value; }, ); console.log(result); // ['name:mdui', 'password:123456'] ``` ### `$.contains()` {#d-contains} Определяет, содержит ли один узел другой. Если родительский узел содержит дочерний, возвращает `true`; в противном случае — `false`. ```js $.contains(document, document.body); // true $.contains(document.body, document); // false ``` ## Определение типов данных {#api-type} ### `.is()` {#is} Определяет, соответствует ли хотя бы один элемент в коллекции переданному аргументу. Если соответствует, возвращает `true`; иначе — `false`. Аргумент может быть CSS-селектором, DOM-элементом, массивом DOM-элементов, JQ-объектом или функцией обратного вызова. Если аргумент — функция обратного вызова, её первый аргумент — индекс, второй — текущий элемент. Внутри функции `this` указывает на текущий элемент. Если функция возвращает `true`, элемент соответствует; если `false` — не соответствует. ```js $('.box').is('.box'); // true $('.box').is('.boxss'); // false $('.box').is($('.box')[0]); // true ``` ```js // Определение по возвращаемому значению функции обратного вызова $(document).is(function (index, element) { return element === document; }); // true ``` ## Доступ к объектам {#api-object} ### `.length` {#length} Возвращает количество элементов в текущей коллекции. ```js $('body').length; // 1 ``` ### `.each()` {#each} Перебирает текущую коллекцию, выполняя функцию для каждого элемента. Если функция возвращает `false`, перебор прекращается. Первый аргумент функции — индекс элемента, второй — текущий элемент. Внутри функции `this` указывает на текущий элемент. ```js $('img').each(function (index, element) { this.src = 'test' + index + '.jpg'; }); ``` ### `.map()` {#map} Перебирает текущую коллекцию, выполняя функцию для каждого элемента, и возвращает новую коллекцию, составленную из возвращённых значений. Функция может возвращать одно значение или массив значений. Если возвращается массив, его элементы поочерёдно добавляются в новую коллекцию. Если функция возвращает `null` или `undefined`, это значение не добавляется. Первый аргумент функции — индекс элемента, второй — текущий элемент. Внутри функции `this` указывает на текущий элемент. ```js const result = $('input.checked').map(function (i, element) { return element.value; }); // result — это JQ-объект, содержащий значения отмеченных элементов ``` ### `.eq()` {#eq} Возвращает новую коллекцию, содержащую только элемент с указанным индексом. ```js $('div').eq(0); // возвращает коллекцию с первым элементом $('div').eq(-1); // возвращает коллекцию с последним элементом $('div').eq(-2); // возвращает коллекцию с предпоследним элементом ``` ### `.first()` {#first} Возвращает новую коллекцию, содержащую только первый элемент текущей коллекции. ```js $('div').first(); // возвращает коллекцию с первым div ``` ### `.last()` {#last} Возвращает новую коллекцию, содержащую только последний элемент текущей коллекции. ```js $('div').last(); // возвращает коллекцию с последним div ``` ### `.get()` {#get} Возвращает элемент с указанным индексом. Если аргумент не передан, возвращает массив всех элементов коллекции. ```js $('div').get(); // возвращает массив всех div $('div').get(0); // возвращает первый div $('div').get(-1); // возвращает последний div ``` ### `.index()` {#index} Если аргумент не передан, возвращает индекс первого элемента текущей коллекции относительно его соседей. Если передан CSS-селектор, возвращает индекс первого элемента текущей коллекции относительно элементов, соответствующих селектору. Если передан DOM-элемент, возвращает его индекс в текущей коллекции. Если передан JQ-объект, возвращает индекс первого элемента этого объекта в текущей коллекции. ```html
``` ```js $('#child3').index(); // 2 $('#child3').index('#child div'); // 2 $('#child div').index($('#child3').get(0)); // 2 ``` ### `.slice()` {#slice} Возвращает подмножество текущей коллекции. Вы можете указать начальную и конечную позиции подмножества (конечный индекс не включается). Если второй аргумент не передан, возвращаются все элементы от начальной позиции до конца коллекции. ```js // Возвращает все элементы, начиная с третьего (включительно) $('div').slice(3); // Возвращает элементы с третьего по пятый (третий включительно, пятый исключительно) $('div').slice(3, 5); ``` ### `.filter()` {#filter} Отфильтровывает из текущей коллекции элементы, соответствующие указанному выражению. Аргумент может быть CSS-селектором, DOM-элементом, массивом DOM-элементов или функцией обратного вызова. Если аргумент — функция обратного вызова, её первый аргумент — индекс элемента, второй — текущий элемент. Внутри функции `this` указывает на текущий элемент. Если функция возвращает `true`, элемент сохраняется; если `false` — удаляется. ```js // Отфильтровывает все div с классом .box $('div').filter('.box'); // Отфильтровывает все выбранные опции $('#select option').filter(function (index, element) { return element.selected; }); ``` ### `.not()` {#not} Отфильтровывает из текущей коллекции элементы, не соответствующие указанному выражению. Аргумент может быть CSS-селектором, DOM-элементом, массивом DOM-элементов, JQ-объектом или функцией обратного вызова, возвращающей `boolean`. Если аргумент — функция обратного вызова, её первый аргумент — индекс элемента, второй — текущий элемент. Внутри функции `this` указывает на текущий элемент. Если функция возвращает `true`, элемент удаляется; если `false` — сохраняется. ```js // Отфильтровывает все div без класса .box $('div').not('.box'); // Отфильтровывает все невыбранные опции $('#select option').not(function (index, element) { return element.selected; }); ``` ## CSS-классы {#api-css} ### `.hasClass()` {#hasClass} Определяет, имеет ли первый элемент коллекции указанный CSS-класс. ```js // Проверяет, есть ли у первого div класс .item $('div').hasClass('item'); ``` ### `.addClass()` {#addClass} Добавляет CSS-классы каждому элементу коллекции. Несколько классов можно разделить пробелами. Аргумент может быть строкой или функцией обратного вызова, возвращающей CSS-классы. Первый аргумент функции — индекс элемента, второй — существующие классы элемента. Внутри функции `this` указывает на текущий элемент. ```js // Добавляет класс .item всем div $('div').addClass('item'); // Добавляет классы .item1 и .item2 всем div $('div').addClass('item1 item2'); // Добавляет классы, возвращённые функцией обратного вызова $('div').addClass(function (index, currentClassName) { return currentClassName + '-' + index; }); ``` ### `.removeClass()` {#removeClass} Удаляет указанные CSS-классы у каждого элемента коллекции. Несколько классов можно разделить пробелами. Аргумент может быть строкой или функцией обратного вызова, возвращающей CSS-классы. Первый аргумент функции — индекс элемента, второй — существующие классы элемента. Внутри функции `this` указывает на текущий элемент. Если аргумент не передан, метод удаляет атрибут `class` у элемента. ```js // Удаляет класс .item у всех div $('div').removeClass('item'); // Удаляет классы .item1 и .item2 у всех div $('div').removeClass('item1 item2'); // Удаляет классы, возвращённые функцией обратного вызова $('div').removeClass(function (index, currentClassName) { return 'item'; }); ``` ### `.toggleClass()` {#toggleClass} Если у элемента есть указанный класс, он удаляется; если нет — добавляется. Несколько классов можно разделить пробелами. Аргумент может быть строкой или функцией обратного вызова, возвращающей CSS-классы. Первый аргумент функции — индекс элемента, второй — существующие классы элемента. Внутри функции `this` указывает на текущий элемент. ```js // Переключает класс .item у всех div $('div').toggleClass('item'); // Переключает классы .item1 и .item2 у всех div $('div').toggleClass('item1 item2'); // Переключает классы, возвращённые функцией обратного вызова $('div').toggleClass(function (index, currentClassName) { return 'item'; }); ``` ## Атрибуты узлов {#api-attr} ### `.prop()` {#prop} Возвращает значение JavaScript-свойства первого элемента коллекции. ```js // Получает значение свойства checked первого input $('input').prop('checked'); ``` Если передано два аргумента, метод устанавливает указанное JavaScript-свойство для всех элементов коллекции. Значение может быть любого типа или результатом функции обратного вызова. Первый аргумент функции — индекс элемента, второй — старое значение свойства. Внутри функции `this` указывает на текущий элемент. Если значение или результат функции равен `undefined`, свойство не изменяется. ```js // Устанавливает checked=true для всех input $('input').prop('checked', true); // Устанавливает свойство через функцию обратного вызова $('input').prop('checked', function (index, oldPropValue) { return true; }); ``` Также можно передать объект для одновременной установки нескольких свойств. ```js // Одновременно устанавливает несколько свойств $('input').prop({ checked: false, disabled: function (index, oldPropValue) { return true; }, }); ``` ### `.removeProp()` {#removeProp} Удаляет указанное JavaScript-свойство у всех элементов коллекции. ```js $('input').removeProp('disabled'); ``` ### `.attr()` {#attr} Возвращает значение HTML-атрибута первого элемента коллекции. ```js // Получает значение атрибута первого div $('div').attr('username'); ``` Если передано два аргумента, метод устанавливает указанный HTML-атрибут для всех элементов коллекции. Значение может быть строкой, числом или результатом функции обратного вызова. Первый аргумент функции — индекс элемента, второй — старое значение атрибута. Внутри функции `this` указывает на текущий элемент. Если значение или результат функции равен `null`, атрибут удаляется; если `undefined` — не изменяется. ```js // Устанавливает атрибут для всех div $('div').attr('username', 'mdui'); // Устанавливает атрибут через функцию обратного вызова $('div').attr('username', function (index, oldAttrValue) { return 'mdui'; }); ``` Также можно передать объект для одновременной установки нескольких атрибутов. ```js // Одновременно устанавливает несколько атрибутов $('div').attr({ username: 'mdui', lastname: function (index, oldAttrValue) { return 'test'; }, }); ``` ### `.removeAttr()` {#removeAttr} Удаляет указанные HTML-атрибуты у всех элементов коллекции. Несколько атрибутов можно разделить пробелами. ```js // Удаляет один атрибут $('div').removeAttr('username'); // Удаляет несколько атрибутов $('div').removeAttr('username lastname'); ``` ### `.val()` {#val} Возвращает значение первого элемента коллекции. Если элемент — ``, ``, `