ZUI 3

Appearance

快速上手 ​

下载使用 ​

你可以从如下地址下载 ZUI 的最新版本：

点击下载 从 GitHub 下载

下载后将如下文件解压到你的项目中：

text
zui/
├── zui.css
├── zui.js
└── zui.esm.js

下载后在页面中导入：

html
<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>ZUI</title>
    <link rel="stylesheet" href="./zui/zui.css">
  </head>
  <body>
    <h1>ZUI is awesome!</h1>
    <a class="btn" href="/">访问 ZUI 网站</a>
    <script src="./zui/zui.js"></script>
  </body>
</html>

使用 CDN ​

使用 CDN 可以快速使用 ZUI，与下载使用基本一样，只需要将相关资源文件替换为 CDN 上的地址即可：

html
<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>ZUI</title>
    <link rel="stylesheet" href="///cdn.jsdelivr.net/npm/zui/dist/3.0.0/zui.css">
  </head>
  <body>
    <h1>ZUI is awesome!</h1>
    <a class="btn" href="/">访问 ZUI 网站</a>
    <script src="///cdn.jsdelivr.net/npm/zui/dist/3.0.0/zui.js" crossorigin="anonymous"></script>
  </body>
</html>
html
<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>ZUI</title>
    <link rel="stylesheet" href="///cdn.bootcdn.net/ajax/libs/zui/3.0.0/zui.css">
  </head>
  <body>
    <h1>ZUI is awesome!</h1>
    <a class="btn" href="/">访问 ZUI 网站</a>
    <script src="///cdn.bootcdn.net/ajax/libs/zui/3.0.0/zui.js" crossorigin="anonymous"></script>
  </body>
</html>
html
<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>ZUI</title>
    <link rel="stylesheet" href="///unpkg.com/zui@3.0.0/zui.css">
  </head>
  <body>
    <h1>ZUI is awesome!</h1>
    <a class="btn" href="/">访问 ZUI 网站</a>
    <script src="///unpkg.com/zui@3.0.0/zui.js" crossorigin="anonymous"></script>
  </body>
</html>

使用 JS 组件 ​

无论是下载还是使用 CDN，导入 zui.js 之后，你就可以使用 ZUI 中的 JS 组件了，ZUI 提供的所有 JS 辅助方法和组件类都在全局对象 zui 上进行访问，例如：

html
<nav id="myNav"></nav>

<script>
const {Nav, Messager} = zui;

const nav = new Nav('#myNav', {
  items: [
    {text: 'Home'},
    {text: 'Blog'},
  ]
});

Messager.show('你好，今天是：' + zui.formatDate(new Date(), 'yyyy年M月d日'));
</script>

使用 ES Module ​

ZUI 还提供了 ES Module 版本，上例中的 JS 代码可以改为：

html
<nav id="myNav"></nav>

<script>
import {Nav, Messager, formatDate} from './zui/zui.esm.js';

const nav = new Nav('#myNav', {
  items: [
    {text: 'Home'},
    {text: 'Blog'},
  ]
});

Messager.show('你好，今天是：' + formatDate(new Date(), 'yyyy年M月d日'));
</script>

使用 zui-create 声明组件 ​

在 ZUI 中，所有 JS 组件支持通过声明 zui-create 属性来自动创建，例如：

使用 zui-create-<component> 来定义组件选项，例如：

注意

通过 zui-create 创建的组件，只会在页面加载完成后自动扫描一次，如果需要在动态添加的元素上利用 zui-create 创建组件，需要手动执行 $(element).zuiInit() 初始化。

使用 npm ​

你可以使用 npm 安装 ZUI：

bash
$ npm install zui

然后在 JS 代码中导入：

js
import zui from 'zui';
import 'zui/css';

zui.Messager.show('Hello!');

如果你仅仅需要 ZUI 中的单个组件，例如 数据表格，你可以这样导入：

js
import {DTable} from 'zui/lib/dtable';
import 'zui/lib/dtable/css';

const myTable = new DTable('#myTable', {...});