mdui

官网 | 文档

mdui — это библиотека веб-компонентов для разработки пользовательского интерфейса, которая следует принципам Material You.

• Веб-компоненты: все компоненты mdui разработаны с использованием веб-компонентов, что делает их использование таким же простым, как и работу с тегом <div>.
• Material You: mdui соответствует последним стандартам Material Design 3 (Material You), обеспечивая привлекательный и удобный дизайн для ваших продуктов.
• Динамическая цветовая схема: mdui может автоматически генерировать полную цветовую схему на основе заданного цвета или изображения, применяя её ко всем компонентам mdui.
• Тёмный режим: все компоненты поддерживают тёмный режим и автоматически переключаются между светлым и тёмным режимами в зависимости от настроек операционной системы.
• Лёгкий вес: после сжатия CSS и JavaScript занимают всего 85 КБ, что обеспечивает быструю загрузку и возможность дальнейшего уменьшения размера при необходимости.
• Поддержка IDE: в VSCode и WebStorm доступны идеальные подсказки кода, а также предоставляются расширения для VSCode и плагины для WebStorm для более удобной разработки.
• Совместимость с различными фреймворками: mdui совместим с Vue, React, Angular и другими фреймворками, позволяя использовать его в любых браузерных приложениях.
• TypeScript поддерживается: mdui полностью разработан на TypeScript и обладает идеальными подсказками типов.
• Без зависимостей: не требует внешних библиотек, что экономит трафик и ускоряет загрузку.
• Богатый набор компонентов: mdui включает более 30 компонентов и десятки служебных функций, предоставляя все необходимые инструменты.
• Библиотека иконок Material Icons: содержит более 10 000 иконок, которые можно импортировать по мере необходимости.
• Низкие затраты на обучение: для использования mdui достаточно иметь базовые знания HTML, CSS и JavaScript.

Установка

npm install mdui --save

Импорт CSS и JS файлов

import 'mdui/mdui.css';
import 'mdui';

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

<mdui-button>Button</mdui-button>

Поддержка проекта

Поддержка проекта позволяет продолжать его развитие.