Skip to content

zhaoyuuu/violet-design

Repository files navigation

pipeline lisence docs test

基于「 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

浏览器引入

在浏览器中使用 scriptlink 标签直接引入文件,并使用全局变量 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 过渡

链接

开发人员

@ZhaoYuhang. @LiWei. @WangZijun. @YangJiawei. @WanYuhui. @ZhuBeijia. @ChenXinyi.

如果你希望参与贡献,欢迎 Pull Request !