MUI-компоненты
Руководство по стилизации элементов пользовательского интерфейса с использованием пользовательского интерфейса React Material.
Реагировать на шаблоны
Разделы каждого макета четко определяются либо комментариями, либо использованием отдельных файлов, что упрощает извлечение частей страницы (например, «главного блока» или нижнего колонтитула) для повторного использования на других страницах. Для примеров, состоящих из нескольких частей, таблица в README по ссылке с исходным кодом описывает назначение каждого файла.
Точки останова по умолчанию
Каждая точка останова (ключ) соответствует фиксированной ширине экрана (значению):
- xs , очень маленький: 0 пикселей
- см , маленький: 600 пикселей
- мкр , средний: 900 пикселей
- LG , большой: 1200 пикселей
- xl , очень большой: 1536 пикселей.
cd /d G: O thers r eact v ite-project
npm run dev
http://localhost:5173/
Витрина
Ознакомьтесь с этими общедоступными приложениями, использующими Material UI, чтобы получить вдохновение для своего следующего проекта.
Тематика
Вот утилиты, которые помогут вам настроить тему и изменить ее в браузере.
- Create Material-UI Theme — онлайн-инструмент для создания тем MUI с помощью Material Design Color Tool.
- Генератор тем Material-UI — генератор тем/палитр Material-UI.
- Редактор тем Material-UI — инструмент для создания тем для ваших MUI-приложений путем простого выбора цвета и предварительного просмотра в реальном времени.
Связанные проекты
Семейство проектов Material-UI Design.
- Material-ui-theme-editor — инструмент для создания тем для ваших приложений Material UI с возможностью предварительного просмотра в реальном времени.
- Генератор палитры материалов. Официальный генератор палитр Material Design можно использовать для создания палитры любого цвета по вашему выбору.
- Дополнительные компоненты — предоставляет набор «молекулярных» компонентов, созданных поверх Material-UI, таких как нижний колонтитул, CookiesBanner, кнопка BackToTop и другие сложные элементы, легко настраиваемые, чтобы помочь разработчикам очень быстро создавать макросы своего пользовательского интерфейса. Эти компоненты часто дублируются на разных сайтах — эта библиотека решает именно эту проблему.
- React Admin — интерфейсная платформа для создания приложений администрирования, работающих в браузере, поверх API REST/GraphQL с использованием ES6, React и Material Design.
- Material UI Snippets — расширение VSCode, предоставляющее фрагменты.
- Material UI Codemorphs — расширение VSCode, предоставляющее кодовые моды.
- Eslint: обнаружение неиспользуемых классов — плагин ESLint для обнаружения неиспользуемых классов стилей с помощью
@mui/styles .
Компоненты
Список компонентов пользовательского интерфейса, созданных с помощью Material-UI Design.
- Поле пароля Material-UI — поле пароля с использованием Material-UI.
- Полноэкранный диалог — полноэкранный диалог для Material-UI.
- Загрузка Material-UI — загрузка элементов управления, созданных в Material-UI, с использованием FileAPI.
- Поле Super Select — компонент раскрывающегося списка автозаполнения с множественным выбором для Material-UI.
- Форма схемы материала JSON — форма пользовательского интерфейса материала, созданная из json.
- Notistack — простые закусочные панели для Material-UI (так что вам не придется иметь дело с их открытым/закрытым состоянием).
- Material-UI Dropzone — компонент Material-UI, построенный на основе React-Dropzone.
- Formik-Material-UI — привязки для использования Material-UI с formik.
- Redux-Form-Material-UI — компоненты-оболочки для облегчения использования Material-UI с Redux Form.
- Final-Form-Material-UI — компоненты-оболочки для облегчения использования Material-UI с Final Form.
- Автоматически вращающаяся карусель Material-UI — карусель в стиле материала.
- Material-UI Image — изображение в стиле Material с анимацией загрузки.
- Material-UI Flat Pagination — компонент нумерации страниц с плоским дизайном для Material-UI.
- Dx-react-scheduler-Material-UI — компонент планировщика/календаря для Material-UI.
- Dx-react-chart-Material-UI — диаграммы для Material-UI, которые визуализируют данные с использованием различных типов рядов, включая столбцы, линии, площади, разбросы, круговые диаграммы и т. д.
- Блог Material-UI Medium — расширенный компонент Material-UI Card для отображения блогов Medium.
- React Github Repo Cards — расширенный компонент Material-UI Card для отображения репозиториев GitHub.
- Реагировать на молекулы-компоненты — Реагировать на молекулы-компоненты на основе Material-UI.
- Material-UI NestedMenuItem — замена MenuItem MUI с бесконечно вложенными меню, открывающимися при наведении курсора мыши.
- React-planet — создавайте круглые меню, похожие на планеты.
