npm 包 toon-ui 使用教程-JavaScript中文网-JavaScript教程资源分享门户

Toon-UI 是一个基于 Vue.js 的 UI 组件库，其设计和开发是由阿里图形图像算法团队完成的，包含了多种常用 UI 组件和一套配套的设计语言。

安装

可以通过 npm 包管理工具进行安装：

npm install toon-ui -S

然后在 Vue.js 项目的入口文件 main.js 中引入：

import Vue from 'vue';
import ToonUI from 'toon-ui';
import 'toon-ui/dist/toon-ui.css';

Vue.use(ToonUI);

使用

安装完成后，即可在 Vue.js 项目中引用 Toon-UI 组件：

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

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

Toon-UI 支持按需加载，每个组件都可以单独引用：

import { TButton } from 'toon-ui';

export default {
  components: {
    TButton
  }
};

组件

Toon-UI 包含多个常用 UI 组件，包括：

常用组件：按钮、图标、输入框、下拉框、日期选择器、页签、表格等；
表单组件：单选框、多选框、开关、滑动开关、评分、级联选择器、多选框等；
可视化组件：图表、进度条、气泡提示等。

下面以 TButton 按钮组件为例，介绍组件的基本用法。

TButton

TButton 是一个基础的按钮组件，支持不同颜色和尺寸的按钮。

基本用法

<t-button>默认按钮</t-button>
<t-button type="primary">主要按钮</t-button>
<t-button type="danger">危险按钮</t-button>

按钮尺寸

<t-button size="medium">中等按钮</t-button>
<t-button size="small">小按钮</t-button>
<t-button size="mini">迷你按钮</t-button>

禁用状态

<t-button disabled>禁用按钮</t-button>

结语

Toon-UI 是一个优秀的 Vue.js UI 组件库，它提供了多种常用组件，能大大提升开发效率。在使用过程中，需要对每个组件的 API 和用法进行充分的了解，同时也要遵循良好的设计原则和组件规范，这样才能使用 Toon-UI 强大的功能，实现高质量的 UI 和交互体验。

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