violet design下载 - violet design源代码下载

violet design

三方组件

v0.3.4: Merge pull request #185 from zhaoyuuu

下载

基于「 React 」框架的个性化 UI 组件库，主要用于企业级中后台系统。

介绍

为了满足设计规范要求，本团队自行开发了「 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 过渡