Cum să personalizați o temă React folosind Ant Design

Este puțin puțin subestimat să spunem că un design bun al interfeței cu utilizatorul (UI) joacă un rol important în atragerea publicului site-ului dvs. și în conducerea acesteia către o conversie. În timp ce orice interfață de utilizare bună necesită un design interactiv, intuitiv, bogat și accesibil - o provocare aparent descurajantă - este realizabilă atunci când utilizați componente și biblioteci de înaltă calitate pentru ao construi.

Cel mai popular dintre acestea este designul furnicilor. Este o bibliotecă React UI care are acces la componente de calitate, ușor de utilizat, pentru a construi interfețe de utilizator elegante și rapide.

De ce Ant Design?

Creat de Alibaba, sistemul de design Ant este folosit de mai multe nume mari precum Alibaba (desigur), Tencent, Baidu și multe altele.

A devenit rapid cea mai folosită bibliotecă React UI. Anterior Material-UI era cel mai popular cu peste 75.000 de stele pe Github, dar Ant Design le-a depășit acum cu 77.5k!

Ceea ce a făcut designul furnicilor atât de bine este umanizarea designului lor. Ei evaluează calitatea designului prin măsurarea în raport cu patru valori centrate pe conștiința umană și fericirea - naturalețea, certitudinea, semnificația și creșterea. Aceștia acționează ca un standard pentru designeri și îi ghidează în luarea deciziilor și o judecată mai bună.

Componente de proiectare a furnicilor

Ant Design (sau antd) oferă multe componente bogate de UI care vă pot îmbunătăți experiența site-ului sau a aplicației. Vedeți mai jos câteva dintre ele, dar pentru mai multe opțiuni, vizitați aici.

Componente universale: butoane, pictograme, tipografie etc.

Aspecte: grile, machete, spațiere etc.

Navigare: pesmeturi, meniuri, meniuri derulante etc.

Introducerea datelor: completare automată, casetă de selectare, selector de dată etc.

Afișare date: avatar, comentarii, panouri pliabile etc.

Instalarea React și Ant Design

Acum că știm ce componente sunt disponibile în Ant design, să învățăm procesul de bază de instalare a React și apoi să instalăm Ant design în el.

Puteți folosi fire sau npm pentru a configura proiectul React. Mai jos sunt comenzile de bază pentru instalarea și configurarea React:

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

Odată ce React este instalat, puteți vedea aplicația care rulează în browser.

Acesta este directorul implicit generat în proiectul nou creat. În continuare, vom modifica unele dintre fișierele de aici pentru a obține rezultatul final.

 ├── 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

Acum, după configurarea React, să instalăm Ant design în el cu această comandă:

 $ yarn add antd

După instalarea antd, puteți utiliza componentele Ant modificând marcajul în App.js care se află în folderul src din proiectul dvs. Aici, adaug un element buton de la 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;

Componenta butonului furnici:

Odată ce salvați și rulați aplicația, veți putea vedea elementul butonului principal Ant în browser în culoarea albastră (așa cum se arată mai sus). Aceasta înseamnă că Ant este integrată cu succes în React.

Personalizarea unei teme

Cea mai bună parte a integrării Ant Design cu React este că vă permite să vă personalizați jetoanele de design pentru a satisface diversitatea interfeței de utilizare de la cerințele comerciale sau ale mărcii, inclusiv culoarea primară, raza chenarului, culoarea chenarului etc.

Credite imagine: Intoli

Pentru a permite aceste personalizări, va trebui să faceți câteva configurații avansate.

Configurare avansată:

În acest moment, trebuie să personalizați configurațiile implicite ale create-react-app. Să folosim CRACO (Create React App Configuration Override) - o soluție comunitară pentru configurarea personalizată a create-react-app.

Pasul 1: Mai întâi va trebui să instalați CRACO și să înlocuiți scriptul React implicit cu CRACO în 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", }

În conformitate cu cerințele de configurare a temei, tema personalizată trebuie să utilizeze funcția Less variabile override similară cu cea oferită de less-loader. Putem introduce Craco-less pentru a ajuta la încărcarea mai puține stiluri și la modificarea variabilelor.

 $ yarn add craco-less

Pasul 2: Modificați fișierul src/App.css în src /App.less și importați fișierul antd.less peste antd.css în app.less

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

Pasul 3: Creați craco.config.js în directorul rădăcină pentru a modifica configurația implicită.

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

Aici, less-loader este modifyVars folosit pentru configurarea temei.

Dacă vedeți un buton verde, știți că configurația a reușit. Acum puteți personaliza tema cu propriul set de culori folosind jetoanele/variabilele furnizate.

Variabile de stil de design furnici

Mai jos sunt câteva dintre cele mai frecvent utilizate variabile generice. Puteți vizita aici pentru a obține detalii despre toate variabilele de stil disponibile.

 @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