import { Meta } from '@storybook/addon-docs';
import Logo from '../assets/solid-logo.svg';

<Meta title="Violet Design/介绍" />

<style>
  {`
    .topTitle {
      display: inline-block;
      cursor: pointer;
    }
    .logo {
      height: 180px;
      display: flex;
    }
    .logo__and {
      line-height: 180px;
      display: inline-block;
      margin: 0 20px;
      color: #aaa;
      font-size: 30px;
    }
    .logo img {
      width: 180px;
    }

  `}
</style>

<a href='https://github.com/zhaoyuuu/violet-design' target="_blank">
  <img src={Logo} alt="logo" width='40px'/>
  <h1 className='topTitle'>Violet Design of React</h1>
</a>

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

<div className="logo" >
  <a href='https://github.com/zhaoyuuu/violet-design' target="_blank">
    <img src={Logo} alt="logo" />
  </a>
  <div className="logo__and">+</div>
  <img src='https://gw.alipayobjects.com/zos/antfincdn/aPkFc8Sj7n/method-draw-image.svg' />
</div>

<hr/>
<br/>

# 💌 介绍

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

<br/>

## 特性

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

## 兼容性

<table border="1" width="800px" height="120px" align='center' >
   <tr>
      <th> <img src='https://github.com/zhubeijia/source/blob/main/srclogo/icon-edge.06c7aa18.svg?raw=true' width="20px" /> Edge  </th>
      <th> <img src='https://github.com/zhubeijia/source/blob/main/srclogo/icon-firefox.ffa00c88.svg?raw=true' width="20px" /> Firefox</th>
      <th> <img src='https://github.com/zhubeijia/source/blob/main/srclogo/icon-chrome.99f0b30c.svg?raw=true' width="20px" /> Chrome</th>
      <th> <img src='https://github.com/zhubeijia/source/blob/main/srclogo/icon-safari.1bf88a3e.svg?raw=true' width="20px" /> Safari</th>
      <th> <img src='https://github.com/zhubeijia/source/blob/main/srclogo/icon-opera.de286680.svg?raw=true' width="20px" /> Opera</th>
    </tr>
    <tr>
      <th>Edge</th>
      <th>Last two versions</th>
      <th>Last two versions</th>
      <th>Last two versions</th>
      <th>Last two versions</th>
    </tr>
</table>

<br/>

# 📦 安装

## 使用 npm 安装

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

`$ npm install violet-design`

## 使用 yarn 安装

`$ yarn add violet-design`

## 浏览器引入

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

> 注意：`index.umd.js` 依赖 `react`、`react-dom`，请确保提前引入这些文件。

引入 css：

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

引入 js:

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

# 🔨 示例

### 1. 引入样式

在`index.tsx(.jsx)`中：

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

### 2. 使用组件

```js
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 进行书写并提供了完整的定义文件。

<br/>

# ✨ 组件

- 🔘 **通用型组件**：[Button 按钮](?path=/docs/组件-通用-button-按钮--default)、[Icon 图标](?path=/docs/icon--a-default-icons)
- 🗂️ **导航型组件**：[Menu 导航菜单](?path=/docs/组件-导航-menu-导航菜单--horizontal-menu)
- 🪄 **数据录入型组件**：[AutoComplete 自动完成](?path=/docs/autocomplete--a-simple-complete)、[Cascader 级联选择](?path=/docs/组件-数据录入-cascader-级联选择--default)、[CheckBox 多选框](?path=/docs/组件-数据录入-checkbox-多选框--default)、[DatePicker 日期选择器](?path=/docs/datepicker--default-date-picker)、[RangeDatePicker 日期范围选择器](?path=/docs/rangedatepicker--adefault)、[Form 表单](?path=/docs/form--a-basic-form)、[Input 输入框](?path=/docs/input--a-default)、[InputNumber 数字输入框](?path=/docs/组件-数据录入-inputnumber-数字输入框--default-input-number)、[RadioGroup 单选按钮组](?path=/docs/组件-数据录入-radiogroup-单选按钮组--default-radio)、[Select 选择器](?path=/docs/select--default-select)、[Switch 开关](?path=/docs/switch--a-default)、[Upload 上传](?path=/docs/upload--simple-upload)
- 📆 **数据展示型组件**：[Calendar 日历](?path=/docs/calendar--year-view)、[Tabs 标签页](?path=/docs/tabs--a-default-tabs)
- 📈 **反馈型组件**：[Progress 进度条](?path=/docs/组件-反馈-progress-进度条--default)
- 🧱 **布局组件**：[Grid 栅格](?path=/docs/grid--default)
- 📌 **其他组件**：[Affix 图钉](?path=/docs/组件-其他-affix-固钉--affix-button)、[Transition 过渡](?path=/docs/transition--menu-transition)
  <br/>

# 🔗 链接

- [文档站](https://zhaoyuuu.github.io/violet-design)
- [组件库](https://github.com/zhaoyuuu/violet-design)
  <br/>

# 🧑‍💻 开发人员

[@ZhaoYuhang](https://github.com/zhaoyuuu). [@LiWei](https://github.com/5liwei). [@WangZijun](https://github.com/violetwzj). [@YangJiawei](https://github.com/666laoyang). [@WanYuhui](https://github.com/wyuhuiNJU). [@ZhuBeijia](https://github.com/zhubeijia). [@ChenXinyi](https://github.com/quas-modo).

如果你希望参与贡献，欢迎 Pull Request ！

[def]: https://github.com/RichardLitt/standard-readme
