npm 包 canfei 使用教程

简介

canfei 是一个基于 React 的 UI 组件库，提供了一系列常用的组件，比如 Button、Input、Modal、Spin 等。它的设计理念是简单易用，样式简洁美观，可扩展性强。

canfei 包含了一些 React 组件以及相应的样式文件，可以快速地搭建简洁美观的页面。使用 canfei，可以大大简化页面开发工作，提高开发效率。

安装

可以通过 npm 安装 canfei:

npm install canfei

安装完成后，在你的代码中引入 canfei 的样式和组件：

import 'canfei/dist/index.css';
import { Button } from 'canfei';

如果你使用的是 TypeScript，则可以这样引入：

import 'canfei/dist/index.css';
import { Button } from 'canfei/dist/index.d';

使用

Button

Button 是一个常用的组件，可以通过以下代码使用：

import { Button } from 'canfei';

<Button>Click me!</Button>

Button 可以设置多种属性，包括：

• type: 按钮类型，可选值为 primary、secondary、danger、link，默认为 primary
• size: 按钮尺寸，可选值为 large、medium、small，默认为 medium
• disabled: 是否禁用按钮
• onClick: 点击按钮时触发的回调函数

<Button type="secondary" size="large" disabled onClick={() => console.log('Button clicked!')}>
  Click me!
</Button>

Input

Input 是一个常用的表单控件，可以通过以下代码使用：

import { Input } from 'canfei';

<Input placeholder="请输入内容" />

Input 可以设置多种属性，包括：

• value: input 的值
• defaultValue: input 的默认值
• disabled: 是否禁用 input
• onChange: input 内容变化时触发的回调函数
• onEnter: 用户按下回车键时触发的回调函数
• 其他常见的表单属性，如 type、maxlength、minlength 等

<Input placeholder="请输入内容" value={value} onChange={handleChange} onEnter={handleEnter} />

Modal

Modal 是一个弹窗组件，可以通过以下代码使用：

import { Modal } from 'canfei';

<Modal title="提示" visible={visible} onOk={handleOk} onCancel={handleCancel}>
  是否确认删除此项？
</Modal>

Modal 可以设置多种属性，包括：

• title: 弹窗标题
• visible: 是否显示弹窗
• onOk: 用户点击确认按钮时触发的回调函数
• onCancel: 用户点击取消按钮时触发的回调函数
• width: 弹窗宽度，默认为 520
• okText: 确认按钮文本，默认为 确认
• cancelText: 取消按钮文本，默认为 取消
• centered: 是否垂直居中显示，默认为 false

<Modal title="提示" visible={visible} onOk={handleOk} onCancel={handleCancel} centered>
  是否确认删除此项？
</Modal>

Spin

Spin 是一个加载状态指示器，可以通过以下代码使用：

import { Spin } from 'canfei';

<Spin spinning={loading}>
  <div className="content">页面内容</div>
</Spin>

Spin 可以设置多种属性，包括：

• spinning: 是否显示 Spin
• tip: Spin 的文本提示，默认为 加载中
• size: Spin 的大小，可选值为 small、medium、large，默认为 medium

<Spin spinning={loading} tip="正在加载..." size="large">
  <div className="content">页面内容</div>
</Spin>

总结

canfei 提供了一系列常用的组件，可以快速地搭建简洁美观的页面。使用 canfei，可以大大简化页面开发工作，提高开发效率。在开发过程中，我们可以根据实际需求来选择合适的组件，并根据组件的属性来进行定制。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005625a81e8991b448df99a