# mdui v2 Documentation

mdui is an front-end component library based on Material Design 3, using Web Components, supporting dynamic colors, dark mode, and lightweight efficiency.

## Начало работы

- [Обзор](https://www.mdui.org/ru/docs/2/index.md): mdui — библиотека Web Components с 50+ компонентами Material Design 3. Поддерживает тёмный режим, локализацию и TypeScript. Создавайте современные и быстрые приложения.
- [Установка](https://www.mdui.org/ru/docs/2/getting-started/installation.md): Установка mdui через npm, pnpm или CDN. Поддержка полной и выборочной загрузки компонентов для уменьшения веса проекта. Легкая интеграция в любые веб-приложения.
- [Быстрый старт](https://www.mdui.org/ru/docs/2/getting-started/usage.md): mdui базируется на Web Components. Подробности использования атрибутов, методов, событий и слотов. Узнайте всё про Shadow DOM и кастомизацию CSS Part для ваших проектов.
- [Поддержка TypeScript](https://www.mdui.org/ru/docs/2/getting-started/typescript-support.md): mdui написан на TypeScript и предоставляет полные определения типов. Используйте автодополнение и проверку типов в IDE для повышения качества кода и скорости работы.
- [Поддержка IDE](https://www.mdui.org/ru/docs/2/getting-started/ide-support.md): Оптимизация для VS Code и WebStorm. Получайте подсказки и автодополнение через npm или расширения. Поддержка данных HTML и CSS значительно ускоряет разработку UI.
- [Локализация](https://www.mdui.org/ru/docs/2/getting-started/localization.md): Локализация с 50+ языковыми пакетами. Поддержка ленивой, предварительной и статической загрузки через CDN или npm. Глобальные приложения с событиями локализации.
- [Часто задаваемые вопросы](https://www.mdui.org/ru/docs/2/getting-started/faq.md): Частые вопросы сообщества mdui и ответы на них. Решения для самозакрывающихся тегов, предотвращения FOUC и советы по отладке. Полезные примеры кода для всех нужд.

## Разработка с помощью ИИ

- [LLMs.txt](https://www.mdui.org/ru/docs/2/ai/llms.md): mdui предоставляет файлы llms.txt и llms-full.txt для точного контекста LLM. Документация в формате Markdown поддерживает вставку и загрузку, повышая точность ответов ИИ.
- [MCP-сервер](https://www.mdui.org/ru/docs/2/ai/mcp.md): @mdui/mcp интегрирует MCP-серверы для AI-агентов. Запрашивайте атрибуты, Material Icons и дизайн-токены напрямую, упрощая автоматическое написание кода в вашей IDE.

## Стили

- [Тёмный режим](https://www.mdui.org/ru/docs/2/styles/dark-mode.md): Все компоненты поддерживают тёмный режим. Управление через системные настройки или вручную через setTheme. Глобальное и локальное переопределение тем для любого сценария.
- [Динамический цвет](https://www.mdui.org/ru/docs/2/styles/dynamic-color.md): Автоматическая генерация светлых и тёмных палитр на основе цвета или изображения. Функции setColorScheme и getColorFromImage создают гармоничные темы для вашего дизайна.
- [Типографика](https://www.mdui.org/ru/docs/2/styles/prose.md): Утилиты mdui-prose и mdui-table оптимизируют верстку статей и таблиц. Получите элегантную типографику и отступы для любого динамического контента или Markdown без усилий.
- [Дизайн-токены](https://www.mdui.org/ru/docs/2/styles/design-tokens.md): Дизайн-токены через CSS-переменные. Более 100 токенов для цветов, радиусов и шрифтов. Настройте их для создания уникального и единого визуального стиля вашего приложения.

## Интеграция с фреймворками

- [Интеграция с React](https://www.mdui.org/ru/docs/2/frameworks/react.md): mdui на базе Web Components бесшовно интегрируется в React. Полная поддержка TypeScript, привязка событий и синхронизация свойств. Выбор для современных веб-стеков.
- [Интеграция с Vue](https://www.mdui.org/ru/docs/2/frameworks/vue.md): Простая интеграция с Vue через настройку компилятора. Поддержка v-model, событий и полная типизация TypeScript. Умные подсказки в IDE для быстрой работы в приложении.
- [Интеграция с Angular](https://www.mdui.org/ru/docs/2/frameworks/angular.md): Для Angular нужна настройка CUSTOM_ELEMENTS_SCHEMA. Руководства по интеграции, поддержка DI и двустороннего связывания. Полные определения типов в TS для вашего проекта.
- [Интеграция с другими фреймворками](https://www.mdui.org/ru/docs/2/frameworks/others.md): mdui основан на стандартах Web Components и работает с любым фреймворком: Svelte, Next.js, Nuxt и др. Универсальные методы интеграции и рекомендации по лучшим практикам.

## Компоненты

- [Компонент аватара](https://www.mdui.org/ru/docs/2/components/avatar.md): Аватар представляет пользователя или бренд через фото, иконку или текст. Круглые и квадратные формы разных размеров. Идеально для профилей, комментариев и карточек.
- [Компонент бейджа](https://www.mdui.org/ru/docs/2/components/badge.md): Бейдж отображает счетчики или метки статуса. Малый и большой размеры с цифрами или текстом. Легко прикрепляется к другим компонентам для уведомлений и индикаторов.
- [Компонент Нижняя панель приложения](https://www.mdui.org/ru/docs/2/components/bottom-app-bar.md): Нижняя панель приложения для мобильных устройств. Интеграция FAB, элементов навигации и меню действий. Поддержка фиксации, скрытия при скролле и кастомных стилей темы.
- [Компонент кнопки](https://www.mdui.org/ru/docs/2/components/button.md): Кнопка поддерживает стили: elevated, filled, tonal, outlined и text. Иконки, загрузка и полная доступность по гайдам Material Design 3. Идеальный выбор для любых форм.
- [Компонент Кнопка с иконкой](https://www.mdui.org/ru/docs/2/components/button-icon.md): Иконка-кнопка для вторичных действий: стандартная, заполненная, тональная и контурная. Поддержка загрузки и ссылок. Отлично подходит для тулбаров и заголовков карточек.
- [Компонент карточки](https://www.mdui.org/ru/docs/2/components/card.md): Карточка — контейнер для контента. Варианты: elevated, filled и outlined. Поддержка кликов, ссылок и медиа-файлов для гибкого проектирования современного интерфейса.
- [Компонент чекбокса](https://www.mdui.org/ru/docs/2/components/checkbox.md): Чекбокс позволяет выбирать несколько опций одновременно. Поддержка состояний: выбрано, не выбрано и неопределенно. Кастомные иконки, валидация и полная поддержка форм.
- [Компонент чипа](https://www.mdui.org/ru/docs/2/components/chip.md): Чипы для ввода, выбора или фильтрации. Варианты: assist, filter, input и suggestion. Поддержка выбора и удаления, идеально подходит для категорий и компактных данных.
- [Компонент Круговой индикатор прогресса](https://www.mdui.org/ru/docs/2/components/circular-progress.md): Круговой индикатор отображает прогресс в виде кольца. Определенный режим и анимация спиннера. Кастомные размеры и цвета для кнопок, загрузок или обновлений контента.
- [Компонент Раскрывающийся блок](https://www.mdui.org/ru/docs/2/components/collapse.md): Раскрывающийся блок группирует контент для экономии места. Режим аккордеона, кастомные триггеры и анимация. Идеально для разделов FAQ и сложных страниц с настройками.
- [Компонент Диалоговое окно](https://www.mdui.org/ru/docs/2/components/dialog.md): Диалог для важной информации или принятия решений. Заголовки, иконки, модальные или полноэкранные режимы. Включает готовые функции: alert, confirm и программный prompt.
- [Компонент разделителя](https://www.mdui.org/ru/docs/2/components/divider.md): Разделитель обеспечивает визуальное разделение списков и слоев. Горизонтальный и вертикальный режимы, кастомные отступы. Базовый инструмент для иерархии интерфейса.
- [Компонент Выпадающее меню](https://www.mdui.org/ru/docs/2/components/dropdown.md): Выпадающее меню открывается по клику или наведению. Разные режимы триггера, автопозиционирование и задержки для насыщенного взаимодействия. Интегрируется с компонентами.
- [Компонент Плавающая кнопка действия (FAB)](https://www.mdui.org/ru/docs/2/components/fab.md): FAB выделяет главное действие. Обычная и расширенная формы, три размера, иконки и цвета. Быстрый доступ к функциям с поддержкой индикатора загрузки и ссылок в приложении.
- [Компонент иконки](https://www.mdui.org/ru/docs/2/components/icon.md): Иконка представляет действия через Material Icons или SVG. Настройка размера, цвета и поворота через CSS. Улучшает узнаваемость UI в составе кнопок, меню и навигации.
- [Компонент Layout](https://www.mdui.org/ru/docs/2/components/layout.md): Layout организует панели приложения, боковые меню и область контента. Гибкая сетка с кастомными Breakpoint и отступами для создания каркасов любых веб-страниц приложения.
- [Компонент Линейный индикатор прогресса](https://www.mdui.org/ru/docs/2/components/linear-progress.md): Индикатор отображает прогресс горизонтально. Определенный и неопределенный (буферизация) режимы. Кастомные цвета и высота для любых процессов загрузки в вашем дизайне.
- [Компонент списка](https://www.mdui.org/ru/docs/2/components/list.md): Список вертикальных элементов для навигации и контактов. Одна, две или три строки с аватарами и ссылками. Настраиваемая разметка и контент для ваших структур данных.
- [Компонент меню](https://www.mdui.org/ru/docs/2/components/menu.md): Меню отображает вертикальные действия. Поддержка режимов выбора, вложенных подменю и горячих клавиш. Идеально для контекстных меню и построения навигационных интерфейсов.
- [Компонент Панель навигации](https://www.mdui.org/ru/docs/2/components/navigation-bar.md): Панель навигации для мобильных на 3-5 пунктов. Автоматические метки, иконки и бейджи. Скрытие при скролле и кастомные контейнеры. Идеально для навигации в приложении.
- [Компонент Выдвижная панель навигации](https://www.mdui.org/ru/docs/2/components/navigation-drawer.md): Выдвижная панель навигации сбоку. Модальный и немодальный режимы для левой или правой стороны. Инфо о пользователе, списки и разделители для мобильных и десктоп сайтов.
- [Компонент Боковая панель навигации](https://www.mdui.org/ru/docs/2/components/navigation-rail.md): Панель навигации обеспечивает компактное перемещение сбоку для планшетов и ПК. Поддержка бейджей, разделителей и выравнивания. Добавляйте иконки и текстовые подписи.
- [Компонент радиокнопки](https://www.mdui.org/ru/docs/2/components/radio.md): Радиокнопки для выбора одного из взаимоисключающих вариантов. Гарантирует выбор только одной опции. Кастомные иконки и поддержка заблокированного состояния в формах.
- [Компонент Слайдер диапазона](https://www.mdui.org/ru/docs/2/components/range-slider.md): Слайдер диапазона с двумя ползунками. Дискретный шаг, кастомные метки и валидация. Широко используется для задания цен, временных интервалов или технических параметров.
- [Компонент Выпадающий список](https://www.mdui.org/ru/docs/2/components/select.md): Выпадающий список позволяет выбирать элементы. Поддержка меток, валидации и иконок. Идеально для бизнес-логики, ввода данных и сложных систем фильтрации информации в UI.
- [Компонент Сегментированная кнопка](https://www.mdui.org/ru/docs/2/components/segmented-button.md): Сегментированная кнопка для выбора опций или переключения видов. Поддержка иконок, ссылок и кастомных стилей. Основной компонент для создания элементов управления в UI.
- [Компонент слайдера](https://www.mdui.org/ru/docs/2/components/slider.md): Слайдер для выбора значений с контролем шага и меток. Валидация, автофокус и кастомные метки. Идеально для громкости, яркости или фильтрации нужных числовых диапазонов.
- [Компонент снэкбара](https://www.mdui.org/ru/docs/2/components/snackbar.md): Снэкбар дает обратную связь с кнопками действий и автоскрытием. Кастомные цвета, позиции и программный вызов для улучшения пользовательского опыта в вашем приложении.
- [Компонент переключателя](https://www.mdui.org/ru/docs/2/components/switch.md): Переключатель для мгновенного изменения настроек. Кастомные иконки, цвета и размеры. Идеально для страниц настроек, управления доступом и предпочтениями пользователей.
- [Компонент вкладок](https://www.mdui.org/ru/docs/2/components/tabs.md): Вкладки переключают виды в одной области. Стили primary и secondary, значки и индикаторы. Идеально для навигации по категориям и разделения контента на логические части.
- [Компонент Текстовое поле](https://www.mdui.org/ru/docs/2/components/text-field.md): Текстовое поле для ввода паролей, почты и многого другого. Содержит метки, иконки и валидацию. Полная доступность и автовысота. Основной элемент ввода для любых форм.
- [Компонент тултипа](https://www.mdui.org/ru/docs/2/components/tooltip.md): Тултип показывает инфо при наведении или фокусе. Поддержка форматированного текста, позиционирования и задержек. Помогает понять функции и возможности элементов в UI.
- [Компонент Верхняя панель приложения](https://www.mdui.org/ru/docs/2/components/top-app-bar.md): Верхняя панель для заголовков и действий. Разные стили, эффекты прокрутки и кастомные кнопки. Унифицированный заголовок для легкой навигации и управления функциями в UI.

## Функции

- [Библиотека jq](https://www.mdui.org/ru/docs/2/functions/jq.md): Встроенная библиотека jq с API как у jQuery, но в шесть раз легче. Поддержка цепочек вызовов, событий и анимаций без внешних зависимостей. Ускоряет работу с Shadow DOM.
- [Функция dialog](https://www.mdui.org/ru/docs/2/functions/dialog.md): Программная обертка для mdui-dialog. Открывайте окна из JavaScript без лишнего HTML. Кастомные заголовки, кнопки и возврат Promise для обработки действий пользователя.
- [Функция alert](https://www.mdui.org/ru/docs/2/functions/alert.md): Современная замена window.alert на базе mdui-dialog. Показывайте тематические диалоги с кастомными заголовками и кнопками без блокировки процесса рендеринга страницы.
- [Функция confirm](https://www.mdui.org/ru/docs/2/functions/confirm.md): Замена window.confirm в стиле Material Design 3. Показывайте программные подтверждения и обрабатывайте выбор через Promise для большего контроля и красоты интерфейса.
- [Функция prompt](https://www.mdui.org/ru/docs/2/functions/prompt.md): Замена window.prompt в стиле Material Design 3. Поле ввода в диалоге с валидацией и типами. Возврат Promise со значением. Удобно для захвата быстрых данных в приложении.
- [Функция snackbar](https://www.mdui.org/ru/docs/2/functions/snackbar.md): Программный вызов mdui-snackbar. Быстрые уведомления с кнопками действий, настройкой длительности и позиции. Не требует HTML-кода для мгновенной обратной связи в UI.
- [Функция getTheme](https://www.mdui.org/ru/docs/2/functions/getTheme.md): Получите настройки темы для страницы или элементов. Поддержка светлого, тёмного и авто режимов. Помогает адаптировать логику или стили под активную тему пользователя.
- [Функция setTheme](https://www.mdui.org/ru/docs/2/functions/setTheme.md): Динамическая настройка темы (светлая, тёмная, авто) для страницы или элементов. Поддержка глобального и локального переопределения для гибкого пользовательского опыта.
- [Функция getColorFromImage](https://www.mdui.org/ru/docs/2/functions/getColorFromImage.md): Извлечение доминирующих цветов из изображений в HEX. Работает в паре с setColorScheme для автоматического создания гармоничных палитр, соответствующих вашему контенту.
- [Функция setColorScheme](https://www.mdui.org/ru/docs/2/functions/setColorScheme.md): Генерация палитр Material Design 3 из одного цвета. Поддержка глобальных и локальных настроек для быстрого брендинга и создания целостной цветовой схемы приложения.
- [Функция removeColorScheme](https://www.mdui.org/ru/docs/2/functions/removeColorScheme.md): Удаляйте пользовательские цветовые схемы для возврата к стандартной палитре. Применимо глобально или к элементам. Идеально для сброса стилей и программной смены тем.
- [Функция loadLocale](https://www.mdui.org/ru/docs/2/functions/loadLocale.md): Загрузка языковых пакетов для локализации. Поддержка ленивых, предварительных и статических методов для 50+ языков. Оптимизировано для высокой производительности сайта.
- [Функция setLocale](https://www.mdui.org/ru/docs/2/functions/setLocale.md): Динамическая настройка кода языка с асинхронной поддержкой. Автоматически обновляет текст во всех компонентах для бесшовной локализации без перезагрузки всей страницы.
- [Функция getLocale](https://www.mdui.org/ru/docs/2/functions/getLocale.md): Получение кода текущего языка приложения. Используйте для определения окружения, загрузки ресурсов или смены Layout. Возвращает простые строки кодов (ru, en, zh-cn).
- [Функция throttle](https://www.mdui.org/ru/docs/2/functions/throttle.md): Создание функций с ограничением частоты выполнения. Идеально для событий скролла или изменения размера окна, значительно повышая общую производительность приложения.
- [Функция observeResize](https://www.mdui.org/ru/docs/2/functions/observeResize.md): Мониторинг изменения размеров элементов через ResizeObserver API. Вызов колбэков для адаптивных Layout или контейнеров. Включает простые методы для очистки ресурсов.
- [Функция breakpoint](https://www.mdui.org/ru/docs/2/functions/breakpoint.md): Проверьте текущий адаптивный Breakpoint: xs, sm, md, lg, xl или xxl. Оценивайте ширину окна или диапазон для реализации сложной логики отзывчивого интерфейса в коде.

## Библиотеки

- [Библиотека иконок @mdui/icons](https://www.mdui.org/ru/docs/2/libraries/icons.md): Библиотека Material Icons со всеми иконками Google. Оптимизирована для Tree-shaking и импорта по требованию, что значительно уменьшает итоговый размер бандла проекта.