Violet-design NPM

介绍

为了满足设计规范要求，本团队自行开发了「 Violet Design 」—— 一套基于 React 的 UI 组件库。 Violet Design 提供了丰富的组件和功能，在满足不同业务需求的同时，也极具美观和协调性。

特性

🌈 自主设计的符合直觉的交互语言和视觉风格。
📦 开箱即用的高质量 React 组件。
🛡️ 使用 TypeScript 开发，提供完整的类型定义文件。
☀️ 友好的 API ，自由灵活地使用空间。
🎨 细致、漂亮的 UI。
📁 清晰明了的演示站点，细致的文档。

兼容性

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

安装

使用 npm 安装

推荐使用 npm 来安装，享受生态圈和工具带来的便利，可以在开发环境轻松调试，也可以在生态环境打包部署使用。

$ npm install violet-design

使用 yarn 安装

$ yarn add violet-design

浏览器引入

在浏览器中使用 script 和 link 标签直接引入文件，并使用全局变量 VioletDesign。

引入 CSS：

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

引入 JS：

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

示例

1. 引入样式

在index.tsx(.jsx)中：

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

2. 使用组件

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

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

按需加载

violet-design 默认支持基于 ES modules 的 tree shaking。

TypeScript

violet-design使用 TypeScript 进行书写并提供了完整的定义文件。

组件

🔘 通用型组件：Button 按钮、Icon 图标
🗂️ 导航型组件：Menu 导航菜单
🪄 数据录入型组件：AutoComplete 自动完成、Cascader 级联选择、CheckBox 多选框、DatePicker 日期选择器、RangeDatePicker 日期范围选择器、Form 表单、Input 输入框、InputNumber 数字输入框、RadioGroup 单选按钮组、Select 选择器、Switch 开关、Upload 上传
📆 数据展示型组件：Calendar 日历、Tabs 标签页
📈 反馈型组件：Progress 进度条
🧱 布局组件：Grid 栅格
📌 其他组件：Affix 图钉、Transition 过渡