Как настроить тему React с помощью Ant Design

Будет немного преуменьшено сказать, что хороший дизайн пользовательского интерфейса (UI) играет огромную роль в привлечении аудитории вашего веб-сайта и привлечении ее к конверсии. В то время как любой хороший пользовательский интерфейс требует интерактивного, интуитивно понятного, богатого и доступного дизайна — казалось бы, сложной задачи — это достижимо, если вы используете для его создания высококачественные компоненты и библиотеки.

Наиболее популярным из них является дизайн Ant. Это библиотека пользовательского интерфейса React, которая имеет доступ к простым в использовании качественным компонентам для создания элегантных и быстрых пользовательских интерфейсов.

Почему Муравей Дизайн?

Система дизайна Ant, созданная Alibaba, используется несколькими громкими именами, такими как Alibaba (конечно), Tencent, Baidu и другими.

Она быстро стала самой используемой библиотекой пользовательского интерфейса React. Раньше Material-UI был самым популярным с более чем 75 тысячами звезд на Github, но теперь Ant Design обогнал их с 77,5 тысячами!

То, что дизайн Ant сделал так хорошо, — это очеловечивание их дизайна. Они оценивают качество дизайна по четырем ценностям, ориентированным на человеческое сознание и счастье: естественность, определенность, осмысленность и рост. Они действуют как стандарт для дизайнеров и помогают им в принятии решений и принятии более взвешенных решений.

Компоненты дизайна муравья

Ant design (или antd) предлагает множество богатых компонентов пользовательского интерфейса, которые могут улучшить работу вашего веб-сайта или приложения. Ознакомьтесь с некоторыми из них ниже, но для получения дополнительных опций посетите здесь.

Универсальные компоненты: кнопки, значки, типографика и т. д.

Макеты: сетки, макеты, интервалы и т. д.

Навигация: хлебные крошки, меню, выпадающие меню и т. д.

Ввод данных: автозаполнение, флажок, выбор даты и т. д.

Отображение данных: аватар, комментарии, сворачиваемые панели и т. д.

Установка React и Ant Design

Теперь, когда мы знаем, какие компоненты доступны в дизайне Ant, давайте изучим основной процесс установки React, а затем установим в него дизайн Ant.

Вы можете использовать пряжу или npm для настройки проекта React. Ниже приведены основные команды для установки и настройки React:

 $ yarn create react-app antd-demo # or $ npx create-react-app antd-demo $ cd antd-demo $ yarn start

После установки React вы можете увидеть запущенное приложение в браузере.

Это созданный по умолчанию каталог во вновь созданном проекте. В дальнейшем мы будем модифицировать некоторые из файлов, чтобы получить окончательный результат.

 ├── README.md ├── package.json ├── public │ ├── favicon.ico │ └── index.html ├── src │ ├── App.css │ ├── App.js │ ├── App.test.js │ ├── index.css │ ├── index.js │ └── logo.svg └── yarn.lock

Теперь, после настройки React, давайте установим в него дизайн Ant с помощью этой команды:

 $ yarn add antd

После установки antd вы можете использовать компоненты Ant, изменив разметку в App.js, которая находится внутри папки src вашего проекта. Здесь я добавляю элемент кнопки из Ant.

 import React from 'react'; import { Button } from 'antd'; import './App.css'; const App = () => ( <div className="App"> <Button type="primary">Button</Button> </div> ); export default App;

Компонент кнопки Ant:

После того, как вы сохраните и запустите приложение, вы сможете увидеть основной элемент кнопки Ant в браузере синего цвета (как показано выше). Это означает, что Ant успешно интегрирован в React.

Настройка темы

Лучшая часть интеграции Ant Design с React заключается в том, что она позволяет настраивать токены дизайна, чтобы удовлетворить разнообразие пользовательского интерфейса в соответствии с требованиями бизнеса или бренда, включая основной цвет, радиус границы, цвет границы и т. д.

Кредиты изображения: Интоли

Чтобы разрешить эти настройки, вам потребуется выполнить некоторые дополнительные настройки.

Предварительная конфигурация:

На этом этапе вам нужно настроить стандартные конфигурации create-react-app. Давайте воспользуемся CRACO (Create React App Configuration Override) — решением сообщества для индивидуальной настройки приложения create-react-app.

Шаг 1: Сначала вам нужно установить CRACO и заменить React-скрипт по умолчанию на CRACO в package.json.

 $ yarn add @craco/craco /* package.json */ "scripts": { - "start": "react-scripts start", - "build": "react-scripts build", - "test": "react-scripts test", + "start": "craco start", + "build": "craco build", + "test": "craco test", }

В соответствии с требованиями настройки темы пользовательская тема должна использовать функцию переопределения переменных Less, аналогичную той, что предоставляется less-loader. Мы можем ввести Craco-less, чтобы помочь загружать меньше стилей и изменять переменные.

 $ yarn add craco-less

Шаг 2. Измените файл src/ App.css на src/App.less и импортируйте файл antd.less поверх antd.css в app.less.

 /* src/App.js */ - import './App.css'; + import './App.less'; /* src/App.less */ - @import '~antd/dist/antd.css'; + @import '~antd/dist/antd.less';

Шаг 3: Создайте craco.config.js в корневом каталоге, чтобы изменить конфигурацию по умолчанию.

 const CracoLessPlugin = require('craco-less'); module.exports = { plugins: [ { plugin: CracoLessPlugin, options: { lessLoaderOptions: { lessOptions: { modifyVars: { '@primary-color': '#1DA57A' }, javascriptEnabled: true, }, }, }, }, ], };

Здесь less-loader — это ModifyVars , используемый для настройки темы.

Если вы видите зеленую кнопку, вы знаете, что конфигурация прошла успешно. Теперь вы можете настроить тему с помощью собственного набора цветов, используя предоставленные токены/переменные.

Переменные стиля дизайна Ant

Ниже приведены некоторые из наиболее часто используемых универсальных переменных. Вы можете посетить здесь, чтобы получить подробную информацию обо всех доступных переменных стиля.

 @primary-color: #1890ff; // primary color for all components @link-color: #1890ff; // link color @success-color: #52c41a; // success state color @warning-color: #faad14; // warning state color @error-color: #f5222d; // error state color @font-size-base: 14px; // major text font size @heading-color: rgba(0, 0, 0, 0.85); // heading text color @text-color: rgba(0, 0, 0, 0.65); // major text color @text-color-secondary: rgba(0, 0, 0, 0.45); // secondary text color @disabled-color: rgba(0, 0, 0, 0.25); // disable state color @border-radius-base: 2px; // major border radius @border-color-base: #d9d9d9; // major border color @box-shadow-base: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05); // major shadow for layers