npm 包 zentocompo 使用教程

什么是 zentocompo?

zento是一个基于react的UI组件库，提供了丰富的UI组件和对应的文档。Zentocompo是对zento的封装，提供了更丰富的组件并扩展了一些api。Zentocompo可以帮助我们更好地构建React组件化开发的应用。下面我们将详细介绍如何使用这个npm包。

安装

在终端或者命令行中输入以下指令进行安装：

npm install --save zentocompo

使用

1. 引入需要的组件

Zentocompo中的组件都是按需引入，可以在需要的js文件中引入。

import { Button } from 'zentocompo';

1. 使用组件

以Button组件为例：

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

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

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

1. 修改样式

可以根据自己的需求修改组件的样式。以Button组件为例：

/* 修改按钮背景色 */
.zento-btn-primary {
  background-color: #1890ff;
}
/* 修改按钮文字颜色 */
.zento-btn-primary.zento-btn-primary-hover {
  color: #fff;
}

1. 使用扩展API

import { Loading } from 'zentocompo';
const loading = Loading.show();
setTimeout(() => {
  loading.hide();
}, 5000);

API文档

Zentocompo提供了详细的API文档，可以在https://github.com/zentocompo/zento查看。

结语

以上就是关于Zentocompo的简单使用教程，希望能帮助大家更好的使用这个npm包。

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