violet design

Eine personalisierte UI-Komponentenbibliothek basierend auf dem "React" -Frahmen wird hauptsächlich in Middle- und Backend-Systemen auf Unternehmensebene verwendet.

Inhaltsverzeichnis

• Inhaltsverzeichnis
• einführen
  • Merkmal
  • Kompatibilität
• Installieren
  • Installieren Sie mit NPM
  • Mit Garn installieren
  • Browser -Einführung
• Beispiel
  • Last bei Bedarf
  • Typoskript
• Komponenten
• Link
• Entwickler

einführen

Um die Anforderungen an die Entwurfsspezifikation zu erfüllen, entwickelte unser Team "Violet Design" - eine React -basierte UI -Komponentenbibliothek. Violet Design bietet eine Fülle von Komponenten und Funktionen, die unterschiedliche Geschäftsbedürfnisse erfüllen und gleichzeitig äußerst schön und koordiniert sind.

Merkmal

• ? Intuitiv konzipiert interaktiver Sprache und visueller Stil.
• ? Hochwertige React aus dem Box.
• ? ️ Mit TypeScript entwickelt, geben Sie eine vollständige Typ -Definitionsdatei an.
• ☀️ Freundliche API, freie und flexible Nutzung des Raums.
• ? Detaillierte und schöne Benutzeroberfläche.
• ? Klare und klare Demonstrationsstelle und detaillierte Dokumentation.

Kompatibilität

Rand	Firefox	Chrom	Safari	Oper
Rand	Letzte zwei Versionen	Letzte zwei Versionen	Letzte zwei Versionen	Letzte zwei Versionen

Installieren

Installieren Sie mit NPM

Es wird empfohlen, NPM zu verwenden, um es zu installieren, die Bequemlichkeit des Ökosystems und der Tools zu genießen, die leicht in der Entwicklungsumgebung debuggen oder in der ökologischen Umgebung verpackt und eingesetzt werden können.

$ npm install violet-design

Mit Garn installieren

$ yarn add violet-design

Browser -Einführung

Verwenden Sie script und link -Tags im Browser, um Dateien direkt zu importieren, und verwenden Sie den globalen Variablen VioletDesign .

Einführung von CSS:

 < link rel =" stylesheet " href =" https://unpkg.com/violet-design/dist/index.css " >

Einführung von JS:

 < script src =" https://unpkg.com/violet-design/dist/index.umd.js " > </ script > 

Beispiel

1. Styles einführen

In index.tsx(.jsx) :

 import 'violet-design/dist/index.css'

2. Verwenden Sie Komponenten

 import React from 'react' ;
import { Button } from 'violet-design' ;

const App = ( ) => (
  < >
    < Button btnType = "primary" size = "lg" > PRESS ME </ Button >
  </ >
) ;

Last bei Bedarf

violet-design unterstützt das Baumschütteln basierend auf ES-Modulen standardmäßig.

Typoskript

violet-design wird mit TypeScript geschrieben und bietet eine vollständige Definitionsdatei.

Komponenten

• ? Allgemeine Komponenten: Schaltfläche, Symbol Symbol
• Navigationskomponente: Menü Navigationmenü
• ? Dateneingabekomponenten: AutoComplete AutoComplete, kaskadierte Auswahl, Kontrollkästchen Multi-Check-Feld, Datumspicker-Datumsauswahl, Selektor des Dablungsdatumpickers, Formularformular, Eingangsbox, Inputnumber-Digitaleingangsbox, RadioGroup-Optionsbox-Schaltfläche, Selector, Switch-Switch, Switch-Switch hochladen
• ? Datenanzeigekomponenten: Kalenderkalender, Registerkartenseite
• ? Feedback -Komponente: Fortschritts -Fortschrittsbalken
• ? Layoutkomponente: Gitter
• ? Andere Komponenten: Affix Pushpin, Übergang

Link

• Dokumentationsseite
• Komponentenbibliothek

Entwickler

@Zhaoyuhang. @Liwei. @Wangzijun. @Yangjiawei. @Wanyuhui. @Zhubeijia. @Chenxinyi.

Wenn Sie an dem Beitrag teilnehmen möchten, werden Sie willkommen, um Anfragen zu ziehen!