# CP Design

# # # using the React hooks Typescript and development of an H5 mobile terminal component library

! [component screenshots] (HTTP://https://user-gold-cdn.xitu.io/2020/4/8/171581c11c104caa? W=2602 & amp; H=1340 & amp; F=jpeg& S=159563)
Including the image below 27 basic components:
! [CP Design project preview] (HTTP://https://user-gold-cdn.xitu.io/2020/4/8/171581c11e9c3809? W=2848 & amp; H=1790 & amp; F=png& S=493412)

# CP Design Mobile
! [sweep phone code to view] (HTTP://https://user-gold-cdn.xitu.io/2020/4/8/171581c1222d28c5? W=300 & amp; H=300 & amp; F=png& S=8028)

([making address: https://10086xiaozhang.github.io/CP-DESIGN] (https://10086xiaozhang.github.io/CP-DESIGN))

# # feature

- based on CP Design mobile Design specification,
- the rules of visual style configuration, to adapt to all kinds of product style,
- use the TypeScript React hooks development, provide the type definition file,

# # environment support

11 + - Modern browsers and Internet Explorer (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 |

# # to install

` ` ` bash
NPM install cp - design - save
` ` `

` ` ` bash
Yarn add cp - design
` ` `

# # notice

In the component library using SASS, remember when installing installation node - SASS

` ` ` bash
NPM install node - sass - save - dev
` ` `

` ` ` bash
Yarn add node - sass - D
` ` `

# # to use

` ` ` JSX
The import {Button} from 'cp - design'

Const App=()=& gt; (
<>

)
` ` `

# # component

- [x] Icon,
- [x] Button,
Input - [x],
Row - [x],
Col - [x],
- [x] Affix,
- [x] Avatar,
- [x] Badge,
- [x] Card,
- [x] CheckboxGroup,
The Checkbox - [x],
- [x] Accordion,
- [x] Divider,
- [x] Modal,
Overlay - [x],
- [x] Pagination,
- [x] Progress,
Radio - [x],
The Slider - [x],
Step - [x],
Spin - [x],
- [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

# # case

# # # mobile web demo

! [sweep phone code to view] (HTTP://https://user-gold-cdn.xitu.io/2020/4/8/171581c1222d28c5? W=300 & amp; H=300 & amp; F=png& S=8028)

[https://10086xiaozhang.github.io/CP-DESIGN] (https://10086xiaozhang.github.io/CP-DESIGN)

To install and use # #

[introduction] (https://10086xiaozhang.github.io/CP-DESIGN)

# # browser support

- ` iOS `
- ` Android 4.0 + `

# # link

Home page - [cases] (https://10086xiaozhang.github.io/CP-DESIGN)
Document] - [components (https://10086xiaozhang.github.io/CP-DESIGN)
[example] (https://10086xiaozhang.github.io/CP-DESIGN)

# # welcome contribution

Have any Suggestions or comments you can [question] (https://github.com/10086XIAOZHANG/CP-DESIGN/issues),

# # the author Email
[email protected]


Note: the article reprinted: [https://blog.csdn.net/XIAOZHANG86/article/details/105325681] (https://blog.csdn.net/XIAOZHANG86/article/details/105325681)