npm 包 zui-react 使用教程

阅读时长 17 分钟读完

简介

zui-react 是一款基于 React 的 UI 组件库，提供了丰富的组件和样式库，旨在为开发者提供便捷、美观、易用的 UI 解决方案。

zui-react 提供了可配置、易扩展的组件，可以通过简单的配置实现强大的功能，并支持自定义主题、样式和布局。

本文将介绍如何使用 zui-react 组件库，以及常用组件的用法及注意事项。

安装

使用 zui-react，需要先安装 React 和 ReactDOM，然后再安装 zui-react。

使用

在项目中使用 zui-react，需要先导入所需的组件。以 Button 为例：

-- -------------------- ---- -------
------ - ------ - ---- ------------

-------- ----- -
  ------ -
    -----
      ------------- -----------
    ------
  --
-

在上面的例子中，使用了 zui-react 的 Button 组件，并将其包裹在一个 div 标签中展示，输出结果为：

组件

zui-react 提供了许多常用组件，本文将以常用的 Button、Input、Checkbox、Radio、Select、Menu、Modal、Tabs 等组件为例，介绍其用法及注意事项。

Button

Button 组件用于展示可点击的按钮，常用 props 如下：

Prop Type Default Description
type 'primary' | 'secondary' | 'success' | 'danger' | ... 'default' 按钮的类型，决定了其颜色和样式
size 'small' | 'medium' | 'large' 'medium' 按钮的大小，决定了其字号和尺寸
outline boolean false 是否显示轮廓线
block boolean false 是否使用块级元素，使按钮占据整行
disabled boolean false 是否禁用
onClick function 点击按钮时触发的回调函数

以 primary 类型、medium 大小的按钮为例：

-- -------------------- ---- -------
------ - ------ - ---- ------------

-------- ----- -
  ------ -
    -----
      ------- -------------- ------------------- -----------
    ------
  --
-

效果如下：

Input

Input 组件用于输入文本，常用 props 如下：

Prop Type Default Description
type 'text' | 'password' | 'email' | 'number' | ... 'text' 输入框的类型，决定了其输入格式和校验规则
size 'small' | 'medium' | 'large' 'medium' 输入框的大小，决定了其字号和尺寸
placeholder string 输入框的占位符
value string 输入框的值
onChange function(event: React.ChangeEvent<htmlinputelement>): void 在输入框的值变化时触发的回调函数
onFocus function(event: React.FocusEvent<htmlinputelement>): void 输入框获得焦点时触发的回调函数
onBlur function(event: React.FocusEvent<htmlinputelement>): void 输入框失去焦点时触发的回调函数

以 medium 大小的文本输入框为例：

-- -------------------- ---- -------
------ - ----- - ---- ------------

-------- ----- -
  ------ -
    -----
      ------ ----------- ------------- -------------------- --
    ------
  --
-

效果如下：

Checkbox

Checkbox 组件用于多选，常用 props 如下：

Prop Type Default Description
value string checkbox 的值
checked boolean false checkbox 是否选中
onChange function 在 checkbox 的值变化时触发的回调函数

以一个 checkbox 组合为例：

-- -------------------- ---- -------
------ - -------- - ---- ------------

-------- ----- -
  ------ -
    -----
      --------- ---------------------------
      --------- ----------------------------
      --------- ----------------------------
    ------
  --
-

效果如下：

Radio

Radio 组件用于单选，常用 props 如下：

Prop Type Default Description
value string radio 的值
checked boolean false radio 是否选中
onChange function 在 radio 的值变化时触发的回调函数

以一个 radio 组合为例：

-- -------------------- ---- -------
------ - ----- - ---- ------------

-------- ----- -
  ------ -
    -----
      ------ -----------------------
      ------ -------------------------
    ------
  --
-

效果如下：

Select

Select 组件用于下拉选择，常用 props 如下：

Prop Type Default Description
options { value: string | number, label: string }[] [] 下拉列表的选项
value string | number 当前选择的值
onChange function(event: React.ChangeEvent<htmlselectelement>): void 在选择的值变化时触发的回调函数
placeholder string 下拉列表的占位符

以一个颜色选择器为例：

-- -------------------- ---- -------
------ - ------ - ---- ------------

----- ------ - -
  - ------ ------ ------ ---- --
  - ------ -------- ------ ---- --
  - ------ ------- ------ ---- --
  - ------ --------- ------ ---- --
--

-------- ----- -
  ------ -
    -----
      ------- ---------------- ------------------- --
    ------
  --
-

效果如下：

Menu

Menu 组件用于展示菜单，常用 props 如下：

Prop Type Default Description
dataSource { key: string, title: string， ... }[] [] 菜单项的数据源，每个菜单项需包含 key 和 title
mode 'horizontal' | 'vertical' 'horizontal' 菜单的展示方式
onSelect function(key: string): void 点击某个菜单项时触发

以一个垂直展示的菜单为例：

-- -------------------- ---- -------
------ - ---- - ---- ------------

----- ---------- - -
  - ---- ------- ------ ---- --
  - ---- -------- ------ ------ --
  - ---- ---------- ------ ------ --
--

-------- ----- -
  ------ -
    -----
      ----- ----------------------- --------------- --
    ------
  --
-

效果如下：

Modal

Modal 组件用于展示对话框，常用 props 如下：

Prop Type Default Description
title string 对话框的标题
visible boolean false 对话框是否可见
footer ReactNode 对话框的底部
onCancel function(): void 点击对话框外部或取消按钮时触发的回调函数
onOk function(): void 点击确认按钮时触发的回调函数
cancelText string "取消" 取消按钮的文本
okText string "确认" 确认按钮的文本
width string | number 520 对话框的宽度
height string | number 对话框的高度

以一个简单的对话框为例：

-- -------------------- ---- -------
------ - ------ ------ - ---- ------------
------ - -------- - ---- --------

-------- ----- -
  ----- --------- ----------- - ----------------

  ------ -
    -----
      ------- ----------- -- --------------------------------
      ------
        ----------
        -----------------
        ------------ -- ------------------
        -------- -- -------------------
        ----------
      --------
    ------
  --
-

效果如下：

Tabs

Tabs 组件用于展示分页，常用 props 如下：

Prop Type Default Description
dataSource { key: string, title: string， ... }[] [] 选项卡的数据源，每个选项卡需包含 key 和 title
activeKey string 当前选中的选项卡的 key
onChange function(activeKey: string): void 在选中某个选项卡时触发的回调函数

以一个简单的分页为例：

-- -------------------- ---- -------
------ - ---- - ---- ------------

----- ---------- - -
  - ---- ------- ------ ---- --
  - ---- -------- ------ ------ --
  - ---- ---------- ------ ------ --
--

-------- ----- -
  ------ -
    -----
      ----- ----------------------- ---------------- --
    ------
  --
-

效果如下：

总结

zui-react 是一款基于 React 的 UI 组件库，提供了可配置、易扩展的组件和样式库，为开发者提供便捷、美观、易用的 UI 解决方案。

本文介绍了如何使用 zui-react，包括安装、导入和使用，以及常用组件的用法及注意事项。希望本文能为大家在使用 zui-react 进行前端开发时提供启示和参考。

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

纠错
反馈
相关推荐
精选内容