Введение в значки пользовательского интерфейса материалов в React
Здравствуйте, Бонжур и Гутен Таг.
Мы уже много раз говорили об этом и не устанем повторять, что при разработке проекта нет мелочей. Причина этого убеждения в том, что в современную цифровую эпоху вы не просто продаете свой продукт. Вы также продаете опыт, удобство и эмоции, потому что в наше время рынок перенасыщен возможностями для потенциального клиента. Вот почему важна каждая мелочь.
Тем не менее, основная тема нашей сегодняшней статьи — Значки пользовательского интерфейса материала, может очень легко показаться несущественным, но это определенно не так. Значки пользовательского интерфейса материалов, особенно в связи с React, призваны помочь вам улучшить свой проект, будь то сайт, приложение или что-то еще, и, таким образом, улучшить взаимодействие с потенциальным клиентом, что может привести к метафорическим масштабам их выбор взвешивает в вашем направлении.
Не поймите неправильно, мы не говорим, что они одни могут сделать это за вас. Мы говорим о них как о части целого комплекса мелочей. И мы обязательно поговорим о каждом из них в свое время. Но сегодня мы сосредоточимся на значках пользовательского интерфейса React Material и только на них, чтобы отдать должное им. Это значит смотреть на:
Как их можно использовать с React;
Как импортировать значок React Material-UI для вашего проекта.
Итак, без лишних слов, перейдем к первому и второму пунктам упомянутого выше списка.
Что такое материальные значки пользовательского интерфейса и как их использовать
Грубо говоря, Material UI Icons — это набор готовых значков, которые представляют команду, файл, устройство или каталог. Они также могут использоваться для обозначения частых операций и экономии и обычно размещаются в приложениях и / или на панелях инструментов. Такие значки используются с целью создания удобного ярлыка для любого действия на сайте или в приложении, а также для замены длинных словесных описаний легко понятным для пользователя значком. Значки пользовательского интерфейса материалов в основном состоят из двух компонентов: SvgIcon и Icon.
Когда дело доходит до значков пользовательского интерфейса материалов, компонент SVG служит дочерним элементом пути SVG и преобразует его в компонент React. Этот компонент React позволяет настраивать стиль значка и реакцию, которую он производит после щелчка. Также следует отметить, что размер указанного значка должен составлять 24 × 24 пикселя, но мы забегаем вперед. Второй компонент, который является компонентом Icon, предназначен для отображения значка из любого шрифта значка с включенной лигатурой.
«При чем здесь React?» — спросите вы. И ответ довольно прост: вы также можете использовать их при создании проекта с помощью React, что хорошо, потому что это позволяет вам держать эту задачу в фокусе вашего внимания без необходимости переключаться. И здесь даже нет никаких подводных камней, так как упаковка уже готова и готова к использованию. Хотя следует сказать, что значки пользовательского интерфейса материала — это не все и не заканчивают все значки пользовательского интерфейса, так как на рынке есть множество других пакетов. Итак, почему его выбрали? На наш взгляд, вам следует выбрать их, потому что они гладкие, стильные, минималистичные и поддерживаются всеми основными платформами, а также браузерами. Но самое приятное то, что они были созданы Google. И этот мастодонт корпорации кое-что знает о создании компонентов сайта.
Итак, вот оно. Теперь давайте подробнее рассмотрим процесс создания и использования указанных значков в вашем проекте.
Как импортировать значок пользовательского интерфейса React Material для вашего проекта
Итак, допустим, вы создаете веб-сайт для своего потрясающего проекта и хотите сделать его более красочным, ярким и, смею сказать, более доступным во всем мире. Вот где вам могут помочь значки пользовательского интерфейса материала, поскольку они отмечают все вышеупомянутые поля. Итак, прежде всего, вот небольшое руководство по добавлению готовых иконок UI в свой проект.
Шаг 1. Установка фреймворка Material UI. Первое и самое главное, что нужно сделать, — это установить фреймворк Material UI, чтобы иметь возможность работать со всеми его компонентами. Для этого добавьте в свой проект одну из следующих командных строк, в зависимости от того, используете ли вы это с помощью npm или yarn:
npm install @ material-ui / core
пряжа add @ material-ui / core
Шаг 2. Установка значков пользовательского интерфейса материалов. Следующим шагом здесь будет установка самих иконок в каталог проекта. Опять же, есть два способа сделать это: пряжа или npm:
npm install @ material-ui / icons
пряжа add @ material-ui / icons
Эти компоненты используют компонент Material UI SvgIcon, упомянутый выше, для визуализации путей SVG для каждого значка. Это, по порядку, составляет одноранговую зависимость от следующего выпуска Material-UI.
Шаг 3. Импорт значков пользовательского интерфейса материалов. После установки значков пользовательского интерфейса материалов в каталог вашего проекта следующим шагом будет их импорт одним из следующих двух методов:
Метод №1. Этот вариант будет безопаснее второго, также он несколько ограничивает творческий потенциал опыта разработчика :
импорт AccessAlarmIcon из '@ material-ui / icons / AccessAlarm';
импортировать ThreeDRotation из '@ material-ui / icons / ThreeDRotation';
Метод №2. Этот вариант менее безопасен, но, с другой стороны, дает опытному разработчику больше творческой свободы :
импорт {AccessAlarm, ThreeDRotation} из '@ material-ui / icons';
Используя один из этих методов, мы импортировали значки Access Alarm и 3D Rotation в наш проект, и вы сможете увидеть их при следующей загрузке проекта в их вариантах по умолчанию. Но имейте в виду, что все значки в Material UI framework имеют пять различных вариаций:
Вариант с заливкой (вариант по умолчанию);
Контурный вариант;
Скругленный вариант;
Двухтональный вариант;
И вариант Sharp .
Итак, если вы хотите использовать любой из этих вариантов, вам нужно будет добавить имя темы к имени значка. Также имейте в виду, что в то время как значки материального дизайна используют имя «snake_case», @ material-ui / icons используют для именования «PascalCase».
Шаг 4. Добавление CSS к значкам пользовательского интерфейса материалов для изменения стилей. Предположим, у вашего проекта есть собственный канал YouTube, и вы хотите добавить ссылку на него на свой сайт. Добавление полной ссылки выглядело бы неуместным на любом сайте, поэтому использование значка пользовательского интерфейса материала YouTube здесь подойдет. А также предположим, что по стилистическим причинам вы хотите, чтобы он был красно-белым, как и исходный логотип. В этой потенциальной ситуации вашим следующим шагом будет добавление CSS к вашему значку, чтобы он выглядел так, как вам нужно. В этом случае ваш следующий ход будет следующим:
импортировать React, {Component} из 'react'
импортировать YouTubeIcon из '@ material-ui / icons / YouTube';
экспортный класс Maticon1 расширяет Component {
оказывать() {
возвращение (
Значки социальных сетей для материального интерфейса
)
}
}
экспорт по умолчанию Maticon1
В этом примере Maticon1 — это компонент, в который мы добавляем значки социальных сетей. После этого не забудьте добавить ссылку на этот компонент в файл app.js, выполнив следующие действия:
импортировать React из react;
импортировать логотип из './logo.svg';
import './App.css';
импортировать Maticon1 из './Maticon1'
function App () {
возвращение (
);
}
экспортировать приложение по умолчанию;
И в следующий раз, когда вы запустите свой проект, вы увидите красивый маленький значок пользовательского интерфейса материала YouTube в красном и белом цвете.
Но что, если вам нужен значок, которого нет в стандартном наборе значков пользовательского интерфейса материалов? Что ж, в этом случае вам на помощь придет оболочка SvgIcon, о которой мы уже упоминали выше. Он позволяет создавать собственные значки SVG, расширяя собственный элемент . Имейте в виду, что все элементы SVG должны быть масштабированы для области просмотра 24 × 24 пикселей. Таким образом, получившийся значок будет доступен для использования в качестве дочернего элемента для других компонентов пользовательского интерфейса материала, которые сами используют значки, и будет доступен для настройки с помощью атрибута viewBox . Вы также можете свободно применять любой из цветов темы, используя свойство color поскольку по умолчанию все компоненты наследуют текущий цвет. Код для настройки будет выглядеть следующим образом:
функция HomeIcon (реквизит) {
возвращение (
);
}
А код настройки цвета будет выглядеть следующим образом:
·
И после добавления этих строк ваши значки будут выглядеть следующим образом:
Вот как вы устанавливаете и настраиваете значки пользовательского интерфейса материалов. Не стесняйтесь использовать эту способность, чтобы украсить свой проект всевозможными красивыми значками и в некоторой степени тайно обогатить ими опыт конечных пользователей.
Выводы, которые необходимо иметь
Подходя к концу этой статьи, мы надеемся, что показали вам, что даже самые мелкие вещи заслуживают внимания сами по себе на примере значков пользовательского интерфейса материала. Но самое лучшее во всем этом испытании — это то, что значки пользовательского интерфейса материала не такие уж и маленькие, поскольку они помогают вам спроектировать идею любого вашего проекта. Точно так же, как мозаика, состоящая из множества-множества маленьких кусочков, которые создают зрелище, когда работают вместе.
Следует также еще раз упомянуть, что они исключительно легко интегрируются, настраиваются и формируются в соответствии с вашими потребностями, что делает значки пользовательского интерфейса материалов обязательными для использования и, в конечном итоге, незаменимыми при разработке любого проекта.
На сегодня это все. Мы желаем вам очень счастливого дня, наполненного приятными мелочами. И, как всегда, не стесняйтесь читать любые другие наши статьи.
Загрузка...
