So passen Sie ein React-Design mit Ant Design an

Es ist ein bisschen untertrieben zu sagen, dass ein gutes Design der Benutzeroberfläche (UI) eine große Rolle dabei spielt, Ihre Website-Zielgruppe anzusprechen und sie zu einer Conversion zu führen. Während jede gute Benutzeroberfläche ein interaktives, intuitives, reichhaltiges und zugängliches Design erfordert – eine scheinbar entmutigende Herausforderung – ist sie machbar, wenn Sie hochwertige Komponenten und Bibliotheken verwenden, um sie zu erstellen.

Das beliebteste davon ist das Ant-Design. Es ist eine React-UI-Bibliothek, die Zugriff auf benutzerfreundliche, hochwertige Komponenten zum Erstellen eleganter und schneller Benutzeroberflächen hat.

Warum Ameisendesign?

Das von Alibaba entwickelte Ant-Designsystem wird von mehreren großen Namen wie Alibaba (natürlich), Tencent, Baidu und anderen verwendet.

Es hat sich schnell zur am häufigsten verwendeten React-UI-Bibliothek entwickelt. Zuvor war Material-UI mit über 75.000 Sternen auf Github am beliebtesten, aber Ant Design hat sie jetzt mit 77,5.000 überholt!

Was Ant Design so gut gemacht hat, ist die Humanisierung ihres Designs. Sie bewerten die Qualität des Designs, indem sie sich an vier Werten messen, die das menschliche Bewusstsein und Glück in den Mittelpunkt stellen – Natürlichkeit, Gewissheit, Sinnhaftigkeit und Wachstum. Diese dienen als Standard für Designer und leiten sie bei der Entscheidungsfindung und einem besseren Urteilsvermögen.

Ant-Design-Komponenten

Ant Design (oder Antd) bietet viele umfangreiche UI-Komponenten, die Ihre Website- oder App-Erfahrung verbessern können. Sehen Sie sich unten einige davon an, aber für weitere Optionen besuchen Sie hier.

Universelle Komponenten: Schaltflächen, Symbole, Typografie usw.

Layouts: Gitter, Layouts, Abstände usw.

Navigation: Breadcrumbs, Menüs, Dropdown-Menüs etc.

Dateneingabe: Autovervollständigung, Kontrollkästchen, Datumsauswahl usw.

Datenanzeige: Avatar, Kommentare, zusammenklappbare Bedienfelder usw.

React und Ant Design installieren

Nachdem wir nun wissen, welche Komponenten in Ant Design verfügbar sind, lernen wir den grundlegenden Installationsprozess von React kennen und installieren dann Ant Design darin.

Sie können Garn oder npm verwenden, um das React-Projekt einzurichten. Im Folgenden sind die grundlegenden Befehle zum Installieren und Einrichten von React aufgeführt:

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

Sobald React installiert ist, können Sie die laufende App im Browser sehen.

Dies ist das standardmäßig generierte Verzeichnis im neu erstellten Projekt. In Zukunft werden wir einige der Dateien hier ändern, um die endgültige Ausgabe zu erzielen.

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

Nachdem wir React eingerichtet haben, installieren wir Ant Design mit diesem Befehl:

 $ yarn add antd

Nach der Installation von Antd können Sie die Ant-Komponenten verwenden, indem Sie das Markup in App.js ändern, das sich im Ordner „src“ in Ihrem Projekt befindet. Hier füge ich ein Schaltflächenelement von Ant hinzu.

 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-Button-Komponente:

Nachdem Sie die App gespeichert und ausgeführt haben, können Sie das primäre Schaltflächenelement von Ant im Browser in blauer Farbe sehen (wie oben gezeigt). Das bedeutet, dass Ant erfolgreich in React integriert ist.

Anpassen eines Themas

Das Beste an der Integration von Ant Design mit React ist, dass Sie Ihre Design-Token anpassen können, um die UI-Vielfalt von Geschäfts- oder Markenanforderungen zu erfüllen, einschließlich Primärfarbe, Randradius, Randfarbe usw.

Bildnachweis: Intoli

Um diese Anpassungen zu ermöglichen, müssen Sie einige erweiterte Konfigurationen vornehmen.

Erweiterte Konfiguration:

An dieser Stelle müssen Sie die Standardkonfigurationen von create-react-app anpassen. Verwenden wir CRACO (Create React App Configuration Override) – eine Community-Lösung für die benutzerdefinierte Konfiguration von create-react-app.

Schritt 1: Sie müssen zuerst CRACO installieren und das standardmäßige React-Skript durch CRACO in package.json ersetzen.

 $ 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", }

Gemäß den Anforderungen zum Konfigurieren des Themas muss das benutzerdefinierte Thema die Less variable Override-Funktion ähnlich der von less-loader bereitgestellten verwenden. Wir können Craco-less einführen, um weniger Stile zu laden und Variablen zu ändern.

 $ yarn add craco-less

Schritt 2: Ändern Sie die Datei src/App.css in src/App.less und importieren Sie die Datei antd.less über antd.css in app.less

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

Schritt 3: Erstellen Sie craco.config.js im Stammverzeichnis, um die Standardkonfiguration zu ändern.

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

Hier ist less-loader modifyVars , das für die Designkonfiguration verwendet wird.

Wenn Sie eine grüne Schaltfläche sehen, wissen Sie, dass die Konfiguration erfolgreich war. Jetzt können Sie das Thema mithilfe der bereitgestellten Tokens/Variablen mit Ihrem eigenen Farbsatz anpassen.

Variablen des Ant-Designstils

Nachfolgend sind einige der am häufigsten verwendeten generischen Variablen aufgeführt. Sie können hier vorbeischauen, um Details zu allen verfügbaren Stilvariablen zu erhalten.

 @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