violet design Download - violet design Source code download

violet design

Third-party components

v0.3.4: Merge pull request #185 from zhaoyuuu

Download

A personalized UI component library based on the "React" framework is mainly used in enterprise-level middle and backend systems.

introduce

In order to meet the design specification requirements, our team developed "Violet Design" - a React-based UI component library. Violet Design provides a wealth of components and functions that meet different business needs while being extremely beautiful and coordinated.

characteristic

? Intuitively designed interactive language and visual style.
? High-quality React components out of the box.
?️ Developed with TypeScript , provide a complete type definition file.
☀️ Friendly API, free and flexible use of space.
? Detailed and beautiful UI.
? Clear and clear demonstration site and detailed documentation.

compatibility

Edge	Firefox	Chrome	Safari	Opera
Edge	Last two versions	Last two versions	Last two versions	Last two versions

Install

Install using npm

It is recommended to use npm to install it, enjoy the convenience brought by the ecosystem and tools, which can be easily debugged in the development environment, or can be packaged and deployed in the ecological environment.

$ npm install violet-design

Install using yarn

$ yarn add violet-design

Browser introduction

Use script and link tags in the browser to directly import files and use the global variable VioletDesign .

Introducing CSS:

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

Introducing JS:

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

Example

1. Introduce styles

In index.tsx(.jsx) :

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

2. Use components

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

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

Load on demand

violet-design supports tree shaking based on ES modules by default.

TypeScript

violet-design is written using TypeScript and provides a complete definition file.

Components

? General-purpose components: Button button, Icon icon
Navigation Component: Menu Navigation Menu
? Data entry components: AutoComplete autocomplete, Cascaded selection, CheckBox multi-check box, DatePicker date selector, RangeDatePicker date range selector, Form form, Input input box, InputNumber digital input box, RadioGroup radio button group, Select selector, Switch switch, Upload upload
? Data display components: Calendar calendar, Tabs page
? Feedback component: Progress progress bar
? Layout Component: Grid
? Other components: Affix pushpin, Transition