From a13871502ee9343134da49c6c112e4629e3533d0 Mon Sep 17 00:00:00 2001 From: catouse Date: Mon, 11 Dec 2023 09:04:18 +0000 Subject: [PATCH] deploy: faea88ab402a4ab75ba41c93248c4f5a78698419 --- 3/404.html | 6 +++--- 3/frames/zui.html | 6 +++--- 3/guide/config/base/color.html | 6 +++--- 3/guide/config/base/font.html | 6 +++--- 3/guide/config/base/rounded.html | 6 +++--- 3/guide/config/base/screens.html | 6 +++--- 3/guide/config/base/shadow.html | 6 +++--- 3/guide/config/base/spacing.html | 6 +++--- 3/guide/customize/build.html | 6 +++--- 3/guide/customize/dev.html | 6 +++--- 3/guide/customize/exts-lib.html | 6 +++--- 3/guide/index.html | 6 +++--- 3/guide/start/index.html | 6 +++--- 3/hashmap.json | 2 +- 3/index.html | 6 +++--- 3/lib/components/alert/index.html | 6 +++--- 3/lib/components/avatar-group/index.html | 6 +++--- 3/lib/components/avatar/index.html | 6 +++--- 3/lib/components/avatar/js.html | 6 +++--- 3/lib/components/breadcrumb/index.html | 6 +++--- 3/lib/components/btn-group/index.html | 6 +++--- 3/lib/components/btn-group/js.html | 6 +++--- 3/lib/components/button/index.html | 6 +++--- 3/lib/components/button/js.html | 6 +++--- 3/lib/components/color-picker/index.html | 6 +++--- 3/lib/components/contextmenu/index.html | 6 +++--- 3/lib/components/dashboard/index.html | 6 +++--- 3/lib/components/datetime-picker/date.html | 6 +++--- 3/lib/components/datetime-picker/datetime.html | 6 +++--- 3/lib/components/datetime-picker/time.html | 6 +++--- 3/lib/components/dropdown/index.html | 6 +++--- 3/lib/components/kanban/index.html | 6 +++--- 3/lib/components/label/index.html | 6 +++--- 3/lib/components/menu/index.html | 6 +++--- 3/lib/components/menu/js.html | 6 +++--- 3/lib/components/messager/index.html | 6 +++--- 3/lib/components/modal/index.html | 6 +++--- 3/lib/components/modal/js.html | 6 +++--- 3/lib/components/nav/index.html | 6 +++--- 3/lib/components/nav/js.html | 6 +++--- 3/lib/components/pager/index.html | 6 +++--- 3/lib/components/pager/js.html | 6 +++--- 3/lib/components/panel/index.html | 6 +++--- 3/lib/components/picker/index.html | 6 +++--- 3/lib/components/progress-circle/index.html | 6 +++--- 3/lib/components/progress/index.html | 6 +++--- 3/lib/components/scrollbar/index.html | 6 +++--- 3/lib/components/search-box/index.html | 6 +++--- 3/lib/components/table/index.html | 6 +++--- 3/lib/components/tabs/index.html | 6 +++--- 3/lib/components/toolbar/index.html | 6 +++--- 3/lib/components/toolbar/js.html | 6 +++--- 3/lib/components/tooltip/index.html | 6 +++--- 3/lib/components/tree/index.html | 6 +++--- 3/lib/components/upload-imgs/index.html | 6 +++--- 3/lib/components/upload/index.html | 6 +++--- 3/lib/dtable/dtable/index.html | 6 +++--- 3/lib/dtable/dtable/plugins.html | 6 +++--- 3/lib/forms/checkbox/index.html | 6 +++--- 3/lib/forms/form/index.html | 6 +++--- 3/lib/forms/input-control/index.html | 6 +++--- 3/lib/forms/input-group/index.html | 6 +++--- 3/lib/helpers/core/cash.html | 6 +++--- 3/lib/helpers/core/component.html | 6 +++--- 3/lib/helpers/helpers/index.html | 6 +++--- 3/lib/helpers/store/index.html | 6 +++--- 3/lib/icons/icons/index.html | 6 +++--- 3/lib/index.html | 6 +++--- 3/public/icons/fontawesome-license.html | 6 +++--- 3/themes/index.html | 6 +++--- 3/utilities/backgrounds/utilities/index.html | 6 +++--- 3/utilities/borders/utilities/border-color.html | 6 +++--- 3/utilities/borders/utilities/border-radius.html | 6 +++--- 3/utilities/borders/utilities/border-width.html | 6 +++--- 3/utilities/effects/utilities/animation.html | 6 +++--- 3/utilities/effects/utilities/filter.html | 6 +++--- 3/utilities/effects/utilities/flip.html | 6 +++--- 3/utilities/effects/utilities/opacity.html | 6 +++--- 3/utilities/effects/utilities/rotate.html | 6 +++--- 3/utilities/effects/utilities/scale.html | 6 +++--- 3/utilities/effects/utilities/shadow.html | 6 +++--- 3/utilities/flex/utilities/align-content.html | 6 +++--- 3/utilities/flex/utilities/align-items.html | 6 +++--- 3/utilities/flex/utilities/align-self.html | 6 +++--- 3/utilities/flex/utilities/basis.html | 6 +++--- 3/utilities/flex/utilities/direction.html | 6 +++--- 3/utilities/flex/utilities/flex.html | 6 +++--- 3/utilities/flex/utilities/gap.html | 6 +++--- 3/utilities/flex/utilities/grow.html | 6 +++--- 3/utilities/flex/utilities/justify-content.html | 6 +++--- 3/utilities/flex/utilities/order.html | 6 +++--- 3/utilities/flex/utilities/shrink.html | 6 +++--- 3/utilities/flex/utilities/wrap.html | 6 +++--- 3/utilities/index.html | 6 +++--- 3/utilities/interactivity/utilities/disabled.html | 6 +++--- 3/utilities/interactivity/utilities/pointer-events.html | 6 +++--- 3/utilities/interactivity/utilities/scroll.html | 6 +++--- 3/utilities/interactivity/utilities/state.html | 6 +++--- 3/utilities/interactivity/utilities/user-select.html | 6 +++--- 3/utilities/layout/utilities/aspect-ratio.html | 6 +++--- 3/utilities/layout/utilities/container.html | 6 +++--- 3/utilities/layout/utilities/display.html | 6 +++--- 3/utilities/layout/utilities/floats.html | 6 +++--- 3/utilities/layout/utilities/object-fit.html | 6 +++--- 3/utilities/layout/utilities/overflow.html | 6 +++--- 3/utilities/layout/utilities/position.html | 6 +++--- 3/utilities/layout/utilities/top-right-bottom-left.html | 6 +++--- 3/utilities/layout/utilities/visibility.html | 6 +++--- 3/utilities/layout/utilities/z-index.html | 6 +++--- 3/utilities/sizing/utilities/height.html | 6 +++--- 3/utilities/sizing/utilities/width.html | 6 +++--- 3/utilities/spacing/utilities/margin.html | 6 +++--- 3/utilities/spacing/utilities/padding.html | 6 +++--- 3/utilities/spacing/utilities/space.html | 6 +++--- 3/utilities/style/utilities/outline.html | 6 +++--- 3/utilities/style/utilities/pale.html | 6 +++--- 3/utilities/style/utilities/solid.html | 6 +++--- 3/utilities/typography/utilities/font-family.html | 6 +++--- 3/utilities/typography/utilities/font-size.html | 6 +++--- 3/utilities/typography/utilities/font-weight.html | 6 +++--- 3/utilities/typography/utilities/leading.html | 6 +++--- 3/utilities/typography/utilities/line-clamp.html | 6 +++--- 3/utilities/typography/utilities/text-align.html | 6 +++--- 3/utilities/typography/utilities/text-color.html | 6 +++--- 3/utilities/typography/utilities/text-overflow.html | 6 +++--- 3/utilities/typography/utilities/vertical-align.html | 6 +++--- 3/utilities/typography/utilities/whitespace.html | 6 +++--- 3/utilities/typography/utilities/word-break.html | 6 +++--- 128 files changed, 382 insertions(+), 382 deletions(-) diff --git a/3/404.html b/3/404.html index d51fee8ed5..9ca43130c0 100644 --- a/3/404.html +++ b/3/404.html @@ -11,13 +11,13 @@ - - + +
ZUI 3

404

PAGE NOT FOUND

But if you don't change your direction, and if you keep looking, you may end up where you are heading.
Take me home

MIT License (MIT)

Copyright (C) 2022 cnezsoft.com

- + \ No newline at end of file diff --git a/3/frames/zui.html b/3/frames/zui.html index 24d410deee..fd9aa305d0 100644 --- a/3/frames/zui.html +++ b/3/frames/zui.html @@ -14,15 +14,15 @@ - - + +
- + \ No newline at end of file diff --git a/3/guide/config/base/color.html b/3/guide/config/base/color.html index df51b86536..99b89c0d7f 100644 --- a/3/guide/config/base/color.html +++ b/3/guide/config/base/color.html @@ -14,8 +14,8 @@ - - + + @@ -48,7 +48,7 @@ --color-primary-900-rgb: 88, 34, 133; --color-primary-950-rgb: 59, 14, 99; }

提示

在定义 CSS 变量覆盖调色板时，除了定义 50~950 的十六进制颜色外，还需要定义对应的 RGB 颜色，这是为了在一些特殊场景下通过改变透明度来实现颜色的变化。

注意

如果你需要自定义配色，建议只通过修改调色板来实现，不建议修改界面公共颜色，除非主题需要实现对比度更明显的风格，任何时候都不应该修改特殊颜色的定义。

更多关于主题的内容参考 主题 文档。

- + \ No newline at end of file diff --git a/3/guide/config/base/font.html b/3/guide/config/base/font.html index a4fef5a595..47af6b11a8 100644 --- a/3/guide/config/base/font.html +++ b/3/guide/config/base/font.html @@ -14,8 +14,8 @@ - - + + @@ -43,7 +43,7 @@ 月光如流水一般，静静地泻在这一片叶子和花上。薄薄的青雾浮起在荷塘里。叶子和花仿佛在牛乳中洗过一样；又像笼着轻纱的梦。
leading-relaxed
.leading-relaxed
—宽松
line-height: line-height
So I started to walk into the water. I won't lie to you boys, I was terrified. But I pressed on, and as I made my way past the breakers a strange calm came over me. I don't know if it was divine intervention or the kinship of all living things but I tell you Jerry at that moment, I was a marine biologist.
 月光如流水一般，静静地泻在这一片叶子和花上。薄薄的青雾浮起在荷塘里。叶子和花仿佛在牛乳中洗过一样；又像笼着轻纱的梦。
leading-loose
.leading-loose
—松散
line-height: line-height
So I started to walk into the water. I won't lie to you boys, I was terrified. But I pressed on, and as I made my way past the breakers a strange calm came over me. I don't know if it was divine intervention or the kinship of all living things but I tell you Jerry at that moment, I was a marine biologist.
 月光如流水一般，静静地泻在这一片叶子和花上。薄薄的青雾浮起在荷塘里。叶子和花仿佛在牛乳中洗过一样；又像笼着轻纱的梦。

在 ZUI 中可以通过 CSS 工具类来设置行高，详细用法参加 CSS 工具类 / 排版 / 行高 文档。

- + \ No newline at end of file diff --git a/3/guide/config/base/rounded.html b/3/guide/config/base/rounded.html index 7aae211ef0..e44583af5d 100644 --- a/3/guide/config/base/rounded.html +++ b/3/guide/config/base/rounded.html @@ -14,8 +14,8 @@ - - + + @@ -32,7 +32,7 @@ --radius-3xl: 1.5rem; --radius-full: 9999px; }

自定义主题 ​

可以通过定制主题来修改圆角设置，具体参见 主题 文档。

- + \ No newline at end of file diff --git a/3/guide/config/base/screens.html b/3/guide/config/base/screens.html index ebce1ab83c..c573c3abbe 100644 --- a/3/guide/config/base/screens.html +++ b/3/guide/config/base/screens.html @@ -14,8 +14,8 @@ - - + + @@ -53,7 +53,7 @@ --screen-xl: 1280px; --screen-2xl: 1536px; }

自定义主题 ​

可以通过定制主题来修改屏幕断点设置，具体参见 主题 文档。

- + \ No newline at end of file diff --git a/3/guide/config/base/shadow.html b/3/guide/config/base/shadow.html index 08701b3bc6..ca7d719428 100644 --- a/3/guide/config/base/shadow.html +++ b/3/guide/config/base/shadow.html @@ -14,8 +14,8 @@ - - + + @@ -31,7 +31,7 @@ --shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05); --shadow-none: none; }

自定义主题 ​

可以通过定制主题来修改阴影设置，具体参见 主题 文档。

- + \ No newline at end of file diff --git a/3/guide/config/base/spacing.html b/3/guide/config/base/spacing.html index e1908c38ca..9fc461ccdb 100644 --- a/3/guide/config/base/spacing.html +++ b/3/guide/config/base/spacing.html @@ -14,13 +14,13 @@ - - + +
ZUI 3

间距 ​

间距配置 ​

为了方便实现风格一致的交互界面，ZUI 预置了间距设置。下面为默认的间距配置：

名称
实际值
预览
0
width
px
width
0.5
width
1
width
1.5
width
2
width
2.5
width
3
width
3.5
width
4
width
5
width
6
width
7
width
8
width
9
width
10
width
11
width
12
width
14
width
16
width
20
width
24
width
28
width
32
width
36
width
40
width
44
width
48
width
52
width
56
width
60
width
64
width
72
width
80
width
96
width

4px 约定

通过上表可以看到，除了 0 和 px 比较特殊的设置，其他间距实际值都是 4px 的倍数，这是有意设计，无论是设计还是开发都应该将间距为 4px 的倍数作为约定，这样更有利于实现风格一致的交互界面。

当以上间距无法满足要求时，如果需要引入新的间距值也应当遵从 4px 约定。

间距会影响所有相关 CSS 属性配置，包括 padding、margin、width、height、maxHeight、gap、inset 等。

使用间距 ​

在 ZUI 中提供了大量 CSS 工具类，可以非常方便的来应用间距配置，包括：

如需了解，请参考对应的文档。

自定义间距 ​

可以通过定制主题来修改间距设置，具体参见 主题 文档。

MIT License (MIT)

Copyright (C) 2022 cnezsoft.com

- + \ No newline at end of file diff --git a/3/guide/customize/build.html b/3/guide/customize/build.html index 758c6546d9..3a0452ccab 100644 --- a/3/guide/customize/build.html +++ b/3/guide/customize/build.html @@ -14,13 +14,13 @@ - - + +
ZUI 3

打包 ​

执行如下命令进行打包操作：

sh
pnpm build

MIT License (MIT)

Copyright (C) 2022 cnezsoft.com

- + \ No newline at end of file diff --git a/3/guide/customize/dev.html b/3/guide/customize/dev.html index 33858ad126..d147ebfe69 100644 --- a/3/guide/customize/dev.html +++ b/3/guide/customize/dev.html @@ -14,13 +14,13 @@ - - + +
ZUI 3

开发 ​

开发服务 ​

执行如下命令启动开发服务：

shell
$ pnpm dev

开发服务器启动后，默认情况下可以通过网址：http://localhost:5173/ 来访问开发服务页面。通过页面上的组件导航，可以访问对应的组件开发页面。也可以将组件名附加到网址后面，直接访问对应的组件页面，例如 http://localhost:5173/button/。

在开发服务页面上支持热更新，当开发文件变更后会自动反馈到开发服务页面上。

对组件进行开发调试 ​

组件开发目录 ​

ZUI3 每个组件在一个独立的目录内，拥有自己的 package.json 文件，使得组件可以独立作为 npm 包来使用，也可以单独作为子项目进行开发维护。

提示

通常组件通过在 package.json 文件中设置属性 private: true 来让包仅在 zui3 工作空间内可用，但组件仍然拥有作为公开的包发布到 npm 上进行独立使用。

MIT License (MIT)

Copyright (C) 2022 cnezsoft.com

- + \ No newline at end of file diff --git a/3/guide/customize/exts-lib.html b/3/guide/customize/exts-lib.html index 0cd5bf5959..1cd461120a 100644 --- a/3/guide/customize/exts-lib.html +++ b/3/guide/customize/exts-lib.html @@ -14,15 +14,15 @@ - - + +
ZUI 3

组件库扩展 ​

ZUI3 组件库内置了大量组件，并支持集中开发、调试和打包，其中打包还支持只选择指定的组件进行个性化定制，同步输出组件库文档。但当需求扩展到组件库之外时，就需要用到扩展组件库了。ZUI3 支持扩展组件库模式，可以从其他位置引入一个或多个组件库目录，享受集中开发、调试和打包。下面介绍扩展组件库的使用方法。

定义扩展库 ​

扩展组件库可以来自本地系统的任意位置，只需要提供一个路径，例如：

txt
/Users/TaiJi/Projects/zui3_exts/lib/

扩展组件库的目录结构与 ZUI3 /lib/ 下的目录结构一致，下面的每个子目录为一个独立的组件，详细定义参考 开发文档。

添加扩展库 ​

在 zui3 项目根目录执行：

shell
$ pnpm extend-lib -- <ext_lib_path> <lib_name>

其中参数 ext_lib_path 为扩展组件库路径，<lib_name> 为扩展组件库名称。例如：

shell
$ pnpm extend-lib -- /Users/TaiJi/Projects/zui3_exts/lib/ zentao

执行上述命令之后，会将组件库目录文件拷贝到 zui3/lib_name 目录下，同时会在 zui3/exts/libs.json 文件中记录此扩展库的名称和路径。

json
{
     "zentao": "/Users/TaiJi/Projects/zui3_exts/lib/*"
 }

实际上，你也可以通过自己编辑这个文件来添加扩展库。

启动开发服务 ​

要在开发模式中包含对扩展组件库的开发调试，只需要执行如下命令代替 pnpm dev 命令即可：

shell
$ pnpm dev:exts

当添加了多个扩展库时，上述命令会包含所有扩展库，有时只需要包含特定的扩展库，只需要自定义 --lib 参数即可：

shell
$ pnpm dev:exts --lib=zui,zentao

启动文档服务器 ​

要在文档网站服务模式中包含对扩展组件库的文档支持，只需要如下命令代替 pnpm docs:dev 命令即可：

shell
$ pnpm docs:dev:exts

打包 ​

打包时如果需要将扩展库中的组件也进行打包，则需要添加 --exts 参数，然后就可以在需要打包的组件清单中指定扩展库中的组件名称：

shell
$ pnpm build -- label @zentao/status-label --exts

如果不指定名称，则默认打包仍然只打包内置组件库的组件，例如下面的命令仍然相当于 pnpm build：

shell
$ pnpm build -- --exts

如果需要将所有内置组件库和扩展库中的所有组件一并打包，可以使用如下命令：

shell
$ pnpm build -- zui+exts --exts --name=zentao

当添加了多个扩展库时，上述命令会包含所有扩展库，有时只需要包含特定的扩展库，只需要自定义 --exts 参数即可：

shell
$ pnpm build -- zui+exts --exts=zui,zentao

MIT License (MIT)

Copyright (C) 2022 cnezsoft.com

- + \ No newline at end of file diff --git a/3/guide/index.html b/3/guide/index.html index dba685d0ba..a368a2ee73 100644 --- a/3/guide/index.html +++ b/3/guide/index.html @@ -14,13 +14,13 @@ - - + +
ZUI 3

指引 ​

MIT License (MIT)

Copyright (C) 2022 cnezsoft.com

- + \ No newline at end of file diff --git a/3/guide/start/index.html b/3/guide/start/index.html index 695bfcedad..e441e2d37d 100644 --- a/3/guide/start/index.html +++ b/3/guide/start/index.html @@ -14,13 +14,13 @@ - - + +
ZUI 3

快速开始 ​

兼容性 ​

支持的浏览器 ​

  • Chrome：49+
  • Firefox：45+
  • Safari：10+
  • Edge：13+
  • Chrome for Android：112+
  • iOS Safari：10+

关键特性 ​

JS ​

  • ✅ let、const
  • ✅ 箭头函数
  • ✅ 模版字符串
  • ✅ class
  • ✅ symbol
  • ✅ Set、Map
  • ✅ Promise
  • ✅ 扩展运算符 ...
  • ✅ Object.assign、Object.keys
  • 🚫 Object.entries、Object.values
  • 🚫 async、await
  • 🚫 解构赋值

CSS ​

  • ✅ var()
  • ✅ calc()
  • 🚫 vw、vh

第三方依赖 ​

如果把握不准对照支持的浏览器参考 https://caniuse.com/ 。

MIT License (MIT)

Copyright (C) 2022 cnezsoft.com

- + \ No newline at end of file diff --git a/3/hashmap.json b/3/hashmap.json index b0375624f1..96b4fc4f3f 100644 --- a/3/hashmap.json +++ b/3/hashmap.json @@ -1 +1 @@ -{"guide_config_base_shadow.md":"e7pm6VGr","index.md":"lNn0oWiY","guide_customize_dev.md":"oKm0yNm-","guide_customize_exts-lib.md":"naEnYGK3","lib_components_btn-group_index.md":"P6X4Uj-v","guide_start_index.md":"0ECuDBas","guide_index.md":"zb6iAC3j","lib_components_avatar_index.md":"on6LHI_B","guide_config_base_spacing.md":"Uhi_HuQl","guide_config_base_screens.md":"lCpD2IIG","lib_components_avatar-group_index.md":"CGIYh2ZT","lib_components_btn-group_js.md":"RLAi5M06","lib_components_alert_index.md":"TF1oMf1u","guide_customize_build.md":"_7LHPcel","guide_config_base_font.md":"D4mbPRTx","frames_zui.md":"VqfdXyiC","lib_components_avatar_js.md":"kOvgHoDs","lib_components_dashboard_index.md":"AtdRTL0C","guide_config_base_color.md":"UVJryFfP","guide_config_base_rounded.md":"VN9xJ1oj","lib_components_dropdown_index.md":"NpEWijAq","lib_components_datetime-picker_date.md":"B4ROwqJR","lib_components_datetime-picker_datetime.md":"3DIx3uV1","lib_components_datetime-picker_time.md":"pn481CNy","lib_components_label_index.md":"g02W8n5e","lib_components_kanban_index.md":"oX0pCFLD","lib_components_contextmenu_index.md":"eVvUypv8","lib_components_modal_js.md":"MK8RXE6Z","utilities_flex_utilities_basis.md":"48No_kl0","lib_components_nav_js.md":"k_adN9FF","lib_components_nav_index.md":"E1qDT4TB","lib_components_search-box_index.md":"bRbDNc4S","lib_components_tabs_index.md":"tZqbPcct","lib_components_table_index.md":"M0dBxE4q","lib_components_toolbar_js.md":"FSRtUz4L","lib_components_upload_index.md":"e_QoUJiv","lib_components_toolbar_index.md":"RTqNPr7H","lib_helpers_core_cash.md":"pOzFRZml","lib_helpers_core_component.md":"6qFW_J1S","lib_helpers_store_index.md":"mlcbVLx7","lib_helpers_helpers_index.md":"_jSE_p54","lib_icons_icons_index.md":"p1nUoLFJ","lib_index.md":"4SYdVkVe","public_icons_fontawesome-license.md":"7HRnEV5s","themes_index.md":"4SUbxPGm","utilities_borders_utilities_border-color.md":"s86NX7H1","utilities_backgrounds_utilities_index.md":"PLLQta50","utilities_borders_utilities_border-radius.md":"DedS5Oyk","utilities_effects_utilities_animation.md":"6kKTQHVR","lib_forms_input-group_index.md":"GDOwGBrM","utilities_effects_utilities_filter.md":"aTAVIfK2","utilities_borders_utilities_border-width.md":"gGVLqAsK","utilities_effects_utilities_opacity.md":"5hDbBv20","utilities_effects_utilities_rotate.md":"pK6STRLn","utilities_effects_utilities_scale.md":"Mo2zXXek","utilities_effects_utilities_flip.md":"pa2B36Qs","utilities_effects_utilities_shadow.md":"o-xfLwbe","utilities_flex_utilities_align-items.md":"VeC0U2om","lib_components_menu_index.md":"n-QwI107","utilities_flex_utilities_align-self.md":"jP-lgEEr","utilities_layout_utilities_z-index.md":"xXbfLSWk","utilities_flex_utilities_align-content.md":"XKRwuW3v","utilities_flex_utilities_gap.md":"vfNNNXWb","utilities_flex_utilities_flex.md":"wFooiA23","utilities_flex_utilities_direction.md":"8k9i-6xm","utilities_flex_utilities_shrink.md":"j4Sslaid","utilities_interactivity_utilities_pointer-events.md":"whF5XYs6","utilities_interactivity_utilities_state.md":"aTX9ijV7","utilities_interactivity_utilities_scroll.md":"XSU-c0TQ","utilities_layout_utilities_aspect-ratio.md":"U3vDgT4D","utilities_interactivity_utilities_user-select.md":"VbESdl8o","utilities_layout_utilities_floats.md":"uLz_A9CH","utilities_layout_utilities_display.md":"3lnBLpSi","utilities_layout_utilities_container.md":"7gXB2eoG","utilities_layout_utilities_object-fit.md":"d3L7JRyX","utilities_layout_utilities_overflow.md":"KK2VGZmX","utilities_layout_utilities_visibility.md":"jXUtTmwo","utilities_typography_utilities_leading.md":"Kl_FGxKV","utilities_layout_utilities_position.md":"rVqSviEg","utilities_sizing_utilities_height.md":"1fabQImK","utilities_layout_utilities_top-right-bottom-left.md":"6s17cp16","utilities_sizing_utilities_width.md":"thSwneK6","utilities_style_utilities_outline.md":"XFZ1ZdL2","utilities_spacing_utilities_margin.md":"7XqwhIRV","utilities_spacing_utilities_padding.md":"bA2rPkft","utilities_spacing_utilities_space.md":"SRVhCkBb","utilities_typography_utilities_font-family.md":"4Foe_6NA","utilities_style_utilities_pale.md":"K_pnudYU","utilities_typography_utilities_font-weight.md":"L_nAOuGa","utilities_style_utilities_solid.md":"3QE96zC9","utilities_typography_utilities_whitespace.md":"uOocXmp6","utilities_typography_utilities_line-clamp.md":"5AGAA8_w","utilities_typography_utilities_font-size.md":"xPdjXYoB","utilities_typography_utilities_text-align.md":"fN4Bs_nZ","utilities_typography_utilities_text-overflow.md":"w4O0Leh4","utilities_typography_utilities_vertical-align.md":"kMXPVtK2","lib_components_messager_index.md":"LTBT_MBo","lib_components_menu_js.md":"nr7SGLTI","lib_components_modal_index.md":"Sa-oLsDL","lib_components_breadcrumb_index.md":"DDkIRQPq","lib_components_color-picker_index.md":"-8ujxO_s","lib_components_button_js.md":"dJrDCPUJ","lib_components_progress-circle_index.md":"A15T5gxa","lib_components_progress_index.md":"WA-Zvict","lib_components_panel_index.md":"FVNMzaM8","lib_components_pager_js.md":"rnjy9uTe","lib_components_tree_index.md":"KydDLZW3","lib_components_pager_index.md":"n0pHYkuh","lib_dtable_dtable_plugins.md":"gRJkOR4p","lib_components_tooltip_index.md":"fyFp_6hC","lib_components_upload-imgs_index.md":"E9c9KLc6","lib_forms_input-control_index.md":"u9HQjg5l","utilities_flex_utilities_grow.md":"rxWaH7H9","utilities_flex_utilities_justify-content.md":"xrecnMvs","utilities_index.md":"mCX6XoN9","lib_components_button_index.md":"qUdOXyOl","lib_forms_checkbox_index.md":"zNYKTq_N","lib_components_scrollbar_index.md":"9EORgh8q","lib_dtable_dtable_index.md":"RyDIzxZP","utilities_flex_utilities_wrap.md":"5iU02KWI","lib_components_picker_index.md":"k99crYrG","utilities_typography_utilities_text-color.md":"xCpquCO2","utilities_flex_utilities_order.md":"UKyvpeft","utilities_interactivity_utilities_disabled.md":"Hb5OaX1B","utilities_typography_utilities_word-break.md":"M158-60g","lib_forms_form_index.md":"q_vhkwo6"} +{"guide_config_base_shadow.md":"e7pm6VGr","guide_config_base_color.md":"UVJryFfP","guide_customize_dev.md":"oKm0yNm-","guide_start_index.md":"0ECuDBas","guide_config_base_screens.md":"lCpD2IIG","guide_index.md":"zb6iAC3j","lib_components_btn-group_js.md":"RLAi5M06","index.md":"lNn0oWiY","lib_components_tooltip_index.md":"fyFp_6hC","frames_zui.md":"VqfdXyiC","lib_components_alert_index.md":"TF1oMf1u","lib_components_datetime-picker_datetime.md":"3DIx3uV1","guide_config_base_rounded.md":"VN9xJ1oj","lib_components_avatar_js.md":"kOvgHoDs","lib_components_avatar-group_index.md":"CGIYh2ZT","guide_config_base_font.md":"D4mbPRTx","lib_components_upload-imgs_index.md":"E9c9KLc6","lib_components_upload_index.md":"e_QoUJiv","guide_customize_exts-lib.md":"naEnYGK3","lib_components_button_js.md":"dJrDCPUJ","lib_components_menu_js.md":"nr7SGLTI","lib_components_dropdown_index.md":"NpEWijAq","lib_components_datetime-picker_time.md":"pn481CNy","utilities_typography_utilities_whitespace.md":"uOocXmp6","utilities_sizing_utilities_width.md":"thSwneK6","lib_forms_input-group_index.md":"GDOwGBrM","utilities_spacing_utilities_padding.md":"bA2rPkft","lib_helpers_helpers_index.md":"_jSE_p54","lib_helpers_core_component.md":"6qFW_J1S","utilities_spacing_utilities_margin.md":"7XqwhIRV","utilities_style_utilities_outline.md":"XFZ1ZdL2","utilities_spacing_utilities_space.md":"SRVhCkBb","utilities_flex_utilities_gap.md":"vfNNNXWb","utilities_flex_utilities_grow.md":"rxWaH7H9","utilities_flex_utilities_justify-content.md":"xrecnMvs","utilities_flex_utilities_shrink.md":"j4Sslaid","lib_helpers_store_index.md":"mlcbVLx7","utilities_flex_utilities_order.md":"UKyvpeft","lib_icons_icons_index.md":"p1nUoLFJ","utilities_index.md":"mCX6XoN9","themes_index.md":"4SUbxPGm","public_icons_fontawesome-license.md":"7HRnEV5s","utilities_interactivity_utilities_pointer-events.md":"whF5XYs6","utilities_backgrounds_utilities_index.md":"PLLQta50","lib_index.md":"4SYdVkVe","utilities_borders_utilities_border-width.md":"gGVLqAsK","utilities_borders_utilities_border-radius.md":"DedS5Oyk","utilities_interactivity_utilities_state.md":"aTX9ijV7","utilities_interactivity_utilities_user-select.md":"VbESdl8o","utilities_borders_utilities_border-color.md":"s86NX7H1","utilities_layout_utilities_floats.md":"uLz_A9CH","utilities_layout_utilities_display.md":"3lnBLpSi","utilities_layout_utilities_object-fit.md":"d3L7JRyX","utilities_effects_utilities_scale.md":"Mo2zXXek","utilities_effects_utilities_shadow.md":"o-xfLwbe","utilities_layout_utilities_position.md":"rVqSviEg","utilities_layout_utilities_overflow.md":"KK2VGZmX","utilities_layout_utilities_top-right-bottom-left.md":"6s17cp16","utilities_flex_utilities_align-content.md":"XKRwuW3v","utilities_layout_utilities_visibility.md":"jXUtTmwo","utilities_flex_utilities_align-items.md":"VeC0U2om","utilities_flex_utilities_align-self.md":"jP-lgEEr","utilities_effects_utilities_rotate.md":"pK6STRLn","utilities_flex_utilities_basis.md":"48No_kl0","lib_components_messager_index.md":"LTBT_MBo","lib_forms_form_index.md":"q_vhkwo6","lib_forms_input-control_index.md":"u9HQjg5l","lib_components_modal_js.md":"MK8RXE6Z","lib_forms_checkbox_index.md":"zNYKTq_N","guide_customize_build.md":"_7LHPcel","guide_config_base_spacing.md":"Uhi_HuQl","lib_dtable_dtable_plugins.md":"gRJkOR4p","lib_components_nav_index.md":"E1qDT4TB","utilities_flex_utilities_direction.md":"8k9i-6xm","utilities_flex_utilities_flex.md":"wFooiA23","lib_components_tree_index.md":"KydDLZW3","lib_components_modal_index.md":"Sa-oLsDL","lib_components_breadcrumb_index.md":"DDkIRQPq","lib_components_menu_index.md":"n-QwI107","utilities_style_utilities_pale.md":"K_pnudYU","lib_components_label_index.md":"g02W8n5e","utilities_style_utilities_solid.md":"3QE96zC9","lib_components_progress_index.md":"WA-Zvict","utilities_typography_utilities_word-break.md":"M158-60g","utilities_typography_utilities_font-family.md":"4Foe_6NA","lib_components_color-picker_index.md":"-8ujxO_s","lib_components_contextmenu_index.md":"eVvUypv8","utilities_typography_utilities_font-size.md":"xPdjXYoB","lib_dtable_dtable_index.md":"RyDIzxZP","utilities_layout_utilities_z-index.md":"xXbfLSWk","utilities_typography_utilities_font-weight.md":"L_nAOuGa","utilities_typography_utilities_line-clamp.md":"5AGAA8_w","utilities_typography_utilities_text-overflow.md":"w4O0Leh4","utilities_typography_utilities_text-color.md":"xCpquCO2","utilities_typography_utilities_leading.md":"Kl_FGxKV","lib_components_dashboard_index.md":"AtdRTL0C","lib_components_datetime-picker_date.md":"B4ROwqJR","lib_helpers_core_cash.md":"pOzFRZml","lib_components_pager_index.md":"n0pHYkuh","utilities_interactivity_utilities_disabled.md":"Hb5OaX1B","utilities_flex_utilities_wrap.md":"5iU02KWI","lib_components_progress-circle_index.md":"A15T5gxa","lib_components_pager_js.md":"rnjy9uTe","utilities_sizing_utilities_height.md":"1fabQImK","utilities_typography_utilities_vertical-align.md":"kMXPVtK2","lib_components_btn-group_index.md":"P6X4Uj-v","lib_components_avatar_index.md":"on6LHI_B","lib_components_scrollbar_index.md":"9EORgh8q","lib_components_button_index.md":"qUdOXyOl","lib_components_nav_js.md":"k_adN9FF","lib_components_kanban_index.md":"oX0pCFLD","lib_components_search-box_index.md":"bRbDNc4S","lib_components_picker_index.md":"k99crYrG","lib_components_table_index.md":"M0dBxE4q","lib_components_toolbar_js.md":"FSRtUz4L","lib_components_panel_index.md":"FVNMzaM8","utilities_layout_utilities_aspect-ratio.md":"U3vDgT4D","utilities_effects_utilities_flip.md":"pa2B36Qs","utilities_effects_utilities_animation.md":"6kKTQHVR","utilities_effects_utilities_opacity.md":"5hDbBv20","utilities_layout_utilities_container.md":"7gXB2eoG","lib_components_toolbar_index.md":"RTqNPr7H","lib_components_tabs_index.md":"tZqbPcct","utilities_interactivity_utilities_scroll.md":"XSU-c0TQ","utilities_typography_utilities_text-align.md":"fN4Bs_nZ","utilities_effects_utilities_filter.md":"aTAVIfK2"} diff --git a/3/index.html b/3/index.html index 7f0435c345..37d2b0bcdb 100644 --- a/3/index.html +++ b/3/index.html @@ -14,13 +14,13 @@ - - + +
ZUI 3

ZUI3

开箱即用的组合式前端 UI 框架

100+ 组件

快速开始
GitHub
⚡️

开箱即用，按需加载

采用基础 + 组件库模式，按需使用

💎

100+ 组件

丰富组件库，实现你的创意

🛠️

丰富主题，灵活定制

深色模式，自定义主题，定制打包

MIT License (MIT)

Copyright (C) 2022 cnezsoft.com

- + \ No newline at end of file diff --git a/3/lib/components/alert/index.html b/3/lib/components/alert/index.html index 925187ca90..bfc48505a6 100644 --- a/3/lib/components/alert/index.html +++ b/3/lib/components/alert/index.html @@ -14,8 +14,8 @@ - - + + @@ -99,7 +99,7 @@ <i class="icon icon-remove-sign alert-icon-close"></i> <p>右上角有关闭按钮</p> </div>

CSS 类 ​

消息框提供了如下 CSS 类：

类类型作用
alert实体类元素作为消息框组件
alert-icon实体类元素作为消息框内左侧图标
alert-heading实体类元素作为消息框内标题
alert-content实体类元素作为消息框内容

CSS 变量 ​

消息框提供了如下 CSS 变量：

变量名称变量含义
--alert-radius消息框圆角
--alert-bg消息框默认背景色
--alert-text-color消息框默认文字颜色
- + \ No newline at end of file diff --git a/3/lib/components/avatar-group/index.html b/3/lib/components/avatar-group/index.html index 61b8f830f5..f3b2ac4067 100644 --- a/3/lib/components/avatar-group/index.html +++ b/3/lib/components/avatar-group/index.html @@ -14,8 +14,8 @@ - - + + @@ -80,7 +80,7 @@ <div class="avatar circle"><img src="/assets/avatar/avatar-7.png"></div> <div class="avatar circle gray">3.5</div> </div>

CSS 类 ​

头像组提供了如下 CSS 类：

类类型作用
avatar-group实体类元素作为头像组组件
size-xs工具类头像组使用超小号尺寸
size-sm工具类头像组使用小号尺寸
size-lg工具类头像组使用大号尺寸
size-xl工具类头像组使用超大号尺寸
- + \ No newline at end of file diff --git a/3/lib/components/avatar/index.html b/3/lib/components/avatar/index.html index e5c93a7df7..753289638d 100644 --- a/3/lib/components/avatar/index.html +++ b/3/lib/components/avatar/index.html @@ -14,8 +14,8 @@ - - + + @@ -35,7 +35,7 @@ <div class="avatar"><img src="/assets/avatar/avatar-3.png"></div> <div class="avatar size-lg"><img src="/assets/avatar/avatar-4.png"></div> <div class="avatar size-xl"><img src="/assets/avatar/avatar-5.png"></div>

特殊用法示例 ​

下面演示一些特殊用法。

右上角未读标签 ​

[待定]

右下角状态标志 ​

[待定]

CSS 类 ​

头像提供了如下 CSS 类：

类类型作用
avatar实体类元素作为头像组件
size-xs工具类头像使用超小号尺寸
size-sm工具类头像使用小号尺寸
size-lg工具类头像使用大号尺寸
size-xl工具类头像使用超大号尺寸

CSS 变量 ​

头像提供了如下 CSS 变量，可进行全局修改：

CSS 变量名作用
--avatar-radius头像默认圆角大小
--avatar-bg头像默认背景颜色
- + \ No newline at end of file diff --git a/3/lib/components/avatar/js.html b/3/lib/components/avatar/js.html index c275520423..f6f7d7d7f3 100644 --- a/3/lib/components/avatar/js.html +++ b/3/lib/components/avatar/js.html @@ -14,8 +14,8 @@ - - + + @@ -41,7 +41,7 @@ const avatar = $(element).data('zui.avatar');

更新头像 ​

调用头像组件实例上的 render 方法来更新头像项，并重新进行渲染：

js
avatar.render({
         // ... 新的头像参数
 });

构造方法 ​

定义：

ts
constructor(element: HTMLElement | string, options: AvatarOptions);

参数：

示例：

ts
new zui.Avatar('#menu', options: AvatarOptions);

选项 ​

className ​

类名。

size ​

大小。

circle ​

是否为圆形。

rounded ​

头像圆角。

background ​

背景颜色。

foreColor ​

字体颜色。

text ​

字体头像内容。

src ​

文件头像路径。

code ​

唯一标识，通常指定为用 ID 或 账号 组件会根据传入值生成唯一的颜色。

方法 ​

render ​

重新渲染，可以指定新的选项。

定义：

ts
render(options: AvatarOptions): void;
- + \ No newline at end of file diff --git a/3/lib/components/breadcrumb/index.html b/3/lib/components/breadcrumb/index.html index e13fd44f2a..9d00bd88bc 100644 --- a/3/lib/components/breadcrumb/index.html +++ b/3/lib/components/breadcrumb/index.html @@ -14,8 +14,8 @@ - - + + @@ -24,7 +24,7 @@ <li><a href="your/url/">图书馆</a></li> <li class="active">数据</li> </ol>

CSS 类 ​

面包屑提供了如下CSS类

类类型作用
breadcrumb实体类元素作为面包屑组件

CSS 变量 ​

变量名称变量含义
--breadcrumb-divider面包屑分割元素标签类型
--breadcrumb-divider-color面包屑分割元素颜色
--breadcrumb-color-active面包屑选中态元素颜色
- + \ No newline at end of file diff --git a/3/lib/components/btn-group/index.html b/3/lib/components/btn-group/index.html index 95a62e70f2..b54661e29a 100644 --- a/3/lib/components/btn-group/index.html +++ b/3/lib/components/btn-group/index.html @@ -14,8 +14,8 @@ - - + + @@ -127,7 +127,7 @@ </div> </div> </div>

CSS 类 ​

按钮提供了如下 CSS 类：

类类型作用
btn-group实体类元素作为按钮组组件
size-xs工具类按钮组使用超小号尺寸
size-sm工具类按钮组使用小号尺寸
size-lg工具类按钮组使用大号尺寸
size-xl工具类按钮组使用超大号尺寸
disabled工具类与 .btn 一起使用，标记按钮为禁用状态
- + \ No newline at end of file diff --git a/3/lib/components/btn-group/js.html b/3/lib/components/btn-group/js.html index 6806bd1c3a..80dfa10414 100644 --- a/3/lib/components/btn-group/js.html +++ b/3/lib/components/btn-group/js.html @@ -14,8 +14,8 @@ - - + + @@ -115,7 +115,7 @@ {text: '剪切'}, ], });

选项 ​

className ​

类名。

btnProps ​

继承 按钮属性。

items ​

size ​

按钮尺寸。

type ​

按钮组类型。

itemRender ​

指定一个回调函数用于对组件渲染进行自定义。

参数：items 选项的单个配置；

返回值：items 选项的单个配置。

beforeRender ​

指定一个回调函数在渲染之前调用，可重新配置组件选项。

参数：用户为按钮组组件件设置的 options；

返回值：组件选项数据。

afterRender ​

指定一个回调函数在渲染之后调用。

参数：

beforeDestroy ​

指定一个回调函数在组件销毁之前调用，无参数。

API ​

btnProps ​

按钮组子项属性：

ts
type BtnProps = ButtonProps & {key?: string | number | symbol};

继承按钮组件 ButtonProps属性，同时添加了 key 属性。

key ​

指定单个按钮键值，用户可根据该属性进行特殊处理。

- + \ No newline at end of file diff --git a/3/lib/components/button/index.html b/3/lib/components/button/index.html index 392a0df7f5..bd912a824b 100644 --- a/3/lib/components/button/index.html +++ b/3/lib/components/button/index.html @@ -14,8 +14,8 @@ - - + + @@ -141,7 +141,7 @@ <i class="spin icon icon-spinner-snake"></i> 加载中 </button>

CSS 类 ​

按钮提供了如下 CSS 类：

类类型作用
btn实体类元素作为按钮组件
square工具类按钮使用正方形外观
size-xs工具类按钮使用超小号尺寸
size-sm工具类按钮使用小号尺寸
size-lg工具类按钮使用大号尺寸
size-xl工具类按钮使用超大号尺寸

CSS 变量 ​

变量名称变量含义
--btn-radius按钮圆角
--btn-bg按钮背景颜色
--btn-border-color按钮边框颜色
- + \ No newline at end of file diff --git a/3/lib/components/button/js.html b/3/lib/components/button/js.html index 6d46458f0d..bc868ddce8 100644 --- a/3/lib/components/button/js.html +++ b/3/lib/components/button/js.html @@ -14,8 +14,8 @@ - - + + @@ -94,7 +94,7 @@ new zui.Button('#showBtn4', {text: '编辑', type: 'primary-pale'}); new zui.Button('#showBtn5', {text: '删除', type: 'danger-pale'}); </script>

选项 ​

按钮的属性。

text ​

标题。

icon ​

左侧图标。

trailingIcon ​

右侧图标。

hint ​

按钮鼠标悬浮提示文案。

component ​

标签类型，通常会使用 <a> 标签或者 <button> 标签，也可以用 <div>。

type ​

按钮的外观类型。

size ​

按钮的尺寸

className ​

类名。

style ​

样式。

url ​

跳转链接地址；前提按钮标签类型只能为 <a> 标签。

target ​

在何处打开链接地址；前提按钮标签类型只能为 <a> 标签。

disabled ​

是否禁用。

active ​

是否是激活状态。

loading ​

加载中状态。

loadingIcon ​

加载中状态的图标。

loadingText ​

加载中状态的文案。

square ​

是否展示为正方形。

caret ​

按钮展示箭头。

onClick ​

鼠标点击的回调方法。

children ​

子元素。

- + \ No newline at end of file diff --git a/3/lib/components/color-picker/index.html b/3/lib/components/color-picker/index.html index 2130f53cb4..c9fa067e53 100644 --- a/3/lib/components/color-picker/index.html +++ b/3/lib/components/color-picker/index.html @@ -14,8 +14,8 @@ - - + + @@ -108,7 +108,7 @@ /** 弹出面板的标题。 */ heading?: ComponentChildren; } - + \ No newline at end of file diff --git a/3/lib/components/contextmenu/index.html b/3/lib/components/contextmenu/index.html index b69e257451..724862c5c5 100644 --- a/3/lib/components/contextmenu/index.html +++ b/3/lib/components/contextmenu/index.html @@ -14,8 +14,8 @@ - - + + @@ -114,7 +114,7 @@ }); }); </script>

API ​

items 的单个对象属性 ​

text ​

名称。

icon ​

左侧图标。

trailingIcon ​

右侧图标。

className ​

类名。

style ​

样式。

url ​

跳转链接地址。

target ​

在何处打开链接地址。

disabled ​

是否禁用。

active ​

是否是激活状态。

type ​

单项类型。

rootClass ​

与 menu-item 同级类名。

items ​

子级操作数据。

onClick ​

点击操作菜单项的回调事件。

- + \ No newline at end of file diff --git a/3/lib/components/dashboard/index.html b/3/lib/components/dashboard/index.html index ccc9b595cc..e5fd747b2a 100644 --- a/3/lib/components/dashboard/index.html +++ b/3/lib/components/dashboard/index.html @@ -14,8 +14,8 @@ - - + + @@ -81,7 +81,7 @@ blockMenu?: ContextMenuOptions; onLayoutChange?: (blocks: BlockSetting[]) => void; }; - + \ No newline at end of file diff --git a/3/lib/components/datetime-picker/date.html b/3/lib/components/datetime-picker/date.html index fc17c890d5..f2fc31836b 100644 --- a/3/lib/components/datetime-picker/date.html +++ b/3/lib/components/datetime-picker/date.html @@ -14,8 +14,8 @@ - - + + @@ -148,7 +148,7 @@ /** 日期值无效时的回调函数。 */ onInvalid?: (value: string) => void; } - + \ No newline at end of file diff --git a/3/lib/components/datetime-picker/datetime.html b/3/lib/components/datetime-picker/datetime.html index 01648fb811..f2e0af41bf 100644 --- a/3/lib/components/datetime-picker/datetime.html +++ b/3/lib/components/datetime-picker/datetime.html @@ -14,8 +14,8 @@ - - + + @@ -70,7 +70,7 @@ timeFormat: string; joiner: string; }; - + \ No newline at end of file diff --git a/3/lib/components/datetime-picker/time.html b/3/lib/components/datetime-picker/time.html index 36296a1a37..1de41a2095 100644 --- a/3/lib/components/datetime-picker/time.html +++ b/3/lib/components/datetime-picker/time.html @@ -14,8 +14,8 @@ - - + + @@ -100,7 +100,7 @@ /** 时间值无效时的回调函数。 */ onInvalid?: (value: string) => void; } - + \ No newline at end of file diff --git a/3/lib/components/dropdown/index.html b/3/lib/components/dropdown/index.html index b96d31383e..39cd2af652 100644 --- a/3/lib/components/dropdown/index.html +++ b/3/lib/components/dropdown/index.html @@ -14,8 +14,8 @@ - - + + @@ -84,7 +84,7 @@ <li class="menu-heading">更多操作</li> <li class="menu-item"><a>修改</a></li> </menu>

CSS 类 ​

按钮提供了如下 CSS 类：

类类型作用
dropdown实体类元素作为下拉菜单组件
dropdown-menu实体类元素作为下拉菜单列表
dropdown-header实体类元素作为下拉菜单中的标题
dropdown-submenu实体类元素作为下拉菜单子菜单列表
caret实体类元素作为下拉菜单icon图标
dropup工具类下拉框浮动方向为上方
menu-align-right工具类下拉框展开后右侧对齐
expand-left工具类子菜单左侧显示

CSS 变量 ​

变量名称变量含义
--dropmenu-radius下拉菜单圆角
--dropmenu-border-color下拉菜单边框颜色
--dropmenu-bg下拉菜单背景颜色
--dropmenu-active-color下拉菜单条目激活状态文字颜色
--dropmenu-active-bg下拉菜单条目激活状态背景颜色

API ​

操作菜单定义对象。

trigger ​

触发方式

arrow ​

箭头大小 为 true 则为默认12

offset ​

偏移量

菜单对象 详细配置可参考 菜单。

- + \ No newline at end of file diff --git a/3/lib/components/kanban/index.html b/3/lib/components/kanban/index.html index 44e0f1432e..576a46112b 100644 --- a/3/lib/components/kanban/index.html +++ b/3/lib/components/kanban/index.html @@ -14,13 +14,13 @@ - - + +
ZUI 3

看板 ​

示例 ​

MIT License (MIT)

Copyright (C) 2022 cnezsoft.com

- + \ No newline at end of file diff --git a/3/lib/components/label/index.html b/3/lib/components/label/index.html index 97889ccf03..30998b5ba1 100644 --- a/3/lib/components/label/index.html +++ b/3/lib/components/label/index.html @@ -14,8 +14,8 @@ - - + + @@ -94,7 +94,7 @@ <span class="label label-dot light"></span> <span class="label label-dot gray"></span> <span class="label label-dot dark"></span>

与按钮组合使用 ​

html
<button class="btn" type="button">按钮 <span class="label sm rounded-full">12</span></button>

CSS 类 ​

标签提供了如下 CSS 类：

类类型作用
label实体类元素作为标签组件
label-dot工具类标签使用圆形外观
size-sm工具类标签使用小号尺寸
size-lg工具类标签使用大号尺寸

CSS 变量 ​

变量名称变量含义
--label-bg标签背景色
--label-color标签文字颜色
--label-border-color标签边框颜色
--label-radius标签圆角
- + \ No newline at end of file diff --git a/3/lib/components/menu/index.html b/3/lib/components/menu/index.html index 9aeca19395..f89074f398 100644 --- a/3/lib/components/menu/index.html +++ b/3/lib/components/menu/index.html @@ -14,8 +14,8 @@ - - + + @@ -69,7 +69,7 @@ <li class="menu-divider"></li> <li class="text-danger menu-item"><a href="#">退出</a></li> </menu>

CSS 类 ​

头像提供了如下 CSS 类：

类类型作用
menu实体类元素作为菜单
menu-item实体类元素作为菜单项
menu-heading实体类元素作为菜单标题
menu-divider实体类元素作为分割线
has-icons工具类与 menu 一起使用，标记菜单内包含图标
active工具类与 menu-item 一起使用，标记菜单项为激活状态
disabled工具类与 menu-item 一起使用，标记菜单项为禁用状态

CSS 变量 ​

头像提供了如下 CSS 变量，可进行全局修改：

CSS 变量名作用默认值
--menu-radius菜单圆角var(--radius)
--menu-bg菜单背景颜色var(--color-canvas)
--menu-border菜单边框1px solid var(--color-border)
--menu-shadow菜单阴影var(--shadow-lg)
--menu-hover-bg菜单项鼠标悬停背景色var(--color-primary-500)
--menu-hover-color菜单项鼠标悬停文字颜色var(--color-canvas)
--menu-active-bg菜单项激活状态背景色var(--color-primary-50)
--menu-active-color菜单项激活状态文字颜色var(--color-primary-500)
--menu-icon-opacity菜单项图标透明度.5
--menu-heading-color菜单标题文字颜色var(--color-gray-500)
- + \ No newline at end of file diff --git a/3/lib/components/menu/js.html b/3/lib/components/menu/js.html index 0b8bb39a60..61ee28ad6e 100644 --- a/3/lib/components/menu/js.html +++ b/3/lib/components/menu/js.html @@ -14,8 +14,8 @@ - - + + @@ -149,7 +149,7 @@ key?: string | number, items?: MenuListItem[], }; - + \ No newline at end of file diff --git a/3/lib/components/messager/index.html b/3/lib/components/messager/index.html index 79d83b1654..794cf56d66 100644 --- a/3/lib/components/messager/index.html +++ b/3/lib/components/messager/index.html @@ -14,8 +14,8 @@ - - + + @@ -45,7 +45,7 @@ } }] });

禁用自动隐藏 ​

默认超过 5000ms 自动隐藏，通过设置 time 为 0 取消自动隐藏。

禁用动画效果 ​

设置 animation 为 false 禁用动画效果。

API ​

MessagerOptions ​

漂浮消息定义对象。

type ​

消息类型

placement ​

漂浮消息定位方式

time ​

漂浮消息持续时间。

message ​

漂浮消息内容。

parent ​

漂浮消息父节点。

icon ​

图标内容。

close ​

是否展示关闭按钮。

show ​

是否在初次渲染时展示消息。

fade ​

是否显示和隐藏消息时使用渐隐渐显的动画效果。

scale ​

是否显示和隐藏消息时使用缩放的动画效果。

actions 漂浮消息按钮组配置项，详细配置可参考 按钮组。

onAction

- + \ No newline at end of file diff --git a/3/lib/components/modal/index.html b/3/lib/components/modal/index.html index 943cf990a1..e002dbee27 100644 --- a/3/lib/components/modal/index.html +++ b/3/lib/components/modal/index.html @@ -14,8 +14,8 @@ - - + + @@ -138,7 +138,7 @@ </div> </div> </div>

CSS 类 ​

对话框提供了如下 CSS 类：

类类型作用
modal实体类元素作为对话框遮罩组件
modal-dialog实体类元素作为对话框组件
size-sm工具类对话框使用小号尺寸
size-lg工具类对话框使用大号尺寸

CSS 变量 ​

对话框提供了如下 CSS 变量，可进行全局修改。

CSS 变量名作用
--modal-radius对话框默认圆角大小
--modal-bg对话框遮挡层颜色
--modal-sm对话框小号尺寸宽度
--modal-base对话框默认宽度
--modal-lg对话框大号尺寸宽度
- + \ No newline at end of file diff --git a/3/lib/components/modal/js.html b/3/lib/components/modal/js.html index 0f0dd93c0e..3ab1133f6a 100644 --- a/3/lib/components/modal/js.html +++ b/3/lib/components/modal/js.html @@ -14,8 +14,8 @@ - - + + @@ -72,7 +72,7 @@ > Modal.confirm(options) </button>

选项 ​

className ​

类名。

style ​

样式。

size ​

尺寸大小。

position ​

位置。

backdrop ​

是否启用背景遮罩。

show ​

是否展示弹窗

keyboard ​

是否启用按键关闭对话框。

moveable ​

是否可移动。

animation ​

是否启用动画效果。

transTime ​

过渡时间。

responsive ​

是否自使用。

- + \ No newline at end of file diff --git a/3/lib/components/nav/index.html b/3/lib/components/nav/index.html index 0632cc9561..3e9484d544 100644 --- a/3/lib/components/nav/index.html +++ b/3/lib/components/nav/index.html @@ -14,8 +14,8 @@ - - + + @@ -84,7 +84,7 @@ </menu> ...

带分隔线的导航 ​

  • 首页
  • 产品
  • 价格
  • 动态
  • 更多
  • 博客
  • 项目
  • 关于我们
  • 首页
  • 产品
  • 价格
  • 动态
  • 更多
  • 博客
  • 项目
  • 关于我们
  • 首页
  • 产品
  • 价格
  • 动态
  • 更多
  • 博客
  • 项目
  • 关于我们
  • 首页
  • 产品
  • 价格
  • 动态
  • 更多
  • 博客
  • 项目
  • 关于我们
  • 首页
  • 产品
  • 价格
  • 动态
  • 更多
  • 博客
  • 项目
  • 关于我们

    • CSS 类 ​

    导航提供了如下CSS类

    类类型作用
    nav实体类元素导航组件
    nav-heading实体类导航标题组件
    nav-divider实体类导航分割线组件
    active工具类为导航元素启用选中态样式
    nav-simple工具类为导航元素启用简单样式
    nav-primary工具类为导航元素启用主要导航样式
    nav-secondary工具类为导航元素启用次要导航样式
    nav-tabs工具类为导航元素启用标签风格导航样式
    nav-pills工具类为导航元素启用标签风格导航样式
    nav-stacked工具类为导航元素启用垂直排列导航样式
    nav-justified工具类为导航元素启用自适应宽度导航样式

    CSS 变量 ​

    变量名称变量含义
    --nav-radius导航圆角大小
    --nav-border-color导航边框颜色
    --nav-secon-border-color次要导航边框颜色
    --nav-heading-bg-color导航标题背景颜色
    --nav-heading-color导航标题字体颜色
    --nav-heading-color导航标题字体颜色
    --nav-divider-color导航分隔线颜色
    - + \ No newline at end of file diff --git a/3/lib/components/nav/js.html b/3/lib/components/nav/js.html index 56b0b84b35..1b25127f33 100644 --- a/3/lib/components/nav/js.html +++ b/3/lib/components/nav/js.html @@ -14,8 +14,8 @@ - - + + @@ -61,7 +61,7 @@ afterRender?: (info: {nav: nav, firstRender: boolean}) => void; beforeDestroy?: (info: {nav: nav}) => void; } - + \ No newline at end of file diff --git a/3/lib/components/pager/index.html b/3/lib/components/pager/index.html index 91b0989868..10b037b1d5 100644 --- a/3/lib/components/pager/index.html +++ b/3/lib/components/pager/index.html @@ -14,8 +14,8 @@ - - + + @@ -161,7 +161,7 @@ ... </menu> </div>

    CSS 类 ​

    分页提供了如下 CSS 类：

    类类型作用
    pager实体类元素作为分页组件
    pager-goto实体类元素作为分页的跳转组件
    pager-size-menu实体类元素作为分页的每页条数的下拉组件
    - + \ No newline at end of file diff --git a/3/lib/components/pager/js.html b/3/lib/components/pager/js.html index bfc5753906..837d008724 100644 --- a/3/lib/components/pager/js.html +++ b/3/lib/components/pager/js.html @@ -14,8 +14,8 @@ - - + + @@ -166,7 +166,7 @@ render(element, <Pager {...options} />);

    使用Jquery 扩展 ​

    js
    $(element).pager(options);
 
 const pager = $(element).data('zui.pager');

    选项 ​

    linkCreator ​

    导航链接生成器，点击页码时进行页面地址更换。

    page ​

    初始状态的当前页码。

    recTotal ​

    总记录数目。

    recPerPage ​

    每页记录数。

    pageTotal ​

    总页数。

    items ​

    定义分页项的列表，可以通过一个函数动态返回分页组件。

    基于 工具栏 选项 和 自定义 PagerItemOptions 选项。

    onClickItem ​

    指定分页按钮的点击回调事件。

    API ​

    PagerInfo ​

    参数：

    page ​

    recTotal ​

    recPerPage ​

    pageTotal ​

    PagerItemOptions ​

    参数：

    type ​

    page ​

    text ​

    count ​

    format ​

    items ​

    - + \ No newline at end of file diff --git a/3/lib/components/panel/index.html b/3/lib/components/panel/index.html index 045a0d7ae2..5d2d139e62 100644 --- a/3/lib/components/panel/index.html +++ b/3/lib/components/panel/index.html @@ -14,8 +14,8 @@ - - + + @@ -136,7 +136,7 @@ </div> <div class="panel-body">内容</div> </div>

    CSS 类 ​

    面板提供了如下 CSS 类：

    类类型作用
    panel实体类元素作为面板组件

    CSS 变量 ​

    面板提供了如下 CSS 变量：

    变量名称变量含义
    --panel-heading-bg标题背景色
    --panel-heading-color标题文字颜色
    --panel-footer-bg脚注背景色
    --panel-border-color面板边框颜色
    - + \ No newline at end of file diff --git a/3/lib/components/picker/index.html b/3/lib/components/picker/index.html index d66a3c76cf..facb0aaccc 100644 --- a/3/lib/components/picker/index.html +++ b/3/lib/components/picker/index.html @@ -14,8 +14,8 @@ - - + + @@ -222,7 +222,7 @@ /** 样式。 */ style?: JSX.CSSProperties; }

    本地列表项 ​

    通过初始化选项 items 指定为一个选项对象数组来定义本地列表项。

    异步获取列表项 ​

    通过初始化选项 items 指定为一个回调函数来返回列表项，可以直接返回选项对象数组，或者通过 Promise 异步返回。

    远程获取列表项 ​

    [WIP]

    - + \ No newline at end of file diff --git a/3/lib/components/progress-circle/index.html b/3/lib/components/progress-circle/index.html index 09b6d039e9..eaf22311ef 100644 --- a/3/lib/components/progress-circle/index.html +++ b/3/lib/components/progress-circle/index.html @@ -14,8 +14,8 @@ - - + + @@ -62,7 +62,7 @@ /** 百分比文本的 Y 坐标。 */ textY?: number; }; - + \ No newline at end of file diff --git a/3/lib/components/progress/index.html b/3/lib/components/progress/index.html index 7891749e5b..0179dfbae1 100644 --- a/3/lib/components/progress/index.html +++ b/3/lib/components/progress/index.html @@ -14,8 +14,8 @@ - - + + @@ -39,7 +39,7 @@ <div class="progress-bar success" style="width: 40%"></div> <label class="ml-4">40%</label> </div>

    CSS 类 ​

    进度条提供了如下 CSS 类

    类类型作用
    progress实体类元素作为进度条容器组件
    progress-bar实体类元素作为进度条组件
    progress-striped工具类为进度条组件启用条纹样式
    active工具类为条纹样式进度条组件启用动画效果

    CSS变量 ​

    变量名称变量含义
    --progress-bg进度条组件背景颜色
    --progress-bar-color进度条组件颜色
    --progress-radius进度条组件圆角大小
    --progress-striped-size进度条组件条纹大小
    - + \ No newline at end of file diff --git a/3/lib/components/scrollbar/index.html b/3/lib/components/scrollbar/index.html index 899b9dae54..a14ed6c04a 100644 --- a/3/lib/components/scrollbar/index.html +++ b/3/lib/components/scrollbar/index.html @@ -14,8 +14,8 @@ - - + + @@ -28,7 +28,7 @@ </div>

    CSS scrollbar with overflow=overlay ​

    Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam, accusamus.Molestiae saepe deleniti voluptas excepturi nostrum. Consequatur eius non voluptates!Commodi omnis minus quo totam, ab aspernatur sequi vero cum?

    Explicabo asperiores recusandae qui? Aliquam similique eaque animi nemo? Fugiat.Cupiditate eaque, doloribus magnam velit ipsum maiores voluptatum eveniet rem!

    Pariatur sapiente laboriosam cumque itaque, id saepe commodi accusantium neque?

    Cupiditate eaque, doloribus magnam velit ipsum maiores voluptatum eveniet rem!

    Quidem eum, reiciendis iusto rem perspiciatis neque optio! Quae, sint!

    Maxime animi iure enim sint aperiam tempora non voluptatibus dolore.

    Suscipit cumque minus veritatis labore dolor corporis molestias. Rem, pariatur.

    Commodi omnis minus quo totam, ab aspernatur sequi vero cum?

    Repellendus rerum tempora eos praesentium at placeat, quas quibusdam sunt?

    Molestiae saepe deleniti voluptas excepturi nostrum. Consequatur eius non voluptates!

    html
    <div style="overflow: overlay; height: 100px; white-space: nowrap">
   ...
 </div>
    - + \ No newline at end of file diff --git a/3/lib/components/search-box/index.html b/3/lib/components/search-box/index.html index 862508eabd..2c5e0e3129 100644 --- a/3/lib/components/search-box/index.html +++ b/3/lib/components/search-box/index.html @@ -14,8 +14,8 @@ - - + + @@ -93,7 +93,7 @@ /** 输入框失去焦点时的回调函数。 */ onBlur?: (event: FocusEvent) => void; }; - + \ No newline at end of file diff --git a/3/lib/components/table/index.html b/3/lib/components/table/index.html index 2727816a03..dcab210e9b 100644 --- a/3/lib/components/table/index.html +++ b/3/lib/components/table/index.html @@ -14,8 +14,8 @@ - - + + @@ -100,7 +100,7 @@ </tr> </tbody> </table>

    CSS 类 ​

    按钮提供了如下 CSS 类：

    类类型作用
    table实体类元素作为表格组件
    table-striped工具类为表格启用斑马纹效果
    table-hover工具类为表格启用行悬停变色效果
    table-fixed工具类为表格启用固定布局
    borderless工具类移除表格所有边框
    bordered工具类为表格添加完整边框
    condensed工具类为表格启用紧凑布局

    CSS 变量 ​

    变量名称变量含义
    --table-head-bg表头背景色
    --table-striped-color表格斑马纹行背景色
    --table-hover-color表格行响应鼠标悬停变化背景颜色
    --table-border-color表格边框颜色
    - + \ No newline at end of file diff --git a/3/lib/components/tabs/index.html b/3/lib/components/tabs/index.html index 218e8b0683..fa1f257f11 100644 --- a/3/lib/components/tabs/index.html +++ b/3/lib/components/tabs/index.html @@ -14,8 +14,8 @@ - - + + @@ -118,7 +118,7 @@ console.log('>', event.type, info); }); </script>

    CSS类 ​

    标签页提供了如下 CSS 类：

    类类型作用
    tab-content实体类元素作为所有标签页容器
    tab-pane实体类元素作为单独的标签页容器
    fade工具类标签页使用渐变动画效果
    in工具类标签页使用渐变动画效果，和 fade 同时使用
    - + \ No newline at end of file diff --git a/3/lib/components/toolbar/index.html b/3/lib/components/toolbar/index.html index 91e10ceb62..f06a84bf4c 100644 --- a/3/lib/components/toolbar/index.html +++ b/3/lib/components/toolbar/index.html @@ -14,8 +14,8 @@ - - + + @@ -108,7 +108,7 @@ <div class="toolbar-space" style="flex: 1 1 0%;"></div> <button class="btn ghost square" title="添加" type="button"><i class="icon icon-check-plus"></i></button> </nav>

    CSS 类 ​

    头像提供了如下 CSS 类：

    类类型作用
    toolbar实体类元素作为工具栏
    toolbar-divider实体类元素作为分割线
    toolbar-space实体类元素作为工具栏项之前的间距
    - + \ No newline at end of file diff --git a/3/lib/components/toolbar/js.html b/3/lib/components/toolbar/js.html index 0a8e8ca157..25dd0385c6 100644 --- a/3/lib/components/toolbar/js.html +++ b/3/lib/components/toolbar/js.html @@ -14,8 +14,8 @@ - - + + @@ -151,7 +151,7 @@ render(element, <Toolbar {...options} />);

    使用 jQuery 扩展 ​

    js
    $(element).toolbar(options);
 
 const toolbar = $(element).data('zui.toolbar');

    选项 ​

    在 操作菜单 选项基础上添加新的参数选项。

    wrap ​

    限制工具栏按钮过多超出时是否换行。

    gap ​

    自定义工具栏按钮的间距，与 .toolbar 同级生成 .gap-* 的工具类控制按钮间距。

    items ​

    继承了 操作菜单 选项和按钮选项，同时添加了其他选项。

    btnProps ​

    继承按钮组件的属性， 统一处理工具栏按钮属性外观等。

    itemRender ​

    指定一个回调函数用于对组件渲染进行自定义。

    参数：items 选项的单个配置；

    返回值：items 选项的单个配置。

    beforeRender ​

    指定一个回调函数在渲染之前调用，可重新配置组件选项。

    参数：用户为按钮组组件件设置的 options；

    返回值：组件选项数据。

    afterRender ​

    指定一个回调函数在渲染之后调用。

    参数：

    beforeDestroy ​

    指定一个回调函数在组件销毁之前调用，无参数。

    API ​

    ToolbarItemOptions ​

    ts
    type ToolbarItemOptions = ToolbarItemProps | ToolbarDropdownProps | ToolbarBtnGroupProps | ToolbarDividerProps | ToolbarSpaceProps;

    ToolbarItemProps ​

    选项：

    继承了操作菜单的 ActionItemProps 选项和按钮的 ButtonProps ，同时添加了其他选项 btnType，用来设置按钮外观类型。

    btnType ​

    设置工具栏单个按钮的外观类型。

    ToolbarDropdownProps ​

    选项：

    在原有属性基础上固定 type 属性，并继承了下拉菜单的 DropdownButtonOptions 选项，同时添加了其他选项。

    type ​
    children ​

    ToolbarBtnGroupProps ​

    选项：

    在原有属性基础上固定 type 属性，并继承了操作菜单的 ActionBasicProps 选项和按钮组的 BtnGroupOptions选项，同时添加了其他选项。

    type ​

    ToolbarDividerProps ​

    选项：

    继承了工具栏的 ActionDividerProps 选项。

    ToolbarSpaceProps ​

    选项：

    继承了工具栏的 ActionSpaceProps 选项。

    type ​
    space ​
    flex ​
    - + \ No newline at end of file diff --git a/3/lib/components/tooltip/index.html b/3/lib/components/tooltip/index.html index 24846d87da..7ea3cf4c45 100644 --- a/3/lib/components/tooltip/index.html +++ b/3/lib/components/tooltip/index.html @@ -14,8 +14,8 @@ - - + + @@ -83,7 +83,7 @@ new zui.Tooltip('#tooltipShow6', {title: 'important 外观', type: 'important'}); new zui.Tooltip('#tooltipShow7', {title: 'white 外观', type: 'white', className: 'text-darker border border-light'}); </script>

    选项 ​

    组件属性：

    placement ​

    提示信息的弹出方向。

    title ​

    设定提示消息内容。

    trigger ​

    设定提示消息触发方式。

    html ​

    是否允许消息内容包含 HTML 格式源码。

    className ​

    设定提示消息类名。

    type ​

    设定提示消息外观类型。

    animation ​

    决定是否应用淡入淡出动画。

    arrow ​

    控制提示消息组件的箭头的大小。

    itemRender ​

    指定一个回调函数用于对组件渲染进行自定义。

    参数：items 选项的单个配置；

    返回值：items 选项的单个配置。

    beforeRender ​

    指定一个回调函数在渲染之前调用，可重新配置组件选项。

    参数：用户为按钮组组件件设置的 options；

    返回值：组件选项数据。

    afterRender ​

    指定一个回调函数在渲染之后调用。

    参数：

    beforeDestroy ​

    指定一个回调函数在组件销毁之前调用，无参数。

    - + \ No newline at end of file diff --git a/3/lib/components/tree/index.html b/3/lib/components/tree/index.html index a1f975a1ae..92e0c15cf0 100644 --- a/3/lib/components/tree/index.html +++ b/3/lib/components/tree/index.html @@ -14,8 +14,8 @@ - - + + @@ -180,7 +180,7 @@ /** 工具栏定义。 */ actions?: ToolbarOptions | ToolbarItemOptions[]; }; - + \ No newline at end of file diff --git a/3/lib/components/upload-imgs/index.html b/3/lib/components/upload-imgs/index.html index 38bf4e5042..3c1245230a 100644 --- a/3/lib/components/upload-imgs/index.html +++ b/3/lib/components/upload-imgs/index.html @@ -14,8 +14,8 @@ - - + + @@ -39,7 +39,7 @@ tip: '可点击添加或拖拽上传，图片格式支持jpg、jpeg', accept: 'image/jpg, image/jpeg' });

    选项 ​

    name ​

    表单字段名。

    showSize ​

    是否显示文件大小。

    multiple ​

    是否开启多文件上传。

    uploadText ​

    上传按钮文本。

    uploadIcon ​

    上传按钮图标。

    renameBtn ​

    是否启用重命名按钮。

    renameIcon ​

    重命名按钮图标。

    renameText ​

    重命名按钮文本。

    renameClass ​

    重命名按钮类。

    deleteBtn ​

    是否启用删除按钮。

    deleteIcon ​

    删除按钮图标。

    deleteText ​

    删除按钮文本。

    deleteClass ​

    删除按钮类。

    tip ​

    文件上传提示。

    btnClass ​

    上传按钮类。

    onAdd ​

    文件变更回调。

    onDelete ​

    删除文件回调。

    onRename ​

    重命名文件回调。

    onSizeChange ​

    文件大小变更回调。

    limitCount ​

    上传文件最大数量限制。

    accept ​

    上传文件类型。

    defaultFileList ​

    默认文件列表。

    limitSize ​

    上传文件最大大小限制。

    duplicatedHint ​

    重复文件提示。

    exceededSizeHint ​

    超出大小限制提示。

    exceededCountHint ​

    超过数量限制提示。

    totalCountText ​

    文件数量提示。

    - + \ No newline at end of file diff --git a/3/lib/components/upload/index.html b/3/lib/components/upload/index.html index 8d92e78a45..d13a21111d 100644 --- a/3/lib/components/upload/index.html +++ b/3/lib/components/upload/index.html @@ -14,8 +14,8 @@ - - + + @@ -55,7 +55,7 @@ name: 'files8', defaultFileList: [file1, file2] });

    选项 ​

    name ​

    表单字段名。

    icon ​

    文件图标。

    showIcon ​

    是否显示文件图标。

    showSize ​

    是否显示文件大小。

    multiple ​

    是否开启多文件上传。

    listPosition ​

    文件列表位置。

    uploadText ​

    上传按钮文本。

    uploadIcon ​

    上传按钮图标。

    renameBtn ​

    是否启用重命名按钮。

    renameIcon ​

    重命名按钮图标。

    renameText ​

    重命名按钮文本。

    renameClass ​

    重命名按钮类。

    deleteBtn ​

    是否启用删除按钮。

    deleteIcon ​

    删除按钮图标。

    deleteText ​

    删除按钮文本。

    deleteClass ​

    删除按钮类。

    confirmText ​

    确认重命名按钮文本。

    cancelText ​

    取消重命名按钮文本。

    useIconBtn ​

    是否使用图标按钮。

    tip ​

    文件上传提示。

    btnClass ​

    上传按钮类。

    onAdd ​

    文件变更回调。

    onDelete ​

    删除文件回调。

    onRename ​

    重命名文件回调。

    onSizeChange ​

    文件大小变更回调。

    draggable ​

    是否启用拖拽功能。

    limitCount ​

    上传文件最大数量限制。

    accept ​

    上传文件类型。

    defaultFileList ​

    默认文件列表。

    limitSize ​

    上传文件最大大小限制。

    duplicatedHint ​

    重复文件提示。

    exceededSizeHint ​

    超出大小限制提示。

    exceededCountHint ​

    超过数量限制提示。

    - + \ No newline at end of file diff --git a/3/lib/dtable/dtable/index.html b/3/lib/dtable/dtable/index.html index 63409e73c8..54a0a49b13 100644 --- a/3/lib/dtable/dtable/index.html +++ b/3/lib/dtable/dtable/index.html @@ -14,8 +14,8 @@ - - + + @@ -359,7 +359,7 @@ render(): void; } - + \ No newline at end of file diff --git a/3/lib/dtable/dtable/plugins.html b/3/lib/dtable/dtable/plugins.html index 853a9cd1cf..9259ce85c4 100644 --- a/3/lib/dtable/dtable/plugins.html +++ b/3/lib/dtable/dtable/plugins.html @@ -14,8 +14,8 @@ - - + + @@ -749,7 +749,7 @@ /* 表头分组名称。 */ headerGroup?: string; }

    拖放改变列宽 resize ​

    WIP

    上下文菜单 contextmenu ​

    WIP

    快捷键 hotkey ​

    WIP

    鼠标移动事件支持 mousemove ​

    WIP

    拖放选择 selectable ​

    WIP

    过滤 filter ​

    WIP

    拖放移动 moveable ​

    WIP

    数据网格 datagrid ​

    WIP

    编辑状态 draft ​

    WIP

    可编辑 editable ​

    WIP

    历史记录 history ​

    WIP

    自动滚动 autoscroll ​

    WIP - + \ No newline at end of file diff --git a/3/lib/forms/checkbox/index.html b/3/lib/forms/checkbox/index.html index b1fcdadd21..0d3ef4c4eb 100644 --- a/3/lib/forms/checkbox/index.html +++ b/3/lib/forms/checkbox/index.html @@ -14,8 +14,8 @@ - - + + @@ -99,7 +99,7 @@ <div class="radio-primary"><input type="radio" name="primaryRadioGroup1" checked="checked" disabled="disabled" id="primaryradio4"><label for="primaryradio4">禁用</label></div>

    高级外观还可以不使用 <input> 元素，在此种情况下，为 .checkbox-primary 或 .radio-primary 添加 .checked 类标记为选中状态，用户无法通过点击来切换选中状态，但可以通过程序手动添加或移除 .checked 来更改选中状态。

    html
     <div class="checkbox-primary"><label>未选中</label></div>
  <div class="checkbox-primary checked"><label>选中</label></div>
    html
      <div class="radio-primary"><label>未选中</label></div>
   <div class="radio-primary checked"><label>选中</label></div>

    开关 ​

    CSS 类 ​

    单选框和复选框提供了如下CSS类

    类类型作用
    checkbox实体类复选框组件
    radio实体类单选框组件
    checkbox-inline实体类内联复选框组件
    radio-inline实体类内联单选框组件
    checkbox-primary实体类高级外观的复选框组件
    radio-primary实体类高级外观的单选框组件
    switch实体类开关组件
    checked修饰类强制使用选中外观
    focus修饰类强制使用激活外观
    - + \ No newline at end of file diff --git a/3/lib/forms/form/index.html b/3/lib/forms/form/index.html index 6a1407cf91..cdf9a6cbd5 100644 --- a/3/lib/forms/form/index.html +++ b/3/lib/forms/form/index.html @@ -14,8 +14,8 @@ - - + + @@ -131,7 +131,7 @@ <option value="banana">香蕉</option> <option value="orange">橘子</option> </select>

    CSS 类 ​

    表单提供了如下CSS类

    类类型作用
    form-group实体类元素作为表单组件
    form-control实体类元素作为表单控件组件
    form-tip实体类元素作为表单控件的提示性文本
    form-horizontal工具类为表单启用水平排列样式
    required工具类为表单控件启用必填标记样式
    has-error工具类为表单控件启用报错样式
    has-warning工具类为表单控件启用警告样式
    has-success工具类为表单控件启用成功样式

    CSS 变量 ​

    变量名称变量含义
    --form-label-width表单文本宽度
    --form-horz-label-align水平布局下文本对齐方向
    --form-control-radius表单控件圆角
    --form-control-border-color表单控件边框颜色
    --form-focus-color表单控件响应聚焦边框颜色
    --form-placeholder-color表单控件提示文本文字颜色
    - + \ No newline at end of file diff --git a/3/lib/forms/input-control/index.html b/3/lib/forms/input-control/index.html index f856a17333..d26da502ca 100644 --- a/3/lib/forms/input-control/index.html +++ b/3/lib/forms/input-control/index.html @@ -14,8 +14,8 @@ - - + + @@ -104,7 +104,7 @@ <div class="input-control"> <input type="text" class="form-control shadow" placeholder="请填写" /> </div>

    CSS 类 ​

    输入框提供了如下 CSS 类：

    类类型作用
    input-control实体类元素作为输入框组件
    prefix工具类输入框前缀元素样式
    suffix工具类输入框后缀元素样式
    size-sm工具类输入框使用小号尺寸
    size-lg工具类输入框使用大号尺寸

    CSS 变量 ​

    输入框提供了如下 CSS 变量，可进行全局修改。

    CSS 变量名作用
    --input-fix-width输入框前/后缀的默认宽度
    --input-fix-width-sm输入框前/后缀的小号宽度
    --input-fix-width-lg输入框前/后缀的大号宽度
    - + \ No newline at end of file diff --git a/3/lib/forms/input-group/index.html b/3/lib/forms/input-group/index.html index f090e7d2cf..ca2b88b2cd 100644 --- a/3/lib/forms/input-group/index.html +++ b/3/lib/forms/input-group/index.html @@ -14,8 +14,8 @@ - - + + @@ -122,7 +122,7 @@ </div> </div> </div>

    CSS类 ​

    输入组提供了如下 CSS 类：

    类类型作用
    input-group实体类元素作为输入组组件
    input-group-addon实体类元素作为输入组内部额外元素
    size-sm工具类输入组使用小号尺寸
    size-lg工具类输入组使用大号尺寸

    CSS 变量 ​

    变量名称变量含义
    --input-group-addon-bg输入组附加部分背景颜色
    --input-group-addon-color输入组附加部分文字颜色
    - + \ No newline at end of file diff --git a/3/lib/helpers/core/cash.html b/3/lib/helpers/core/cash.html index c0653bd6a8..3ccc3c56d7 100644 --- a/3/lib/helpers/core/cash.html +++ b/3/lib/helpers/core/cash.html @@ -14,13 +14,13 @@ - - + +
    ZUI 3

    Cash（jQuery）扩展 ​

    介绍 ​

    在 ZUI3 一些 JS 组件依赖了 Cash，这是一个轻量级的 jQuery 替代品，它的 API 与 jQuery 保持一致，但体积更小，性能更好。需要注意的是 Cash 与 jQuery 存在一些差异，详情参考 Migration Guide。

    MIT License (MIT)

    Copyright (C) 2022 cnezsoft.com

    - + \ No newline at end of file diff --git a/3/lib/helpers/core/component.html b/3/lib/helpers/core/component.html index 7d6b97b4cb..7b0449fdce 100644 --- a/3/lib/helpers/core/component.html +++ b/3/lib/helpers/core/component.html @@ -14,8 +14,8 @@ - - + + @@ -81,7 +81,7 @@ /* 销毁。 */ datePicker.destroy(); - + \ No newline at end of file diff --git a/3/lib/helpers/helpers/index.html b/3/lib/helpers/helpers/index.html index c4daac5ddd..da1696f3a8 100644 --- a/3/lib/helpers/helpers/index.html +++ b/3/lib/helpers/helpers/index.html @@ -14,13 +14,13 @@ - - + +
    ZUI 3

    JS 辅助方法 ​

    MIT License (MIT)

    Copyright (C) 2022 cnezsoft.com

    - + \ No newline at end of file diff --git a/3/lib/helpers/store/index.html b/3/lib/helpers/store/index.html index 09bd179eb3..65bbf6ef9a 100644 --- a/3/lib/helpers/store/index.html +++ b/3/lib/helpers/store/index.html @@ -14,8 +14,8 @@ - - + + @@ -40,7 +40,7 @@ store.get('mySecretCode'); // 返回 1 myStore.get('mySecretCode'); // 返回 2 mySessionStore.get('mySecretCode'); // 返回 3

    API ​

    C Store ​

    Store 类。

    属性

    名称类型定义
    typeStoreType存储类型
    sessionStore与当前存储同名的会话存储实例

    方法

    方法名定义
    get获取数据
    set存储数据
    remove移除数据
    each遍历数据
    getAll获取所有数据

    F Store.set(key, value) ​

    存储数据。

    定义

    ts
    set(key: string, value: any) => void;

    参数

    参数类型定义
    keystring存储的数据名称
    valueany要存储的数据

    方法

    F Store.get(key, defaultValue) ​

    读取数据。

    定义

    ts
    get(key: string, defaultValue?: any) => any;

    参数

    参数类型定义
    keystring读取的数据名称
    defaultValueany当没有读取数据时返回此默认值

    返回值

    类型定义
    any读取到的数据

    F Store.remove(key) ​

    移除数据

    定义

    ts
    remove(key: string) => void;

    参数

    参数类型定义
    keystring要移除的数据名称

    F Store.each(callback) ​

    遍历数据。

    定义

    ts
    each(callback: (name: string, value: any) => void) => void;

    参数

    参数类型定义
    callbackfunction遍历回调函数

    其中 callback 参数：

    参数类型定义
    namestring本次遍历存储的名称
    valueany本次遍历存储的值

    F Store.getAll() ​

    获取所有存储的数据。

    定义

    ts
    getAll() => Record<string, any>;

    返回值

    类型定义
    Record<string, any>通过一个对象返回所有存储的数据，对象的属性名和值分别对应存储的名称和值

    T StoreType ​

    本地存储类型。

    定义

    ts
    type StoreType = 'local' | 'session';

    常量定义

    值定义
    'local'本地持久存储
    'session'本地会话存储

    V store ​

    默认的 store 实例，并包含用于创建新的 Store 实例的快捷方法。

    定义

    ts
    var store: Store & {create: StoreCreateFunc}

    其中 create 成员为创建 Store 实例的快捷方法。

    F StoreCreateFunc ​

    Store 实例创建方法。

    定义

    ts
    type StoreCreateFunc = (name?: string, type: StoreType = 'local') => Store;

    参数

    参数类型定义
    namestring本地存储实例名称
    typeStoreType存储类型，默认为 'local'
    - + \ No newline at end of file diff --git a/3/lib/icons/icons/index.html b/3/lib/icons/icons/index.html index afb4a1d123..6212878ab1 100644 --- a/3/lib/icons/icons/index.html +++ b/3/lib/icons/icons/index.html @@ -14,8 +14,8 @@ - - + + @@ -32,7 +32,7 @@ <i class="icon icon-star ping"></i> <i class="icon icon-star pulse"></i> <i class="icon icon-star bounce"></i> - + \ No newline at end of file diff --git a/3/lib/index.html b/3/lib/index.html index f5c8415de5..40c5e45c12 100644 --- a/3/lib/index.html +++ b/3/lib/index.html @@ -14,13 +14,13 @@ - - + +
    ZUI 3

    组件库 ​

    MIT License (MIT)

    Copyright (C) 2022 cnezsoft.com

    - + \ No newline at end of file diff --git a/3/public/icons/fontawesome-license.html b/3/public/icons/fontawesome-license.html index 635411f37f..a12aeb8d8a 100644 --- a/3/public/icons/fontawesome-license.html +++ b/3/public/icons/fontawesome-license.html @@ -14,13 +14,13 @@ - - + +
    ZUI 3

    License ​

    MIT License (MIT)

    Copyright (C) 2022 cnezsoft.com

    - + \ No newline at end of file diff --git a/3/themes/index.html b/3/themes/index.html index dafa6c56eb..62fdfcb946 100644 --- a/3/themes/index.html +++ b/3/themes/index.html @@ -14,13 +14,13 @@ - - + +
    ZUI 3

    主题 ​

    MIT License (MIT)

    Copyright (C) 2022 cnezsoft.com

    - + \ No newline at end of file diff --git a/3/utilities/backgrounds/utilities/index.html b/3/utilities/backgrounds/utilities/index.html index ea637ef6d2..cb0f40efc1 100644 --- a/3/utilities/backgrounds/utilities/index.html +++ b/3/utilities/backgrounds/utilities/index.html @@ -14,13 +14,13 @@ - - + +
    ZUI 3

    背景色 ​

    使用bg-*给元素添加背景色

    效果展示 ​

    语义化配色 ​

    bg-primary
    #2B80FF
    bg-secondary
    #37B2FE
    bg-success
    #17CE97
    bg-warning
    #FFA34D
    bg-danger
    #FF5858
    bg-important
    #FF4F9E
    bg-special
    #9D5EFF

    黑白配色 ​

    bg-white
    #FFFFFF
    bg-lighter
    #F5F5F5
    bg-light
    #E3E4E9
    bg-gray
    #9EA3B0
    bg-darken
    #5E626D
    bg-darker
    #1B1F28
    bg-black
    #000000

    特殊配色 ​

    bg-surface
    #F5F5F5
    bg-inverse
    #3C4353
    bg-transparent
    bg-inherit

    MIT License (MIT)

    Copyright (C) 2022 cnezsoft.com

    - + \ No newline at end of file diff --git a/3/utilities/borders/utilities/border-color.html b/3/utilities/borders/utilities/border-color.html index 7f95b227b9..508d43484a 100644 --- a/3/utilities/borders/utilities/border-color.html +++ b/3/utilities/borders/utilities/border-color.html @@ -14,13 +14,13 @@ - - + +
    ZUI 3

    边框颜色 ​

    使用'border-*' 设置元素边框颜色。

    效果展示 ​

    语义化配色 ​

    border-primary
    #2B80FF
    border-secondary
    #37B2FE
    border-success
    #17CE97
    border-warning
    #FFA34D
    border-danger
    #FF5858
    border-important
    #FF4F9E
    border-special
    #9D5EFF

    黑白配色 ​

    border-white
    #FFFFFF
    border-lighter
    #F5F5F5
    border-light
    #E3E4E9
    border-gray
    #9EA3B0
    border-dark
    #5E626D
    border-darker
    #1B1F28
    border-black
    #000000

    特殊配色 ​

    border-surface
    #F5F5F5
    border-inverse
    #3C4353
    border-transparent
    border-inherit
    border-current

    MIT License (MIT)

    Copyright (C) 2022 cnezsoft.com

    - + \ No newline at end of file diff --git a/3/utilities/borders/utilities/border-radius.html b/3/utilities/borders/utilities/border-radius.html index 12332d6a1f..9763c40ada 100644 --- a/3/utilities/borders/utilities/border-radius.html +++ b/3/utilities/borders/utilities/border-radius.html @@ -14,13 +14,13 @@ - - + +
    ZUI 3

    边框圆角 ​

    使用'rounded-*' 设置元素边框圆角大小。

    效果展示 ​

    rounded-none
    rounded-sm
    rounded
    rounded-md
    rounded-lg
    rounded-xl
    rounded-full
    circle

    MIT License (MIT)

    Copyright (C) 2022 cnezsoft.com

    - + \ No newline at end of file diff --git a/3/utilities/borders/utilities/border-width.html b/3/utilities/borders/utilities/border-width.html index bae5c0784b..7765fce8cb 100644 --- a/3/utilities/borders/utilities/border-width.html +++ b/3/utilities/borders/utilities/border-width.html @@ -14,8 +14,8 @@ - - + + @@ -23,7 +23,7 @@ <div class="broder border-t-0 -h-8 border-primary"></div> <div class="broder border-b-0 -h-8 border-primary"></div> <div class="broder border-r-0 -h-8 border-primary"></div> - + \ No newline at end of file diff --git a/3/utilities/effects/utilities/animation.html b/3/utilities/effects/utilities/animation.html index b581eeb3ad..fdef5efee9 100644 --- a/3/utilities/effects/utilities/animation.html +++ b/3/utilities/effects/utilities/animation.html @@ -14,8 +14,8 @@ - - + + @@ -34,7 +34,7 @@ </div>

    弹跳 ​

    使用bounce给元素添加弹跳动画

    html
    <button type="button" class="btn primary">
   <i class="bounce icon icon-arrow-down text-white"></i> 弹跳
 </button>
    - + \ No newline at end of file diff --git a/3/utilities/effects/utilities/filter.html b/3/utilities/effects/utilities/filter.html index b42c57c8ff..9d8e6e45ee 100644 --- a/3/utilities/effects/utilities/filter.html +++ b/3/utilities/effects/utilities/filter.html @@ -14,8 +14,8 @@ - - + + @@ -25,7 +25,7 @@ ZUI3 </div> </div> - + \ No newline at end of file diff --git a/3/utilities/effects/utilities/flip.html b/3/utilities/effects/utilities/flip.html index 85d3b24aad..9bf62d36d8 100644 --- a/3/utilities/effects/utilities/flip.html +++ b/3/utilities/effects/utilities/flip.html @@ -14,13 +14,13 @@ - - + +
    ZUI 3

    翻转 ​

    添加flip-*给元素添加翻转样式

    ZUI
    原始
    ZUI
    flip-x
    ZUI
    flip-y

    MIT License (MIT)

    Copyright (C) 2022 cnezsoft.com

    - + \ No newline at end of file diff --git a/3/utilities/effects/utilities/opacity.html b/3/utilities/effects/utilities/opacity.html index 678a10a1ca..efd3a4d6bf 100644 --- a/3/utilities/effects/utilities/opacity.html +++ b/3/utilities/effects/utilities/opacity.html @@ -14,13 +14,13 @@ - - + +
    ZUI 3

    不透明度 ​

    使用opacity-*设置元素的不透明度

    opacity-0
    opacity-5
    opacity-10
    opacity-20
    opacity-25
    opacity-30
    opacity-40
    opacity-50
    opacity-60
    opacity-70
    opacity-75
    opacity-80
    opacity-90
    opacity-95
    opacity-100

    MIT License (MIT)

    Copyright (C) 2022 cnezsoft.com

    - + \ No newline at end of file diff --git a/3/utilities/effects/utilities/rotate.html b/3/utilities/effects/utilities/rotate.html index 46ba2fb9d9..f659de4206 100644 --- a/3/utilities/effects/utilities/rotate.html +++ b/3/utilities/effects/utilities/rotate.html @@ -14,13 +14,13 @@ - - + +
    ZUI 3

    旋转 ​

    添加rotate-*设置元素翻转角度

    rotate-0
    rotate-1
    rotate-2
    rotate-3
    rotate-6
    rotate-12
    rotate-45
    rotate-90
    rotate-180

    MIT License (MIT)

    Copyright (C) 2022 cnezsoft.com

    - + \ No newline at end of file diff --git a/3/utilities/effects/utilities/scale.html b/3/utilities/effects/utilities/scale.html index 33a77c49dc..e509a8de4c 100644 --- a/3/utilities/effects/utilities/scale.html +++ b/3/utilities/effects/utilities/scale.html @@ -14,13 +14,13 @@ - - + +
    ZUI 3

    缩放 ​

    添加scale-*设置元素的缩放

    scale-150
    scale-125
    scale-110
    scale-105
    scale-100
    scale-50
    scale-0

    MIT License (MIT)

    Copyright (C) 2022 cnezsoft.com

    - + \ No newline at end of file diff --git a/3/utilities/effects/utilities/shadow.html b/3/utilities/effects/utilities/shadow.html index d999b4fe80..502c343761 100644 --- a/3/utilities/effects/utilities/shadow.html +++ b/3/utilities/effects/utilities/shadow.html @@ -14,13 +14,13 @@ - - + +
    ZUI 3

    盒阴影 ​

    阴影大小 ​

    使用shadow-*设置阴影大小。

    shadow-none
    shadow-sm
    shadow
    shadow-md
    shadow-lg
    shadow-xl
    shadow-2xl
    shadow-inner

    MIT License (MIT)

    Copyright (C) 2022 cnezsoft.com

    - + \ No newline at end of file diff --git a/3/utilities/flex/utilities/align-content.html b/3/utilities/flex/utilities/align-content.html index 034a6b2301..d6052a2b14 100644 --- a/3/utilities/flex/utilities/align-content.html +++ b/3/utilities/flex/utilities/align-content.html @@ -14,13 +14,13 @@ - - + +
    ZUI 3

    align-content ​

    使用content-*应用CSSalign-content属性设置Flex容器中多行子元素沿交叉轴的对齐方式。

    效果展示 ​

    content-center

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10

    content-start

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10

    content-end

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10

    content-between

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10

    content-around

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10

    content-evenly

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10

    MIT License (MIT)

    Copyright (C) 2022 cnezsoft.com

    - + \ No newline at end of file diff --git a/3/utilities/flex/utilities/align-items.html b/3/utilities/flex/utilities/align-items.html index 36fc99e8f9..7638fefddb 100644 --- a/3/utilities/flex/utilities/align-items.html +++ b/3/utilities/flex/utilities/align-items.html @@ -14,13 +14,13 @@ - - + +
    ZUI 3

    align-items ​

    使用items-*应用CSSalign-items属性 属性设置 Flex 容器中的交叉轴方向上的对齐方式。

    items-center

    1
    2
    3
    4
    5

    items-start

    1
    2
    3
    4
    5

    items-end

    1
    2
    3
    4
    5

    items-baseline

    1
    2
    3
    4
    5

    items-stretch

    1
    2
    3
    4
    5

    MIT License (MIT)

    Copyright (C) 2022 cnezsoft.com

    - + \ No newline at end of file diff --git a/3/utilities/flex/utilities/align-self.html b/3/utilities/flex/utilities/align-self.html index 290a3f932c..0504b1d74d 100644 --- a/3/utilities/flex/utilities/align-self.html +++ b/3/utilities/flex/utilities/align-self.html @@ -14,8 +14,8 @@ - - + + @@ -23,7 +23,7 @@ <div class="align-auto ..."> ... </div> - + \ No newline at end of file diff --git a/3/utilities/flex/utilities/basis.html b/3/utilities/flex/utilities/basis.html index f988a8c0cf..a2237d6a13 100644 --- a/3/utilities/flex/utilities/basis.html +++ b/3/utilities/flex/utilities/basis.html @@ -14,8 +14,8 @@ - - + + @@ -23,7 +23,7 @@ <div class="basis-* ..."></div> ... </div> - + \ No newline at end of file diff --git a/3/utilities/flex/utilities/direction.html b/3/utilities/flex/utilities/direction.html index 1975decf50..ca57b0ebfa 100644 --- a/3/utilities/flex/utilities/direction.html +++ b/3/utilities/flex/utilities/direction.html @@ -14,15 +14,15 @@ - - + +
    ZUI 3

    direction ​

    使用 self-* 应用 CSS flex-direction 属性设置 Flex 容器中主轴的展开方向。

    row

    1
    2
    3

    row-reverse

    1
    2
    3

    col

    1
    2
    3

    col-reverse

    1
    2
    3
    html
      <div class="flex row ...">
     ...
   </div>

    MIT License (MIT)

    Copyright (C) 2022 cnezsoft.com

    - + \ No newline at end of file diff --git a/3/utilities/flex/utilities/flex.html b/3/utilities/flex/utilities/flex.html index 8795888203..79656078b3 100644 --- a/3/utilities/flex/utilities/flex.html +++ b/3/utilities/flex/utilities/flex.html @@ -14,8 +14,8 @@ - - + + @@ -24,7 +24,7 @@ <div class="flex-1 ..."></div> <div class="flex-1 ..."></div> </div> - + \ No newline at end of file diff --git a/3/utilities/flex/utilities/gap.html b/3/utilities/flex/utilities/gap.html index 7d5282a679..b223692f58 100644 --- a/3/utilities/flex/utilities/gap.html +++ b/3/utilities/flex/utilities/gap.html @@ -14,14 +14,14 @@ - - + +
    ZUI 3

    gap ​

    使用gap-*应用CSS属性gap设置Flex容器中元素间距。

    gap-0

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12

    gap-x-0

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12

    gap-y-0

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12

    gap-1

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12

    gap-x-1

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12

    gap-y-1

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12

    gap-2

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12

    gap-x-2

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12

    gap-y-2

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12

    gap-3

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12

    gap-x-3

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12

    gap-y-3

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12

    gap-4

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12

    gap-x-4

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12

    gap-y-4

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12

    gap-5

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12

    gap-x-5

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12

    gap-y-5

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12

    gap-6

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12

    gap-x-6

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12

    gap-y-6

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12

    gap-7

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12

    gap-x-7

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12

    gap-y-7

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12

    gap-8

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12

    gap-x-8

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12

    gap-y-8

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    html
    <div class="flex flex-wrap gap-* ...">
 </div>

    MIT License (MIT)

    Copyright (C) 2022 cnezsoft.com

    - + \ No newline at end of file diff --git a/3/utilities/flex/utilities/grow.html b/3/utilities/flex/utilities/grow.html index 7a1a6fe555..cfd78b109d 100644 --- a/3/utilities/flex/utilities/grow.html +++ b/3/utilities/flex/utilities/grow.html @@ -14,14 +14,14 @@ - - + +
    ZUI 3

    grow ​

    使用grow应用CSSflex-grow属性设置Flex容器中元素是否能放大。

    grow-0
    grow
    html
      <div class="bg-primary w-16 h-16 grow-0"></div>
   <div class="bg-primary w-16 h-16 grow"></div>

    MIT License (MIT)

    Copyright (C) 2022 cnezsoft.com

    - + \ No newline at end of file diff --git a/3/utilities/flex/utilities/justify-content.html b/3/utilities/flex/utilities/justify-content.html index 4f0747f33b..f6b56a3ea9 100644 --- a/3/utilities/flex/utilities/justify-content.html +++ b/3/utilities/flex/utilities/justify-content.html @@ -14,8 +14,8 @@ - - + + @@ -23,7 +23,7 @@ <div></div> ... </div> - + \ No newline at end of file diff --git a/3/utilities/flex/utilities/order.html b/3/utilities/flex/utilities/order.html index b708541709..3cd6b1b7b4 100644 --- a/3/utilities/flex/utilities/order.html +++ b/3/utilities/flex/utilities/order.html @@ -14,8 +14,8 @@ - - + + @@ -30,7 +30,7 @@ <div class="order-first ...">2</div> <div class="order-none ...">3</div> <div> - + \ No newline at end of file diff --git a/3/utilities/flex/utilities/shrink.html b/3/utilities/flex/utilities/shrink.html index 63a01f3f97..a4ee4ab36e 100644 --- a/3/utilities/flex/utilities/shrink.html +++ b/3/utilities/flex/utilities/shrink.html @@ -14,8 +14,8 @@ - - + + @@ -23,7 +23,7 @@ <div class="w-48 h-16 shrink"></div> <div class="w-48 h-16 shrink-0"></div> </div> - + \ No newline at end of file diff --git a/3/utilities/flex/utilities/wrap.html b/3/utilities/flex/utilities/wrap.html index 32aeff8993..cf90396b5a 100644 --- a/3/utilities/flex/utilities/wrap.html +++ b/3/utilities/flex/utilities/wrap.html @@ -14,15 +14,15 @@ - - + +
    ZUI 3

    wrap ​

    添加flex-*应用CSSflex-wrap相关属性设置Flex容器中换行方式

    flex-wrap

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10

    flex-wrap-reverse

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10

    flex-nowrap

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    html
      <div class="flex flex-wrap ...">
     ...
   </div>

    MIT License (MIT)

    Copyright (C) 2022 cnezsoft.com

    - + \ No newline at end of file diff --git a/3/utilities/index.html b/3/utilities/index.html index 34944dada0..95a04ce13a 100644 --- a/3/utilities/index.html +++ b/3/utilities/index.html @@ -14,13 +14,13 @@ - - + +
    ZUI 3

    CSS 工具类 ​

    MIT License (MIT)

    Copyright (C) 2022 cnezsoft.com

    - + \ No newline at end of file diff --git a/3/utilities/interactivity/utilities/disabled.html b/3/utilities/interactivity/utilities/disabled.html index faae2a48eb..053845aa6f 100644 --- a/3/utilities/interactivity/utilities/disabled.html +++ b/3/utilities/interactivity/utilities/disabled.html @@ -14,14 +14,14 @@ - - + +
    ZUI 3

    禁用 ​

    工具类作用
    disabled组件禁用

    效果展示 ​

    默认展示禁用展示
    html
    <a>默认展示</a>
 <a class="disabled">禁用展示</a>

    MIT License (MIT)

    Copyright (C) 2022 cnezsoft.com

    - + \ No newline at end of file diff --git a/3/utilities/interactivity/utilities/pointer-events.html b/3/utilities/interactivity/utilities/pointer-events.html index 38f0fb2a17..35d41e0691 100644 --- a/3/utilities/interactivity/utilities/pointer-events.html +++ b/3/utilities/interactivity/utilities/pointer-events.html @@ -14,13 +14,13 @@ - - + +
    ZUI 3

    指向事件 ​

    用于控制元素是否响应指向事件的工具类。

    工具类属性
    events-nonepointer-events: none;
    events-autopointer-events: auto;

    效果展示 ​

    隐蔽事件 ​

    使用 events-none 使元素忽略指向事件。指向事件仍然会在子元素上触发，并传递到目标元素的下方。

    html
    <button class="btn events-none">隐蔽事件</button>

    开启事件 ​

    使用 events-auto 来恢复浏览器对指向事件（如 :hover 和 click ）的默认行为。

    html
    <button class="btn events-auto">开启事件</button>

    MIT License (MIT)

    Copyright (C) 2022 cnezsoft.com

    - + \ No newline at end of file diff --git a/3/utilities/interactivity/utilities/scroll.html b/3/utilities/interactivity/utilities/scroll.html index 05be3550ca..4593ce8489 100644 --- a/3/utilities/interactivity/utilities/scroll.html +++ b/3/utilities/interactivity/utilities/scroll.html @@ -14,8 +14,8 @@ - - + + @@ -42,7 +42,7 @@ <label for="smoothThree">3</label> <label for="smoothFour">4</label> </div> - + \ No newline at end of file diff --git a/3/utilities/interactivity/utilities/state.html b/3/utilities/interactivity/utilities/state.html index c7606187fd..fc3917de80 100644 --- a/3/utilities/interactivity/utilities/state.html +++ b/3/utilities/interactivity/utilities/state.html @@ -14,14 +14,14 @@ - - + +
    ZUI 3

    状态 ​

    用于为元素设置类似于按钮或链接状态的工具类。

    工具类属性
    statecursor: pointer; position: relative;

    效果展示 ​

    未使用 state 类
    使用 state 类
    html
    <div class="...">未使用 state 类</div>
 <div class="state ...">使用 state 类</div>

    MIT License (MIT)

    Copyright (C) 2022 cnezsoft.com

    - + \ No newline at end of file diff --git a/3/utilities/interactivity/utilities/user-select.html b/3/utilities/interactivity/utilities/user-select.html index 77256c251c..d441239b07 100644 --- a/3/utilities/interactivity/utilities/user-select.html +++ b/3/utilities/interactivity/utilities/user-select.html @@ -14,13 +14,13 @@ - - + +
    ZUI 3

    用户选择 ​

    用于控制用户能否选中文本的工具类。

    工具类属性
    select-noneuser-select: none;
    select-textuser-select: text;
    select-alluser-select: all;
    select-autouser-select: auto;

    效果展示 ​

    禁用文本选择 ​

    使用工具类 select-none 来防止选择元素及其子元素中的文本。

    此文本不可选择
    html
    <div class="select-none ...">此文本不可选择</div>

    允许选择文本 ​

    使用工具类 select-text 允许选择元素及其子元素中的文本。

    此文本可选择
    html
    <div class="select-text ...">此文本可选择</div>

    一键选择所有文本 ​

    使用工具类 select-all 在用户点击时自动选择元素中的所有文本。

    单击此文本中的任意位置以全选
    html
    <div class="select-all ...">单击此文本中的任意位置以全选</div>

    自动 ​

    使用工具类 select-auto 来使用默认的浏览器行为来选择文本。对于撤销其他工具类（如 .select-none）在不同断点的行为时很有用。

    此文本可选择
    html
    <div class="select-auto ...">此文本可选择</div>

    MIT License (MIT)

    Copyright (C) 2022 cnezsoft.com

    - + \ No newline at end of file diff --git a/3/utilities/layout/utilities/aspect-ratio.html b/3/utilities/layout/utilities/aspect-ratio.html index a4fa39f625..26a011220b 100644 --- a/3/utilities/layout/utilities/aspect-ratio.html +++ b/3/utilities/layout/utilities/aspect-ratio.html @@ -14,15 +14,15 @@ - - + +
    ZUI 3

    宽高比 ​

    为元素提供固定的宽高比，详细配置可参考 Tailwind 官网。

    工具类属性
    aspect-autoaspect-ratio: auto;
    aspect-squareaspect-ratio: 1 / 1;
    aspect-videoaspect-ratio: 16 / 9;

    效果展示 ​

    html
    <div class="w-16 h-2 aspect-auto"></div>
 <div class="w-16 aspect-square"></div>
 <div class="w-16 aspect-video"></div>

    MIT License (MIT)

    Copyright (C) 2022 cnezsoft.com

    - + \ No newline at end of file diff --git a/3/utilities/layout/utilities/container.html b/3/utilities/layout/utilities/container.html index 890239b928..5a93fbf372 100644 --- a/3/utilities/layout/utilities/container.html +++ b/3/utilities/layout/utilities/container.html @@ -14,15 +14,15 @@ - - + +
    ZUI 3

    容器 ​

    container 类设置一个元素的 max-width 来匹配当前断点的 min-width。如果您想为一组固定的屏幕尺寸设计，而不是试图适应一个完全流动的视窗，这很有用。

    工具类断点属性
    container无width: 100%;
    containersm (640px)max-width: 640px;
    containersm (768px)max-width: 768px;
    containersm (1024px)max-width: 1024px;
    containersm (1280px)max-width: 1280px;
    containersm (1536px)max-width: 1536px;

    使用方法 ​

    html
    <div class="container">
   <!-- ... -->
 </div>

    提示

    请注意，容器不会自动居中，也没有任何内置的水平方向的内边距。

    MIT License (MIT)

    Copyright (C) 2022 cnezsoft.com

    - + \ No newline at end of file diff --git a/3/utilities/layout/utilities/display.html b/3/utilities/layout/utilities/display.html index f6fa9b8a94..716843778b 100644 --- a/3/utilities/layout/utilities/display.html +++ b/3/utilities/layout/utilities/display.html @@ -14,8 +14,8 @@ - - + + @@ -49,7 +49,7 @@ <div class="...">2</div> <div class="...">3</div> </div> - + \ No newline at end of file diff --git a/3/utilities/layout/utilities/floats.html b/3/utilities/layout/utilities/floats.html index 1b6385824f..ab886cdeb1 100644 --- a/3/utilities/layout/utilities/floats.html +++ b/3/utilities/layout/utilities/floats.html @@ -14,8 +14,8 @@ - - + + @@ -26,7 +26,7 @@ <img class="pull-left mr-4 h-24" src="/favicon.svg"> <p>ZUI3 是一个开箱即用的组合式前端 UI 框架。ZUI3 组件库内置了大量组件，并支持集中开发、调试和打包，其中打包还支持只选择指定的组件进行个性化定制，同步输出组件库文档。但当需求扩展到组件库之外时，就需要用到扩展组件库了。ZUI3 支持扩展组件库模式，可以从其他位置引入一个或多个组件库目录，享受集中开发、调试和打包。下面介绍扩展组件库的使用方法。ZUI3 每个组件在一个独立的目录内，拥有自己的 package.json 文件，使得组件可以独立作为 npm 包来使用，也可以单独作为子项目进行开发维护。通常组件通过在 package.json 文件中设置属性 private: true 来让包仅在 zui3 工作空间内可用，但组件仍然拥有作为公开的包发布到 npm 上进行独立使用。</p> </div> - + \ No newline at end of file diff --git a/3/utilities/layout/utilities/object-fit.html b/3/utilities/layout/utilities/object-fit.html index a386c7aa31..317a00c01c 100644 --- a/3/utilities/layout/utilities/object-fit.html +++ b/3/utilities/layout/utilities/object-fit.html @@ -14,8 +14,8 @@ - - + + @@ -30,7 +30,7 @@ </div>

    缩小 ​

    以原始大小显示元素的内容，但必要时使用 object-scale-down 将其缩小以适应其容器。

    html
    <div class="bg-surface">
   <img src="/favicon.svg" class="object-scale-down h-48 w-full">
 </div>
    - + \ No newline at end of file diff --git a/3/utilities/layout/utilities/overflow.html b/3/utilities/layout/utilities/overflow.html index fa5ed89b6c..7b07dbaf83 100644 --- a/3/utilities/layout/utilities/overflow.html +++ b/3/utilities/layout/utilities/overflow.html @@ -14,8 +14,8 @@ - - + + @@ -76,7 +76,7 @@ <p><small>五代·李煜</small></p> <p>春花秋月何时了？往事知多少。小楼昨夜又东风，故国不堪回首月明中。雕栏玉砌应犹在，只是朱颜改。问君能有几多愁？恰似一江春水向东流</p> </div> - + \ No newline at end of file diff --git a/3/utilities/layout/utilities/position.html b/3/utilities/layout/utilities/position.html index c8170cd351..6e29bc3706 100644 --- a/3/utilities/layout/utilities/position.html +++ b/3/utilities/layout/utilities/position.html @@ -14,8 +14,8 @@ - - + + @@ -43,7 +43,7 @@ <!-- ... --> </div> </div>

    fixed ​

    使用 fixed 来定位一个元素相对于浏览器窗视口的位置。偏移量是相对于视口计算的，且该元素将作为绝对定位的子元素的位置参考。

    - + \ No newline at end of file diff --git a/3/utilities/layout/utilities/top-right-bottom-left.html b/3/utilities/layout/utilities/top-right-bottom-left.html index 896d23cfa7..cd188a6f1e 100644 --- a/3/utilities/layout/utilities/top-right-bottom-left.html +++ b/3/utilities/layout/utilities/top-right-bottom-left.html @@ -14,8 +14,8 @@ - - + + @@ -42,7 +42,7 @@ <div class="relative ..."> <div class="absolute right-0 bottom-0 ...">8</div> </div> - + \ No newline at end of file diff --git a/3/utilities/layout/utilities/visibility.html b/3/utilities/layout/utilities/visibility.html index 04dff0a820..af4ac5d87b 100644 --- a/3/utilities/layout/utilities/visibility.html +++ b/3/utilities/layout/utilities/visibility.html @@ -14,8 +14,8 @@ - - + + @@ -30,7 +30,7 @@ <div class="...">1</div> <div class="invisible ...">2</div> </div> - + \ No newline at end of file diff --git a/3/utilities/layout/utilities/z-index.html b/3/utilities/layout/utilities/z-index.html index d842e3aeff..1410970765 100644 --- a/3/utilities/layout/utilities/z-index.html +++ b/3/utilities/layout/utilities/z-index.html @@ -14,8 +14,8 @@ - - + + @@ -24,7 +24,7 @@ <div class="z-30 ...">z-30</div> <div class="z-20 ...">z-20</div> <div class="z-10 ...">z-10</div> - + \ No newline at end of file diff --git a/3/utilities/sizing/utilities/height.html b/3/utilities/sizing/utilities/height.html index 9607cb8a15..ffa37f8f20 100644 --- a/3/utilities/sizing/utilities/height.html +++ b/3/utilities/sizing/utilities/height.html @@ -14,8 +14,8 @@ - - + + @@ -52,7 +52,7 @@ <div class="flex ..."> <div class="h-full ...">h-full</div> </div> - + \ No newline at end of file diff --git a/3/utilities/sizing/utilities/width.html b/3/utilities/sizing/utilities/width.html index ea2233721e..4c85524a44 100644 --- a/3/utilities/sizing/utilities/width.html +++ b/3/utilities/sizing/utilities/width.html @@ -14,8 +14,8 @@ - - + + @@ -52,7 +52,7 @@ <div class="flex ..."> <div class="w-full ...">w-full</div> </div> - + \ No newline at end of file diff --git a/3/utilities/spacing/utilities/margin.html b/3/utilities/spacing/utilities/margin.html index d2f61db2e5..90d0ee7c37 100644 --- a/3/utilities/spacing/utilities/margin.html +++ b/3/utilities/spacing/utilities/margin.html @@ -14,8 +14,8 @@ - - + + @@ -26,7 +26,7 @@ <div class="mx-4 ...">mx-4</div> <div class="my-6 ...">my-6</div> <div class="m-4 ...">m-4</div> - + \ No newline at end of file diff --git a/3/utilities/spacing/utilities/padding.html b/3/utilities/spacing/utilities/padding.html index 77c1e09a54..e1c8d11069 100644 --- a/3/utilities/spacing/utilities/padding.html +++ b/3/utilities/spacing/utilities/padding.html @@ -14,8 +14,8 @@ - - + + @@ -26,7 +26,7 @@ <div class="px-4 ...">px-4</div> <div class="py-6 ...">py-6</div> <div class="p-4 ...">p-4</div> - + \ No newline at end of file diff --git a/3/utilities/spacing/utilities/space.html b/3/utilities/spacing/utilities/space.html index 6f1e7d1877..32d8eb96e7 100644 --- a/3/utilities/spacing/utilities/space.html +++ b/3/utilities/spacing/utilities/space.html @@ -14,8 +14,8 @@ - - + + @@ -28,7 +28,7 @@ <div>02</div> <div>03</div> </div> - + \ No newline at end of file diff --git a/3/utilities/style/utilities/outline.html b/3/utilities/style/utilities/outline.html index 675dbbaf6f..d6471b9fd0 100644 --- a/3/utilities/style/utilities/outline.html +++ b/3/utilities/style/utilities/outline.html @@ -14,13 +14,13 @@ - - + +
    ZUI 3

    线框 ​

    使用 *-outline 来设置文字颜色和边框颜色一致。

    工具类属性
    primary-outlineborder-color: #2b80ff; color: #2b80ff;
    secondary-outlineborder-color: #37b2fe; color: #37b2fe;
    success-outlineborder-color: #17ce97; color: #17ce97;
    warning-outlineborder-color: #ffa34d; color: #ffa34d;
    danger-outlineborder-color: #ff5858; color: #ff5858;
    important-outlineborder-color: #ff4f9e; color: #ff4f9e;
    special-outlineborder-color: #9d5eff; color: #9d5eff;
    lighter-outlineborder-color: #f5f5f5; color: #f5f5f5;
    light-outlineborder-color: #e3e4e9; color: #e3e4e9;
    gray-outlineborder-color: #9ea3b0; color: #9ea3b0;
    darken-outlineborder-color: #5e626d; color: #5e626d;
    darker-outlineborder-color: #1b1f28; color: #1b1f28;
    black-outlineborder-color: #2b80ff; color: #2b80ff;

    效果展示 ​

    语义化配色 ​

    primary-outline
    secondary-outline
    success-outline
    warning-outline
    danger-outline
    important-outline
    special-outline

    黑白配色 ​

    lighter-outline
    light-outline
    gray-outline
    darken-outline
    darker-outline
    black-outline

    MIT License (MIT)

    Copyright (C) 2022 cnezsoft.com

    - + \ No newline at end of file diff --git a/3/utilities/style/utilities/pale.html b/3/utilities/style/utilities/pale.html index ce0013fcc5..0a00d05105 100644 --- a/3/utilities/style/utilities/pale.html +++ b/3/utilities/style/utilities/pale.html @@ -14,13 +14,13 @@ - - + +
    ZUI 3

    浅色 ​

    使用 *-pale 来设置文字颜色和背景颜色同色系，但背景色透明度相对低一些。

    工具类属性
    primary-palebackground-color: #eff5ff; border-color: #eff5ff; color: #2b80ff;
    secondary-palebackground-color: #e7f6ff; border-color: #e7f6ff; color: #37b2fe;
    success-palebackground-color: #e3f9f3; border-color: #e3f9f3; color: #17ce97;
    warning-palebackground-color: #fff4ea; border-color: #fff4ea; color: #ffa34d;
    danger-palebackground-color: #ffebeb; border-color: #ffebeb; color: #ff5858;
    important-palebackground-color: #feebf4; border-color: #feebf4; color: #ff4f9e;
    special-palebackground-color: #f1eafc; border-color: #f1eafc; color: #9d5eff;
    lighter-palebackground-color: #f5f5f5; border-color: #f5f5f5; color: #9ea3b0;
    light-palebackground-color: #edeef2; border-color: #edeef2; color: #838a9d;
    gray-palebackground-color: #e3e4e9; border-color: #e3e4e9; color: #5e626d;
    darken-palebackground-color: #e6eaf1; border-color: #e6eaf1; color: #5e626d;

    效果展示 ​

    语义化配色 ​

    primary-pale
    secondary-pale
    success-pale
    warning-pale
    danger-pale
    important-pale
    special-pale

    黑白配色 ​

    lighter-pale
    light-pale
    gray-pale
    darken-pale

    MIT License (MIT)

    Copyright (C) 2022 cnezsoft.com

    - + \ No newline at end of file diff --git a/3/utilities/style/utilities/solid.html b/3/utilities/style/utilities/solid.html index 2b68abced2..21c8f806f4 100644 --- a/3/utilities/style/utilities/solid.html +++ b/3/utilities/style/utilities/solid.html @@ -14,13 +14,13 @@ - - + +
    ZUI 3

    实心 ​

    设置背景色实心样式。

    工具类属性
    primarybackground-color: #2b80ff; border-color: #2b80ff; color: #fff;
    secondarybackground-color: #37b2fe; border-color: #37b2fe; color: #fff;
    successbackground-color: #17ce97; border-color: #17ce97; color: #fff;
    warningbackground-color: #ffa34d; border-color: #ffa34d; color: #fff;
    dangerbackground-color: #ff5858; border-color: #ff5858; color: #fff;
    importantbackground-color: #ff4f9e; border-color: #ff4f9e; color: #fff;
    specialbackground-color: #9d5eff; border-color: #9d5eff; color: #fff;
    whitebackground-color: #fff; border-color: #fff;
    lighterbackground-color: #f5f5f5; border-color: #f5f5f5;
    lightbackground-color: #e3e4e9; border-color: #e3e4e9;
    graybackground-color: #9ea3b0; border-color: #9ea3b0; color: #fff;
    darkenbackground-color: #5e626d; border-color: #5e626d; color: #fff;
    darkerbackground-color: #1b1f28; border-color: #1b1f28; color: #fff;
    blackbackground-color: #000; border-color: #000; color: #fff;
    surfacebackground-color: #f5f5f5; border-color: #f5f5f5;
    canvasbackground-color: 画布颜色; border-color: 画布颜色;
    ghostbackground-color: transparent; border-color: transparent;
    inversebackground-color: 画布反色; border-color: 画布反色; color: 画布颜色;

    效果展示 ​

    语义化配色 ​

    primary
    secondary
    success
    warning
    danger
    important
    special

    黑白配色 ​

    white
    lighter
    light
    gray
    darken
    darker
    black

    特殊配色 ​

    surface
    canvas
    ghost
    inverse

    MIT License (MIT)

    Copyright (C) 2022 cnezsoft.com

    - + \ No newline at end of file diff --git a/3/utilities/typography/utilities/font-family.html b/3/utilities/typography/utilities/font-family.html index 6da3bef207..7dbca698ff 100644 --- a/3/utilities/typography/utilities/font-family.html +++ b/3/utilities/typography/utilities/font-family.html @@ -14,15 +14,15 @@ - - + +
    ZUI 3

    字体 ​

    控制元素字体的工具类。

    工具类属性
    sansfont-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    seriffont-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
    monofont-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

    效果展示 ​

    sans 是网络安全的无衬线字体；serif 是网络安全的衬线字体；mono 是网络安全的等宽字体。

    sans 字体
    serif 字体
    mono 字体
    html
    <div class="font-sans">sans 字体</div>
 <div class="font-serif">serif 字体</div>
 <div class="font-mono">mono 字体</div>

    MIT License (MIT)

    Copyright (C) 2022 cnezsoft.com

    - + \ No newline at end of file diff --git a/3/utilities/typography/utilities/font-size.html b/3/utilities/typography/utilities/font-size.html index 221723de58..ed5efa0426 100644 --- a/3/utilities/typography/utilities/font-size.html +++ b/3/utilities/typography/utilities/font-size.html @@ -14,8 +14,8 @@ - - + + @@ -26,7 +26,7 @@ <div class="text-lg">text-lg 字体大小</div> <div class="text-xl">text-xl 字体大小</div> <div class="text-2xl">text-2xl 字体大小</div> - + \ No newline at end of file diff --git a/3/utilities/typography/utilities/font-weight.html b/3/utilities/typography/utilities/font-weight.html index 8f4bbca24d..9280c8248d 100644 --- a/3/utilities/typography/utilities/font-weight.html +++ b/3/utilities/typography/utilities/font-weight.html @@ -14,8 +14,8 @@ - - + + @@ -25,7 +25,7 @@ <div class="font-semibold">font-semibold 字体粗细</div> <div class="font-bold">font-bold 字体粗细</div> <div class="font-black">font-black 字体粗细</div> - + \ No newline at end of file diff --git a/3/utilities/typography/utilities/leading.html b/3/utilities/typography/utilities/leading.html index e549a1963e..e44eeadfef 100644 --- a/3/utilities/typography/utilities/leading.html +++ b/3/utilities/typography/utilities/leading.html @@ -14,8 +14,8 @@ - - + + @@ -57,7 +57,7 @@ <div class="success-pale leading-loose text-lg">leading-loose 行高展示</div> <div class="danger-pale leading-loose text-xl">leading-loose 行高展示</div> </div> - + \ No newline at end of file diff --git a/3/utilities/typography/utilities/line-clamp.html b/3/utilities/typography/utilities/line-clamp.html index f7514400b3..dcf6b71fa1 100644 --- a/3/utilities/typography/utilities/line-clamp.html +++ b/3/utilities/typography/utilities/line-clamp.html @@ -14,15 +14,15 @@ - - + +
    ZUI 3

    控制文本行数 ​

    使用 line-* 实用程序指定截断前应显示多少行文本：

    工具类属性
    line-2overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
    line-3overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;
    line-4overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4;
    line-5overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5;
    line-6overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6;

    效果展示 ​

    显示2行文本
    禅道是专业的研发项目管理软件。细分需求、任务、缺陷和用例；完整覆盖研发项目核心流程；完整软件生命周期管理。 禅道是通用的项目管理软件。完整支持敏捷项目模型、瀑布项目模型、看板模型；内置项目集、产品、项目和执行四个管理框架；支持CMMI标准的落地实施。
    显示3行文本
    禅道是专业的研发项目管理软件。细分需求、任务、缺陷和用例；完整覆盖研发项目核心流程；完整软件生命周期管理。 禅道是通用的项目管理软件。完整支持敏捷项目模型、瀑布项目模型、看板模型；内置项目集、产品、项目和执行四个管理框架；支持CMMI标准的落地实施。 禅道是灵活的项目管理软件。适用不同的管理场景，如软件公司，互联网企业等；功能可组合使用，可只做缺陷管理、需求管理或任务管理；可私有部署，也可以选择云计算方案。 禅道是开源免费的项目管理软件。基于ZPL协议发布；源代码开放，不限商用；强大扩展机制，丰富插件。 禅道是有保障的项目管理软件。；禅道开发团队从04年从事开源，坚持到现在；已为数以万计的公司提供即时有力的支持；版本迭代快速，为您提供更好的功能。
    显示4行文本
    禅道是专业的研发项目管理软件。细分需求、任务、缺陷和用例；完整覆盖研发项目核心流程；完整软件生命周期管理。 禅道是通用的项目管理软件。完整支持敏捷项目模型、瀑布项目模型、看板模型；内置项目集、产品、项目和执行四个管理框架；支持CMMI标准的落地实施。 禅道是灵活的项目管理软件。适用不同的管理场景，如软件公司，互联网企业等；功能可组合使用，可只做缺陷管理、需求管理或任务管理；可私有部署，也可以选择云计算方案。 禅道是开源免费的项目管理软件。基于ZPL协议发布；源代码开放，不限商用；强大扩展机制，丰富插件。 禅道是有保障的项目管理软件。；禅道开发团队从04年从事开源，坚持到现在；已为数以万计的公司提供即时有力的支持；版本迭代快速，为您提供更好的功能。
    显示5行文本
    禅道是专业的研发项目管理软件。细分需求、任务、缺陷和用例；完整覆盖研发项目核心流程；完整软件生命周期管理。 禅道是通用的项目管理软件。完整支持敏捷项目模型、瀑布项目模型、看板模型；内置项目集、产品、项目和执行四个管理框架；支持CMMI标准的落地实施。 禅道是灵活的项目管理软件。适用不同的管理场景，如软件公司，互联网企业等；功能可组合使用，可只做缺陷管理、需求管理或任务管理；可私有部署，也可以选择云计算方案。 禅道是开源免费的项目管理软件。基于ZPL协议发布；源代码开放，不限商用；强大扩展机制，丰富插件。 禅道是有保障的项目管理软件。；禅道开发团队从04年从事开源，坚持到现在；已为数以万计的公司提供即时有力的支持；版本迭代快速，为您提供更好的功能。
    显示6行文本
    禅道是专业的研发项目管理软件。细分需求、任务、缺陷和用例；完整覆盖研发项目核心流程；完整软件生命周期管理。 禅道是通用的项目管理软件。完整支持敏捷项目模型、瀑布项目模型、看板模型；内置项目集、产品、项目和执行四个管理框架；支持CMMI标准的落地实施。 禅道是灵活的项目管理软件。适用不同的管理场景，如软件公司，互联网企业等；功能可组合使用，可只做缺陷管理、需求管理或任务管理；可私有部署，也可以选择云计算方案。 禅道是开源免费的项目管理软件。基于ZPL协议发布；源代码开放，不限商用；强大扩展机制，丰富插件。 禅道是有保障的项目管理软件。；禅道开发团队从04年从事开源，坚持到现在；已为数以万计的公司提供即时有力的支持；版本迭代快速，为您提供更好的功能。
    html
    <div class="line-2 my-2">禅道是专业的研发项目管理软件。细分需求、任务、缺陷和用例；完整覆盖研发项目核心流程；完整软件生命周期管理。
 禅道是通用的项目管理软件。完整支持敏捷项目模型、瀑布项目模型、看板模型；内置项目集、产品、项目和执行四个管理框架；支持CMMI标准的落地实施。</div>
 ...

    MIT License (MIT)

    Copyright (C) 2022 cnezsoft.com

    - + \ No newline at end of file diff --git a/3/utilities/typography/utilities/text-align.html b/3/utilities/typography/utilities/text-align.html index 6a0b283643..006a1e1d7d 100644 --- a/3/utilities/typography/utilities/text-align.html +++ b/3/utilities/typography/utilities/text-align.html @@ -14,8 +14,8 @@ - - + + @@ -23,7 +23,7 @@ <p class="text-center">文本居中对齐</p> <p class="text-right">文本右对齐</p> <p class="text-justify">文本两端对齐 Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p> - + \ No newline at end of file diff --git a/3/utilities/typography/utilities/text-color.html b/3/utilities/typography/utilities/text-color.html index ac57552578..e26693b6d4 100644 --- a/3/utilities/typography/utilities/text-color.html +++ b/3/utilities/typography/utilities/text-color.html @@ -14,13 +14,13 @@ - - + +
    ZUI 3

    文本颜色 ​

    使用 text-* 工具类控制元素的文字颜色。

    工具类属性
    text-primarycolor: #2b80ff;
    text-secondarycolor: #37b2fe;
    text-successcolor: #17ce97;
    text-warningcolor: #ffa34d;
    text-dangercolor: #ff5858;
    text-importantcolor: #ff4f9e;
    text-specialcolor: #9d5eff;
    text-whitecolor: #fff;
    text-lightercolor: #e3e4e9;
    text-lightcolor: #e6eaf1;
    text-graycolor: #9ea3b0;
    text-darkcolor: #5e626d;
    text-darkercolor: #1b1f28;
    text-blackcolor: #000;
    text-canvascolor: #fff;
    text-surfacecolor: #f4f5f7;
    text-inversecolor: #3c4353;

    效果展示 ​

    text-primary
    text-secondary
    text-success
    text-warning
    text-danger
    text-important
    text-special

    黑白配色 ​

    text-white
    text-lighter
    text-light
    text-gray
    text-dark
    text-darker
    text-black

    特殊配色 ​

    text-canvas
    text-surface
    text-inverse

    MIT License (MIT)

    Copyright (C) 2022 cnezsoft.com

    - + \ No newline at end of file diff --git a/3/utilities/typography/utilities/text-overflow.html b/3/utilities/typography/utilities/text-overflow.html index 1a46774d9d..53582389eb 100644 --- a/3/utilities/typography/utilities/text-overflow.html +++ b/3/utilities/typography/utilities/text-overflow.html @@ -14,13 +14,13 @@ - - + +
    ZUI 3

    文本溢出 ​

    用于控制元素中文本溢出的工具类。

    工具类属性
    ellipsisoverflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    clipoverflow: hidden; text-overflow: clip; white-space: nowrap;

    效果展示 ​

    省略 ​

    使用 ellipsis 用省略号(…)来截断溢出的文本。

    禅道是有保障的项目管理软件。禅道开发团队从04年从事开源，坚持到现在；已为数以万计的公司提供即时有力的支持；版本迭代快速，为您提供更好的功能

    html
    <p class="ellipsis">禅道是有保障的项目管理软件。禅道开发团队从04年从事开源，坚持到现在；已为数以万计的公司提供即时有力的支持；版本迭代快速，为您提供更好的功能</p>

    裁剪 ​

    使用 clip 在内容区域的极限处截断文本。

    禅道是有保障的项目管理软件。禅道开发团队从04年从事开源，坚持到现在；已为数以万计的公司提供即时有力的支持；版本迭代快速，为您提供更好的功能

    html
    <p class="clip">禅道是有保障的项目管理软件。禅道开发团队从04年从事开源，坚持到现在；已为数以万计的公司提供即时有力的支持；版本迭代快速，为您提供更好的功能</p>

    MIT License (MIT)

    Copyright (C) 2022 cnezsoft.com

    - + \ No newline at end of file diff --git a/3/utilities/typography/utilities/vertical-align.html b/3/utilities/typography/utilities/vertical-align.html index f254b4e2d1..b73f8f75f0 100644 --- a/3/utilities/typography/utilities/vertical-align.html +++ b/3/utilities/typography/utilities/vertical-align.html @@ -14,8 +14,8 @@ - - + + @@ -24,7 +24,7 @@ <p class="text-xl">参照文本<span class="align-bottom text-xs">底部对齐</span></p> <p class="text-xl">参照文本<span class="align-super text-xs">文本下标对齐</span></p> <p class="text-xl">参照文本<span class="align-sub text-xs">文本上标对齐</span></p> - + \ No newline at end of file diff --git a/3/utilities/typography/utilities/whitespace.html b/3/utilities/typography/utilities/whitespace.html index b7907f9e45..c2ee478321 100644 --- a/3/utilities/typography/utilities/whitespace.html +++ b/3/utilities/typography/utilities/whitespace.html @@ -14,13 +14,13 @@ - - + +
    ZUI 3

    空格 ​

    用于控制元素的空格属性的工具类。

    工具类属性
    nowrapwhite-space: nowrap;
    prewhite-space: pre;
    pre-linewhite-space: pre-line;
    pre-wrapwhite-space: pre-wrap;

    效果展示 ​

    不保留空格不自动换行 ​

    使用 nowrap 来防止文本在元素中被包裹。换行和空格将被折叠。

    禅道是通用的项目管理软件。完整支持敏捷项目模型、瀑布项目模型、看板模型；内置项目集、产品、项目和执行四个管理框架。
    html
    <div class="bd p-2 nowrap">禅道是通用的项目管理软件。完整支持敏捷项目模型、瀑布项目模型、看板模型；内置项目集、产品、项目和执行四个管理框架。</div>

    保留空格不自动换行 ​

    使用 pre 来保留元素中的换行和空格。文本不会被包装。

    禅道是通用的项目管理软件。完整支持敏捷项目模型、瀑布项目模型、看板模型；内置项目集、产品、项目和执行四个管理框架。
    html
    <div class="bd p-2 pre">禅道是通用的项目管理软件。完整支持敏捷项目模型、瀑布项目模型、看板模型；内置项目集、产品、项目和执行四个管理框架。</div>

    不保留空格自动换行 ​

    使用 pre-line 保留换行，但不保留元素中的空格。文本将被正常包装。

    禅道是通用的项目管理软件。完整支持敏捷项目模型、瀑布项目模型、看板模型；内置项目集、产品、项目和执行四个管理框架；支持CMMI标准的落地实施。
    html
    <div class="bd p-2 pre-line">禅道是通用的项目管理软件。完整支持敏捷项目模型、瀑布项目模型、看板模型；内置项目集、产品、项目和执行四个管理框架；支持CMMI标准的落地实施。</div>

    保留空格自动换行 ​

    使用 pre-wrap 来保留元素中的换行和空格。文本将被正常包装。

    禅道是通用的项目管理软件。完整支持敏捷项目模型、瀑布项目模型、看板模型；内置项目集、产品、项目和执行四个管理框架；支持CMMI标准的落地实施。
    html
    <div class="bd p-2 pre-wrap">禅道是通用的项目管理软件。完整支持敏捷项目模型、瀑布项目模型、看板模型；内置项目集、产品、项目和执行四个管理框架；支持CMMI标准的落地实施。</div>

    MIT License (MIT)

    Copyright (C) 2022 cnezsoft.com

    - + \ No newline at end of file diff --git a/3/utilities/typography/utilities/word-break.html b/3/utilities/typography/utilities/word-break.html index 6a4c2af712..de256f3761 100644 --- a/3/utilities/typography/utilities/word-break.html +++ b/3/utilities/typography/utilities/word-break.html @@ -14,8 +14,8 @@ - - + + @@ -24,7 +24,7 @@ </div>

    单词内换行 ​

    使用 break-words 在词中间添加换行符。

    ZenTao premium versions offer you advanced features which streamline your project management and improve your work efficiency.
    html
    <div class="p-2 break-words bg-surface">ZenTao premium versions offer you advanced features which streamline your project management and improve your work efficiency.
 </div>

    任意字内断开 ​

    使用 break-all 在必要的时候添加换行符，而不是试图保留整个单词。

    ZenTao premium versions offer you advanced features which streamline your project management and improve your work efficiency.
    html
    <div class="p-2 break-all bg-surface">ZenTao premium versions offer you advanced features which streamline your project management and improve your work efficiency.
 </div>
    - + \ No newline at end of file