Material UI - это библиотека компонентов для React, изобилующая мощными компонентами, которые вы должны использовать в своих проектах. Если вы просто хотите создать красивое приложение, Material UI может предоставить вам надежные предварительно стилизованные компоненты, которые выполнят свою работу. Если вы хотите настроить эти компоненты, Material UI также предоставляет вам инструменты для этого.
Чтобы начать работу с Material UI, просто:
npm install @material-ui/core И не забудьте добавить Roboto в свой index.html:
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />Теперь вы можете приступить к импорту таких компонентов:
Давайте рассмотрим 5 компонентов, которые гарантированно улучшат ваш проект.
1. Сетка
Компонент Grid дает вам возможность создавать макет для вашего раздела DOM. Если вы когда-либо использовали Bootstrap, это будет вам знакомо. Это первый компонент, который я рассматриваю при разработке своих приложений MUI.
Основные сведения о компоненте Grid:
- Существует 2 типа компонентов сетки: «контейнер» и «элемент». Контейнер является самым внешним компонентом, и все дочерние элементы этого компонента должны иметь значение «item».
- В системе Grid используется 12 разделов. При определении ширины элементов в сумме должно быть до 12.
2. Бумага
Компонент Paper - один из моих любимых, так как он придает секции некоторый подъем и отбрасывает тень для создания бумажного вида. Это идеально подходит для любых карт, которые вы делаете.
Основные сведения о компоненте Paper:
- Вы можете контролировать тень с помощью свойства «высота».
- Вы можете придать бумаге очертание, используя
variant="outlined", хотя я предпочитаю без схемы.
Https://material-ui.com/components/paper/
3. Значки материалов
Один из лучших способов сделать ваше приложение профессиональным - это иметь узнаваемые и интуитивно понятные значки. Пользовательский интерфейс материала предоставляет набор значков, которые легко импортировать и реализовать. Больше не нужно копаться в Интернете или пытаться понять, как работают значки Font Awesome. В Material UI они встроены бесплатно.
Основные сведения о компонентах значков материалов:
- Их необходимо установить отдельно с помощью
npm install @material-ui/icons - Существует 5 вариантов каждого значка: «заполненный», «контурный», «округлый», «двухцветный», «резкий».
Https://material-ui.com/components/material-icons/
4. Закусочная
Snackbar - один из самых забавных и полезных способов сообщить пользователю, что что-то произошло в вашем приложении. Например, если вы хотите сообщить пользователю, что его изображение профиля было загружено. Или, если вы хотите, чтобы пользователь знал, что его имя пользователя было занято, Snackbar может быть подходящим компонентом для работы.
Основные сведения о компоненте Snackbar:
- Чтобы изменить, отображается ли Snackbar или нет, вы должны изменить состояние.
- В то время как другие компоненты немного проще реализовать, для этого требуется некоторое понимание того, как они работают, чтобы заставить их работать так, как вы хотите. Но конечный результат всегда радует!
Https://material-ui.com/components/snackbars/
5. Подсказка
Не спите во всплывающей подсказке. Хотя это может показаться тривиальным, всплывающие подсказки в вашем приложении помогают пользователям понять, что именно делает каждый из ваших значков. Если ваши значки не сразу интуитивно понятны, пользователи могут не знать, что они означают, если у них нет всплывающей подсказки. Я рекомендую прочитать Интуитивный дизайн Эверетта Маккея для получения дополнительной информации о том, как сделать ваше приложение интуитивно понятным.
Что делает компонент всплывающей подсказки Material UI таким замечательным, так это то, что вы можете в значительной степени обернуть его вокруг любого другого компонента, и он выполнит свою работу.
- Всплывающим подсказкам можно дать определенное направление для появления. С помощью свойства размещения можно указать 12 вариантов размещения.
- Если вы действительно хотите погрузиться в подробности, вы можете настроить внешний вид всплывающей подсказки и сделать ее по-своему.
Https://material-ui.com/components/tooltips/
Это всего лишь 5 замечательных компонентов из библиотеки UI материалов. Мы даже не узнали, как настроить компоненты или экспериментальные «лабораторные» дополнения к библиотеке.
Для получения дополнительной информации о Material UI вы, конечно, можете посетить замечательную документацию здесь:
Если вы хотите узнать о других библиотеках React, вы можете прочитать мою статью:
Спасибо за прочтение. Чтобы увидеть больше подобных статей, подпишитесь на меня на Medium и добавьте меня в Twitter @thedrewprint и LinkedIn - Эндрю Ричардс
