# CP Design
### 使用 React hooks Typescript 開發的一個 H5 移動端 組件庫
其中包括了下圖中的27個基礎組件:
# CP Design Mobile
([github地址:https://10086xiaozhang.github.io/CP-DESIGN](https://10086xiaozhang.github.io/CP-DESIGN))
## 特性
- 基于 CP Design 移動設計規范。
- 規則化的視覺樣式配置，適應各類產品風格。
- 使用 TypeScript React hooks 開發，提供型別定義檔案。
## 環境支持
- Modern browsers and Internet Explorer 11+ (with [polyfills](https://ant.design/docs/react/getting-started#Compatibility))
- Server-side Rendering
- [Electron](https://www.electronjs.org/)
| IE11, Edge | last 2 versions | last 2 versions | last 2 versions | last 2 versions |
## 安裝
```bash
npm install cp-design --save
```
```bash
yarn add cp-design
```
## 注意
在組件庫中使用了 SASS,在安裝的時候記得安裝 node-sass
```bash
npm install node-sass --save-dev
```
```bash
yarn add node-sass -D
```
## 使用
```jsx
import { Button } from 'cp-design'
const App = () => (
<>
<Button type="primary">PRESS ME</Button>
</>
)
```
## 組件
- [x] Icon,
- [x] Button,
- [x] Input,
- [x] Row,
- [x] Col,
- [x] Affix,
- [x] Avatar,
- [x] Badge,
- [x] Card,
- [x] CheckboxGroup,
- [x] Checkbox,
- [x] Accordion,
- [x] Divider,
- [x] Modal,
- [x] Overlay,
- [x] Pagination,
- [x] Progress,
- [x] Radio,
- [x] Slider,
- [x] Step,
- [x] Spin,
- [x] Switch,
- [x] Tabs,
- [x] Tag,
- [x] ImagePicker,
- [x] Toast,
- [x] ActionSheet,
- [x] TabBar,
- [x] PickerPanel,
- [x] Picker,
- [x] SegmentedControl,
- [x] Popover,
- [x] NoticeBar,
- [x] SwipeAction
- [x] ListView
## 案例
### mobile web demo
[https://10086xiaozhang.github.io/CP-DESIGN](https://10086xiaozhang.github.io/CP-DESIGN)
## 安裝與使用
[介紹](https://10086xiaozhang.github.io/CP-DESIGN)
## 瀏覽器支持
- `iOS`
- `Android 4.0+`
## 鏈接
- [案例主頁](https://10086xiaozhang.github.io/CP-DESIGN)
- [組件檔案](https://10086xiaozhang.github.io/CP-DESIGN)
- [例子](https://10086xiaozhang.github.io/CP-DESIGN)
## 歡迎貢獻
有任何建議或意見您可以進行 [提問](https://github.com/10086XIAOZHANG/CP-DESIGN/issues)。
## 作者Email
[email protected]
注明:文章轉載:[https://blog.csdn.net/XIAOZHANG86/article/details/105325681](https://blog.csdn.net/XIAOZHANG86/article/details/105325681)
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/70143.html
標籤：JavaScript
上一篇：Datatable傳參怎么修改
下一篇：工大小白自學嵌入式