MDUIDocs
Копировать ссылку llms.txtКопировать ссылку llms-full.txtПросмотреть страницу в MarkdownОбсудить страницу с ChatGPTОбсудить полную документацию проекта с ChatGPT
Предустановленный цвет
Пользовательский цвет
Извлечь цвет из обоев
Пожалуйста, выберите обои
Начало работы
Обзор Установка Быстрый старт Поддержка TypeScript Поддержка IDE Локализация Часто задаваемые вопросы
Разработка с помощью ИИ
Стили
Интеграция с фреймворками
Компоненты
Функции
Библиотеки

Обзор

Давайте начнём использовать mdui с подключения через CDN и простейшего шаблона страницы.

Вы читаете документацию mdui 2!

Если вам нужна документация mdui 1, посетите www.mdui.org/docs/.

Быстрый старт

Самый простой способ начать использовать mdui — подключить CSS и JS файлы непосредственно с CDN.

Если вы хотите установить mdui через npm, обратитесь к разделу Установка.

Подключение файлов

Добавьте следующий код в раздел <head> вашей страницы:

<link rel="stylesheet" href="https://unpkg.com/mdui@2/mdui.css" />
<script src="https://unpkg.com/mdui@2/mdui.global.js"></script>

Если вы используете атрибуты иконок компонентов (например, атрибут icon в <mdui-button icon="search"></mdui-button>), дополнительно подключите CSS-файл с иконками. См. Использование иконок Material Icons.

mdui не зависит от сторонних библиотек. После подключения указанных файлов всё работает.

Простейший шаблон страницы

Ниже приведён простейший шаблон страницы. Вы можете добавлять в него компоненты и контент для построения сайта.

<!doctype html>
<html lang="ru">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, shrink-to-fit=no"/>
    <meta name="renderer" content="webkit"/>

    <link rel="stylesheet" href="https://unpkg.com/mdui@2/mdui.css">
    <script src="https://unpkg.com/mdui@2/mdui.global.js"></script>
    <!-- Если используются атрибуты icon, дополнительно подключите CSS-файл иконок -->

    <title>Привет, мир!</title>
  </head>
  <body>
    <mdui-button>Привет, мир!</mdui-button>
  </body>
</html>
На этой странице