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 過渡