Cf-design NPM | npm.io

cf-design——基于react的轻量级UI组件库

cf-design是笔者开发的基于react的轻量级组件库，目前不依赖任何第三方ui组件库，支持按需导入，可定制。官网地址website: cf-design——基于react的轻量级UI组件库

如果觉得官网地址访问太慢，可以直接移步github地址：cf-design——基于react的轻量级UI组件库

目前已开发完成如下ui组件：

Alert 警告提示组件
Badge 徽标数组件
Button 按钮组件
Drawer 抽屉组件
Empty 空数据组件
Icon icon组件
Input 输入框组件
Modal 轻量实用的模态窗组件
Notification 通知组件
Process 进度条组件
Spin 加载中组件
Switch 开关组件
Tag tag组件

正在开发的组件：

Checkbox 多选组件
Select 选择框组件

后续会开发出更多优质轻量组件，敬请关注。

技术实现与版本

该组件库基于一下技术版本开发：

react: 16.8.6
react-dom: 6.8.6
classnames

文档demo演示

使用

1.安装

npm install cf-design

或者用yarn安装

yarn add cf-design

2. 使用

import { 
  Button,
  Empty,
  Progress,
  Tag,
  Switch,
  Drawer,
  Badge,
  Alert
} from 'cf-design'
import { useState } from 'react'
import styles from './index.css'

export default function() {
  const [visible, setVisible] = useState(false)
  let show = () => { setVisible(true)}
  let close = () => { setVisible(false)}
  return (
    <div className={styles.normal}>
      <Button className={styles.btn}>default</Button>
      <Button className={styles.btn} type="warning">warning</Button>
      <Button className={styles.btn} type="primary">primary</Button>
      <Button className={styles.btn} type="info">info</Button>
      <Button className={styles.btn} type="pure">pure</Button>
      <Button className={styles.btn} type="primary" shape="circle">circle</Button>
      <Button className={styles.mb16} type="primary" block>primary&block</Button>
      <Button type="warning" shape="circle" block onClick={show}>circle&block</Button>
      <div className={styles.mb16}></div>
      <Badge text="ddd" status="warning">6666ngd</Badge>
      <div className={styles.mb16}></div>
      <Alert message="success tip" />
      <Alert message="success tip" type="success" />
      <Alert message="success tip" type="error" />
      <Alert message="success tip" type="info" />
      <Alert message="success tip" type="info" closable />
      <Alert message="success tip" description="skfjdsalajdfjadkfja" closable type="success" />
 
    </div>
  )
}