react hooks + typescript + sass 开发的H5移动端组件库

CP Design

使用 React hooks Typescript 开发的一个 H5 移动端 组件库

其中包括了下图中的27个基础组件:

CP Design Mobile

(github地址:https://10086xiaozhang.github.io/CP-DESIGN)

特性

• 基于 CP Design 移动设计规范。
• 规则化的视觉样式配置，适应各类产品风格。
• 使用 TypeScript React hooks 开发，提供类型定义文件。

环境支持

• Modern browsers and Internet Explorer 11+ (with polyfills)
• Server-side Rendering
• Electron

| 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 = () => (
<>
PRESS ME

)

组件

• 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 (
    

      
        
          default
        
      
      
        
          default disabled
        
      
      
        
          
            primary
          
        
      
      
        
          
            primary disabled
          
        
      
      
        
          
            warning
          
        
      
      
        
          
            warning disabled
          
        
      
      
        
          
            loading button
          
        
      
      
        
          with icon
        
      
    
  )
}

Badge 徽标数

徽标数的展示

引入组件

import * as React from 'react'
import { Badge, Row, Col } from 'cp-design'

Demo 代码

export default function BadgeDemo() {
  return (
    

      
        
          
            
          
          
            Dot badge
          
        
      
      
        
          
            
          
          
            Dot badge Success
          
        
      
      
        
          
          
          
        
      
      
        
          
            
              Dot badge Success
            
          
        
      
    
  )
}

属性	说明	类型	默认值	可选
text	展示的数字或文案，当为数字时候，大于 overflowCount 时显示为 ${overflowCount}+，为 0 时隐藏	string	–	–
corner	置于角落	boolean	–	–
disabled	设置禁用	boolean	–	–
dot	不展示数字，只有一个小红点	string/React.Element	–	–
overflowCount	展示封顶的数字值	number	–	–
status	status 状态点 这个值对 dot 生效	‘success’, ‘default’ , ‘process’ , ‘warning’ , ‘error’	–	–
style	自定义样式(样式)	Object	–	–
outStyle	外围自定义样式(样式)	Object	–	–
hot	营销样式	boolean	–	–

Api

属性	说明	类型	默认值	可选
type	按钮类型，可选值为 primary/ghost/warning 或者不设	string	–	–
size	按钮大小，可选值为 large、small	string	large	–
disabled	设置禁用	boolean	–	–
icon	可以是 Icon 组件里内置的某个 icon 的 type 值，也可以是任意合法的 ReactElement (注意: loading 设置后此项设置失效)	string/React.Element	–	–
prefixCls	class 前缀 默认 cp-ui-btn	string	–	–
className	样式类名	fun():void	–	–
onClick	点击按钮的点击回调函数	fun() : void	–	–
style	自定义样式	Object	–	–
loading	是否出现正在加载	boolean	–	–

Icon 图标

图标的展示

引入组件

import * as React from 'react'
import { Icon, Row, Col } from 'cp-design'

Demo 代码

export default function IconDemo() {
  const list = [
    'check-circle',
    'check',
    'caret-up',
    'delete',
    'eye-close',
    'eye',
    'up',
    'down',
    'left',
    'right',
    'message-fill',
    'link'
  ]
  const data = list.map(item => ({
    icon: ,
    text: item
  }))
  return (
    

      
基本
      {data.map((item, index) => {
        if (index !== 0 && (index + 1) % 3 === 0) {
          return (
            
              
                {data[index - 2].icon}
                
{data[index - 2].text}
              
              
                {data[index - 1].icon}
                
{data[index - 1].text}
              
              
                {item.icon}
                
{data[index].text}
              
            
          )
        }
        return null
      })}
      
大小
      
        
          
        
        
          
        
        
          
        
        
          
        
      
      
颜色
      
        
          
        
        
          
        
        
          
        
        
          
        
      
    
  )
}

Api

属性	说明	类型	默认值	可选
type	内置 icon 名称	string	–	–
size	图标大小	string,number	–	–
color	图标颜色	Color	‘#000’	–
rotate	是否旋转	boolean	–	–
rotateDegree	和 rotate 一起配置生效	0 ,90 ,180, 270 , 360	–	–
flip	是否翻转	boolean	–	–
flipOrder	和 flip 一起配置生效	‘horizontal’ , ‘vertical’	–	–

Modal 弹窗

弹窗的展示

引入组件

import * as React from 'react'
import { Modal, Button, Row, Col } from 'cp-design'

Demo 代码

const { useState } = React
export default function ModalDemo() {
  const [modal1, setModal1] = useState(false)
  const [modal2, setModal2] = useState(false)
  const showModal1 = (e: React.MouseEvent) => {
    e.preventDefault()
    setModal1(true)
  }
  const showModal2 = (e: React.MouseEvent) => {
    e.preventDefault()
    setModal2(true)
  }
  return (
    

       {
          setModal1(false)
        }}
      >
        

          scoll content...
          

          scoll content...
          

          scoll content...
          

          scoll content...
          

          scoll content...
          

          scoll content...
          

        
      
       {
          setModal2(false)
        }}
        onOk={() => {
          alert('afterOK')
          setModal2(false)
        }}
      >
        

          scoll content...
          

          scoll content...
          

          scoll content...
          

          scoll content...
          

          scoll content...
          

          scoll content...
          

        
      
      
Modal 对话框
      
基本
      
        
          basic
        
      
      
        
          confirm
        
      
    
  )
}

Api

属性	说明	类型	默认值	可选
cancelText	取消按钮自定义	React.ReactNode,string	–	–
okText	确定按钮自定义	React.ReactNode,string	large	–
visible	是否可见	boolean	–	–
title	Modal 弹窗标题	string/React.Element	–	–
children	Modal 自定义内容区域	string/React.Element	–	–
prefixCls	class 前缀 默认 cp-ui-modal	string	–	–
className	样式类名	fun():void	–	–
maskClassName	弹出层样式类名	fun():void	–	–
onOk	点击确定回调函数	fun() : void	–	–
onCancel	点击取消回调函数	fun() : void	–	–
style	自定义样式	Object	–	–
maskClosable	点击浮层是否允许关闭	boolean	true	–
closable	是否显示右上角关闭图标	boolean	true	–
closeIcon	自定义右上角关闭图标	React.ReactNode	–	–
destroy	是否销毁(关闭后自动销毁)	boolean	true	–
maskAnimationName	弹出层动画类名	string	fade	–

说明

icon 图标遵循fontawesome规则

Input 输入框

输入框的展示

引入组件

import * as React from 'react'
import { useForm, Controller } from 'react-hook-form'
import { Input, Button, Icon, Row, Col } from 'cp-design'

Demo 代码

const { useRef } = React
export default function ButtonDemo() {
  const inputRef = (useRef < HTMLInputElement) | (null > null)
  const { handleSubmit, control, errors } = useForm() // initialise the hook
  const onSubmit = (data: any) => {
    console.log(data)
  }
  const getInputRef = (ele: HTMLInputElement) => {
    inputRef.current = ele
  }
  const handleFocus = (e: React.MouseEvent) => {
    e.preventDefault()
    if (!!inputRef.current) inputRef.current.focus()
  }
  const btnStyle = {
    background: 'linear-gradient(316deg, #f75cff 0%, rgb(236, 9, 51) 100%)',
    opacity: 0.5,
    display: 'block',
    margin: '0 auto',
    height: '2.8rem',
    borderRadius: '0.6rem',
    textAlign: 'center',
    lineHeight: '2.8rem',
    fontSize: '0.88rem',
    color: '#fff'
  }
  return (
    

      
Input 输入框
      
基本
      

        
标题
        
          
            This is required.}
                />
              }
              name="title0"
              control={control}
              rules={{ required: true }}
            />
          
        
        
标题
        
          
            
                      click to focus
                    
                  }
                  getInputRef={getInputRef}
                  placeholder="auto focus"
                  style={{ height: '2.5rem' }}
                  error={
                    errors.title1 && (
                      This is required.
                    )
                  }
                />
              }
              name="title1"
              control={control}
              rules={{ required: true }}
            />
          
        
        
自定义前缀
        
          
            }
                  placeholder="auto focus"
                  style={{ height: '2.5rem' }}
                  error={
                    errors.title2 && (
                      This is required.
                    )
                  }
                />
              }
              name="title2"
              control={control}
              rules={{ required: true }}
            />
          
        
        
自定义内部前缀
        
          
            }
                  placeholder="auto focus"
                  style={{ height: '2.5rem' }}
                  error={
                    errors.title3 && (
                      This is required.
                    )
                  }
                />
              }
              name="title3"
              control={control}
              rules={{ required: true }}
            />
          
        
        
价格
        
          
            }
                  placeholder="0.00"
                  style={{ height: '2.5rem' }}
                  error={
                    errors.title4 && (
                      This is required.
                    )
                  }
                />
              }
              name="title4"
              control={control}
              rules={{ required: true }}
            />
          
        
        
Format
        
银行卡
        
          
            This is required.}
                />
              }
              name="bankCard"
              control={control}
              rules={{ required: true }}
            />
          
        
        
手机号码
        
          
            This is required.}
                />
              }
              name="mobile"
              control={control}
              rules={{ required: true }}
            />
          
        
        
密码
        
          
            This is required.}
                />
              }
              name="password"
              control={control}
              rules={{ required: true }}
            />
          
        
        
数字键盘
        
          
            This is required.}
                />
              }
              name="number"
              control={control}
              rules={{ required: true }}
            />
          
        
        
禁用
        
          
            }
              name="number"
              control={control}
              rules={{ required: true }}
            />
          
        
        
          
            
              Submit
            
          
        
      
    

) }

Api

属性	说明	类型	默认值	可选
type	可以是银行卡 bankCard; 手机号 phone(此时最大长度固定为 11,maxLength 设置无效); 密码 password;类型:InputType	string	“text”	–
addonBefore	前置点击	React.ReactNode	–	–
addonAfter	后置点击	React.ReactNode	–	–
error	错误提示	string/React.Element	–	–
clear	是否显示清除	boolean	false	–
className	样式类名	fun():void	–	–
getInputRef	获取元素组件的 ref	(ele: HTMLInputElement) => void	–	–
style	自定义样式	Object	–	–
disabled	是否禁用	boolean	–	–
inlinePrefix	内嵌 input 前缀	React.ReactNode	–	–
inlineSuffix	内嵌 input 前缀	React.ReactNode	–	–
prefix	input 外前缀	React.ReactNode	–	–
suffix	input 外后缀	React.ReactNode	–	–
prefix	input 外前缀	string	–	–
value	value 值(受控与否参考 react-hook-form)	string	–	–
defaultValue	默认 value 值(受控与否参考 react-hook-form)	string	–	–

InputType

(‘text’ ,‘number’ , ‘mobile’ ,‘bankCard’ , ‘password’)

案例

mobile web demo

https://10086xiaozhang.github.io/CP-DESIGN

安装与使用

介绍

浏览器支持

• iOS
• Android 4.0+

链接

• 案例主页
• 组件文档
• 例子

欢迎贡献

有任何建议或意见您可以进行 提问。

作者Email

[email protected]

注明:文章转载:https://blog.csdn.net/XIAOZHANG86/article/details/105325681