CP Design
使用 React hooks Typescript 开发的一个 H5 移动端 组件库
其中包括了下图中的27个基础组件:
CP Design Mobile
(github地址:https://10086xiaozhang.github.io/CP-DESIGN)
特性
- 基于 CP Design 移动设计规范。
- 规则化的视觉样式配置,适应各类产品风格。
- 使用 TypeScript React hooks 开发,提供类型定义文件。
🖥 环境支持
| IE11, Edge | last 2 versions | last 2 versions | last 2 versions | last 2 versions |
📦 安装
npm install cp-design --save
yarn add cp-design
✨ 注意
在组件库中使用了 SASS,在安装的时候记得安装 node-sass
npm install node-sass --save-dev
yarn add node-sass -D
🔨 使用
import { Button } from 'cp-design'
const App = () => (
<>
<Button type="primary">PRESS ME</Button>
</>
)
组件
- Icon,
- Button,
- Input,
- Row,
- Col,
- Affix,
- Avatar,
- Badge,
- Card,
- CheckboxGroup,
- Checkbox,
- Accordion,
- Divider,
- Modal,
- Overlay,
- Pagination,
- Progress,
- Radio,
- Slider,
- Step,
- Spin,
- Switch,
- Tabs,
- Tag,
- ImagePicker,
- Toast,
- ActionSheet,
- TabBar,
- PickerPanel,
- Picker,
- SegmentedControl,
- Popover,
- NoticeBar,
- SwipeAction
- ListView
部分组件使用
Button 按钮
按钮的展示
引入组件
import * as React from 'react'
import { Button, Row, Col } from 'cp-design'
Demo 代码
export default function ButtonDemo() {
const onClick = () => {}
return (
<div>
<Row style={
{ marginBottom: '1rem' }}>
<Col span={24}>
<Button onClick={onClick}>default</Button>
</Col>
</Row>
<Row style={
{ marginBottom: '1rem' }}>
<Col span={24}>
<Button disabled>default disabled</Button>
</Col>
</Row>
<Row style={
{ marginBottom: '1rem' }}>
<Col span={24}>
<Button type="primary" onClick={onClick}>
primar