From 292eb6507d80b21931afe6cd77d1f46dd4397553 Mon Sep 17 00:00:00 2001 From: DvShu Date: Wed, 3 Jul 2024 09:51:02 +0000 Subject: [PATCH] deploy: 8af1da947d1d8ae3ba2433ff377926f17cd5566f --- 404.html | 2 +- ....md.Bk6PBMp8.js => components_directives.md.CVKfuD6p.js} | 2 +- ...p8.lean.js => components_directives.md.CVKfuD6p.lean.js} | 2 +- components/button.html | 2 +- components/card.html | 2 +- components/checkbox.html | 2 +- components/collapse.html | 2 +- components/container.html | 2 +- components/descriptionpanel.html | 2 +- components/directives.html | 6 +++--- components/form.html | 2 +- components/icon.html | 2 +- components/image.html | 2 +- components/input.html | 2 +- components/loading.html | 2 +- components/message.html | 2 +- components/polygon.html | 2 +- components/progress.html | 2 +- components/qrcode.html | 2 +- components/radio.html | 2 +- components/shadow.html | 2 +- components/switch.html | 2 +- components/tabbar.html | 2 +- components/table.html | 2 +- components/tabs.html | 2 +- components/tooltip.html | 2 +- css-util.html | 2 +- hashmap.json | 2 +- index.html | 2 +- reset.html | 2 +- usage.html | 2 +- 31 files changed, 33 insertions(+), 33 deletions(-) rename assets/{components_directives.md.Bk6PBMp8.js => components_directives.md.CVKfuD6p.js} (93%) rename assets/{components_directives.md.Bk6PBMp8.lean.js => components_directives.md.CVKfuD6p.lean.js} (85%) diff --git a/404.html b/404.html index 4225529d..6bf0d978 100644 --- a/404.html +++ b/404.html @@ -16,7 +16,7 @@
- + \ No newline at end of file diff --git a/assets/components_directives.md.Bk6PBMp8.js b/assets/components_directives.md.CVKfuD6p.js similarity index 93% rename from assets/components_directives.md.Bk6PBMp8.js rename to assets/components_directives.md.CVKfuD6p.js index c5ff738d..8fe18920 100644 --- a/assets/components_directives.md.Bk6PBMp8.js +++ b/assets/components_directives.md.CVKfuD6p.js @@ -1 +1 @@ -import{_ as s,c as i,o as a,ab as e}from"./chunks/framework.CsJhXCE_.js";const u=JSON.parse('{"title":"Directives 指令","description":"","frontmatter":{},"headers":[],"relativePath":"components/directives.md","filePath":"components/directives.md","lastUpdated":1713346936000}'),t={name:"components/directives.md"},n=e('

Directives 指令 ​

提供了一些常用的自定义指令

1. vClickoutside ​

点击元素外事件, 常用于需要点击元素外，关闭某个弹窗; 例如: Select、Tooltip

ts
function handleOutside() {\n  console.log('点击了元素外');\n}
template
<nt-input placeholder="输入过滤" v-clickoutside="handleOutside"></nt-input>
',5),l=[n];function p(d,h,r,c,o,k){return a(),i("div",null,l)}const g=s(t,[["render",p]]);export{u as __pageData,g as default}; +import{_ as s,c as i,o as a,ab as e}from"./chunks/framework.CsJhXCE_.js";const u=JSON.parse('{"title":"Directives 指令","description":"","frontmatter":{},"headers":[],"relativePath":"components/directives.md","filePath":"components/directives.md","lastUpdated":1713346936000}'),t={name:"components/directives.md"},n=e('

Directives 指令 ​

提供了一些常用的自定义指令

1. vClickoutside ​

点击元素外事件, 常用于需要点击元素外，关闭某个弹窗; 例如: Select、Tooltip

ts
function handleOutside() {\n  console.log('点击了元素外');\n}
template
<nt-input placeholder="输入过滤" v-clickoutside="handleOutside"></nt-input>
',5),l=[n];function p(d,h,r,c,k,o){return a(),i("div",null,l)}const g=s(t,[["render",p]]);export{u as __pageData,g as default}; diff --git a/assets/components_directives.md.Bk6PBMp8.lean.js b/assets/components_directives.md.CVKfuD6p.lean.js similarity index 85% rename from assets/components_directives.md.Bk6PBMp8.lean.js rename to assets/components_directives.md.CVKfuD6p.lean.js index 53240aae..9339be76 100644 --- a/assets/components_directives.md.Bk6PBMp8.lean.js +++ b/assets/components_directives.md.CVKfuD6p.lean.js @@ -1 +1 @@ -import{_ as s,c as i,o as a,ab as e}from"./chunks/framework.CsJhXCE_.js";const u=JSON.parse('{"title":"Directives 指令","description":"","frontmatter":{},"headers":[],"relativePath":"components/directives.md","filePath":"components/directives.md","lastUpdated":1713346936000}'),t={name:"components/directives.md"},n=e("",5),l=[n];function p(d,h,r,c,o,k){return a(),i("div",null,l)}const g=s(t,[["render",p]]);export{u as __pageData,g as default}; +import{_ as s,c as i,o as a,ab as e}from"./chunks/framework.CsJhXCE_.js";const u=JSON.parse('{"title":"Directives 指令","description":"","frontmatter":{},"headers":[],"relativePath":"components/directives.md","filePath":"components/directives.md","lastUpdated":1713346936000}'),t={name:"components/directives.md"},n=e("",5),l=[n];function p(d,h,r,c,k,o){return a(),i("div",null,l)}const g=s(t,[["render",p]]);export{u as __pageData,g as default}; diff --git a/components/button.html b/components/button.html index ec1527cd..8f4e4fb5 100644 --- a/components/button.html +++ b/components/button.html @@ -19,7 +19,7 @@

主题

Button 按钮 ​

常用于响应用户点击行为，触发相应的业务逻辑。

基础使用 ​

按钮类型 ​

使用 type 控制按钮类型, 提供三种类型: normal, primary, text。

按钮禁用 ​

使用 disabled 控制按钮禁用状态, 禁用状态下不可点击。该属性接受一个 Boolean 类型的值。

按钮加载状态 ​

使用 loading 控制按钮加载状态, 加载状态下不可点击。

Block 按钮 ​

block 属性使按钮适合其父宽度。[100%]

按钮形状 ​

按钮可以设置为圆形或者弧形

图标按钮 ​

直接在 Button 内使用 Icon 组件。

透明背景 ​

ghost 背景变为透明，常用在有色背景上

自定义颜色 ​

扩展 type ​

通过给 type 设置一个非预设的值，然后定义 .nt-btn-x 的样式。

API ​

Button Props ​

名称说明类型默认值
type按钮类型, normal, primary, textstring-
disabled按钮禁用状态booleanfalse
loading按钮加载状态booleanfalse
block按钮是否为块级元素[适合其父宽度(宽度100%)]booleanfalse
round按钮是否为圆角[弧形按钮]booleanfalse
circle按钮是否为圆形booleanfalse
htmlType原生的 type 属性; button、submit、reset`stringbutton
loadingText加载状态时显示的文字string加载中……

Button Slots ​

名称说明
default按钮内容

样式变量 ​

名称描述默认值
--nt-btn-color按钮的文字颜色rgba(0, 0, 0, 0.65)
--nt-btn-background按钮的背景颜色 #fff
--nt-btn-border-color按钮的边框颜色#d9d9d9
--nt-form-edit-height按钮的高度32px
--nt-btn-hover-color鼠标悬浮时按钮的文字颜色#79b3f7
--nt-btn-hover-border-color鼠标悬浮时按钮的边框颜色var(--nt-btn-hover-color)
--nt-btn-hover-background鼠标悬浮时按钮的背景颜色var(--nt-btn-background)
--nt-btn-active-color点击时按钮的颜色#197df1
--nt-btn-active-background点击时按钮的背景颜色var(--nt-btn-background)
--nt-btn-active-border-color点击时按钮的边框颜色var(--nt-btn-active-color)
--nt-btn-disabled-color禁用时按钮的文字颜色#c9c9c9
--nt-btn-disabled-background禁用时按钮的背景颜色#fbfbfb
--nt-btn-disabled-border-color禁用时按钮的边框颜色#e6e6e6

Released under the MulanPSL2 License.

Copyright © 2019-present Shu

- + \ No newline at end of file diff --git a/components/card.html b/components/card.html index adac06f9..ab6222b3 100644 --- a/components/card.html +++ b/components/card.html @@ -19,7 +19,7 @@

主题

Card 卡片 ​

通用卡片应用，常用于后台概览页面。

典型卡片 ​

包含标题、内容、操作区域。

简洁卡片 ​

只包含内容区域

完整卡片 ​

卡片包含标题，内容、操作区域以及底部区域。

卡片标题 ​

标题和底部区域除了可以通过 header-text 和 footer-text 传递以外，也可以通过 header 和 footer slot 自定义 。

栅格卡片 ​

在系统概览页面常常和栅格进行配合。通常用于管理后台的工作台聚合展示。

关于栅格布局，框架不提供，推荐使用 unocss 或者 tailwindcss 的 grid 实现

API ​

Card Props ​

名称类型默认值说明
header-textstring-标题
show-headerbooleantrue是否显示标题
footer-textstring-底部区域内容
show-footerbooleanfalse是否显示底部区域
body-classstring-内容区域样式

Card Slots ​

名称说明
default内容区域内容
header自定义标题内容
footer自定义底部区域内容
header-extra自定义标题右侧内容[操作区域]

Released under the MulanPSL2 License.

Copyright © 2019-present Shu

- + \ No newline at end of file diff --git a/components/checkbox.html b/components/checkbox.html index 5e4d3021..eda1a19b 100644 --- a/components/checkbox.html +++ b/components/checkbox.html @@ -19,7 +19,7 @@

主题

Checkbox 复选框 ​

在一组备选项中进行多选。适用提醒用户勾选场景，突出多选框选项，可以有效增加用户识别度。

演示 ​

基础用法 ​

单独使用可以表示两种状态之间的切换；在 nt-checkbox 元素中定义 v-model 绑定变量，单一的 checkbox 中，默认绑定变量的值会是 Boolean，选中为 true。

禁用状态 ​

多选框不可用状态, 设置 disabled 属性即可。

选项框组 ​

使用 nt-checkbox-group 元素来包裹 nt-checkbox 元素，实现复选框组。使用时需要给 nt-checkbox 传递 value 属性。

中间状态 ​

设置 indeterminate 属性，表示不确定状态，一般用于实现全选的效果，实现部分选中的状态。

按钮样式 ​

只需要设置 checkbox 的 type 为 button；就能将复选框变为按钮样式

受控选中 ​

复选框的选中状态是可控的，通过传递 checked 属性，true 为选中，false 为未选中。

API ​

Checkbox Props ​

参数说明类型默认值
model-value / v-model选中项绑定的值boolean-
indeterminate设置不确定状态，仅负责样式控制booleanfalse
name原生 name 属性string-
disabled是否禁用booleanfalse
value原生 value 属性string-
label显示的标签string-
type是否设置为按钮风格button-
checked是否选中boolean-

CheckboxGroup Props ​

参数说明类型默认值
model-value / v-model选中项绑定的值string[]-

Checkbox Events ​

事件说明参数
change选中项变化时触发(checked: boolean) => void

CheckboxGroup Events ​

事件说明参数
change选中项变化时触发(checkList: string[]) => void

Released under the MulanPSL2 License.

Copyright © 2019-present Shu

- + \ No newline at end of file diff --git a/components/collapse.html b/components/collapse.html index 3548064d..1c1b65d6 100644 --- a/components/collapse.html +++ b/components/collapse.html @@ -19,7 +19,7 @@

主题

Collapase 折叠面板 ​

折叠/展开的内容区域; 通常用于后台系统的首页边栏的控制面板上

演示 ​

基础用法 ​

可以同时展开多个面板，面板之间不影响

默认展开 ​

通过传递 default-expanded-names 数组，来设置默认展开的面板。

手风琴效果 ​

手风琴模式，始终只有一个面板处在激活状态。通过 accordion 属性来设置是否以手风琴模式显示。

箭头位置 ​

使用 arrow-placement 来设定箭头的位置。

标题栏对齐方式 ​

通过 header-justify 来设置对齐方式，例如设置为 space-between 表明两端对齐，这个时候，配合 arrow-placement: right 就能实现，箭头和文本两端对齐的效果

背景边框 ​

通过设置 background 就能实现带背景边框样式

项间距 ​

通过设置 item-space 设置项间距

圆角 ​

通过 border-radius 设置边框圆角

API ​

Collapse Props ​

参数说明类型默认值
accordion手风琴模式，是否只允许展开一个面板booleanfalse
arrow-placement箭头位置left | rightleft
header-justify面板头部, 水平对齐方式flex-start | space-betweenflex-start
background是否带有背景和边框booleanfalse
item-space面板之间的间隔string-
default-expanded-names默认展开的面板(string | number)[]-
border-radius边框圆角string-

Collapse Events ​

名称参数说明
change(expandedNames: (string | number)[])面板变化时触发

CollapseItem Props ​

参数说明类型默认值
title标题string-
name名称, 必传string-

Released under the MulanPSL2 License.

Copyright © 2019-present Shu

- + \ No newline at end of file diff --git a/components/container.html b/components/container.html index 772d2690..75efa6ff 100644 --- a/components/container.html +++ b/components/container.html @@ -19,7 +19,7 @@

主题

Container 容器布局 ​

容器布局，采用了 flex 布局，一般用于后台管理项目的一些常用排版，方便快速搭建页面的基本结构：

  • nt-container：外层容器，一般用于 section 标签，基本排版为水平左右排列，可以通过设置 nt-layout-verticle 调整为垂直上下排列。可以嵌套
  • nt-header：顶栏容器，一般用于 header 标签
  • nt-aside: 侧边栏容器，一般用于 aside 标签
  • nt-main: 主要区域容器，一般用于 main 标签
  • nt-footer: 底栏容器，一般用于 footer 标签

通常用于后台管理系统的首页排版

引入 ​

由于使用不是特别频繁，所以没有封装为组件，在需要时手动引入样式表

ts
import '@asteres/neatui-vue/style/container.css';

常见布局 ​

上下两栏排版 ​

左右两栏排版 ​

上下两栏嵌套 ​

左右两栏嵌套 ​

上中下三栏 ​

经典后台系统 ​

在 header 里面放点东西就成了，就成了经典的后台管理系统的模板, 左边是图标，右边是登录用户；Aside 里面放菜单(Menu)，Main 里面放内容就是经典的后台管理系统模板

主题定制 ​

样式变量 ​

名称描述默认值
--nt-header-heightheader高度50px
--nt-aside-width侧边栏宽度240px
--nt-footer-height底栏高度var(--nt-header-height, 50px)

Released under the MulanPSL2 License.

Copyright © 2019-present Shu

- + \ No newline at end of file diff --git a/components/descriptionpanel.html b/components/descriptionpanel.html index 6c156672..b2f4bc90 100644 --- a/components/descriptionpanel.html +++ b/components/descriptionpanel.html @@ -19,7 +19,7 @@

主题

DescriptionPanel 简介面板 ​

通常用于显示描述信息、简介的地方；更多用于手机上，空间有限，一开始可以显示少量内容。

演示 ​

基础用法 ​

内容区域的所有的 p 标签的内容，会自动应用一个 text-indent。

折叠高度 ​

可以通过 collapse-height 设置折叠后的高度

API ​

DescriptionPanel Props ​

参数说明类型默认值
collapse-height容折叠后的高度number100
font-size字体大小string12px

CSS Vars ​

属性说明默认值
--nt-desc-panel-font-size字体大小12px
--nt-desc-panel-textindent内容缩进calc(var(--nt-desc-panel-font-size) * 2)

Released under the MulanPSL2 License.

Copyright © 2019-present Shu

- + \ No newline at end of file diff --git a/components/directives.html b/components/directives.html index bc60739f..804d94c5 100644 --- a/components/directives.html +++ b/components/directives.html @@ -12,16 +12,16 @@ - + -

主题

Directives 指令 ​

提供了一些常用的自定义指令

1. vClickoutside ​

点击元素外事件, 常用于需要点击元素外，关闭某个弹窗; 例如: Select、Tooltip

ts
function handleOutside() {
+    
主题
Directives 指令 ​
提供了一些常用的自定义指令
1. vClickoutside ​
点击元素外事件, 常用于需要点击元素外，关闭某个弹窗; 例如: Select、Tooltip
ts
function handleOutside() {
   console.log('点击了元素外');
 }
template
<nt-input placeholder="输入过滤" v-clickoutside="handleOutside"></nt-input>
Released under the MulanPSL2 License.
Copyright © 2019-present Shu

-    
+    
     
   
 
\ No newline at end of file
diff --git a/components/form.html b/components/form.html
index 6bd07285..a988213a 100644
--- a/components/form.html
+++ b/components/form.html
@@ -19,7 +19,7 @@
   
   
     
主题
Form ​
包含数据录入、校验以及对应样式。
演示 ​
基础用法 ​
基本的表单数据域控制展示，包含布局、初始化、验证、提交。数据验证采用 ph-utils/validator
API ​
Form Props ​
参数说明类型默认值
model表单数据对象Record<string, any>-
rules表单验证规则FormRule[]-
label-width标签的长度，例如 50px。 作为 Form 直接子元素的 form-item 会继承该值。string-
Form Events ​
事件名说明类型
submit提交表单时触发() => void
FormItem Props ​
参数说明类型默认值
label标签文本string-
required是否为必填项，如不设置，则会根据校验规则确认boolean-
namemodel 的键名; 使用表单校验时必填string-
label-width标签宽度，例如 50pxstring-
error表单域验证错误时的提示信息。设置该值会导致表单验证状态变为 error，并显示该错误信息。string-
Released under the MulanPSL2 License.
Copyright © 2019-present Shu

-    
+    
     
   
 
\ No newline at end of file
diff --git a/components/icon.html b/components/icon.html
index 516dc197..58cdc9ff 100644
--- a/components/icon.html
+++ b/components/icon.html
@@ -22,7 +22,7 @@
 <nt-error-icon />
 <nt-loading-icon />
 // ......

框架内置的图标如下：

arrow-down
arrow-left
arrow-right
arrow-up
caret-bottom
caret-top
close
info
loading
mask-close
reduction
refresh-left
refresh-right
search
sort
success
warn
zoom-in
zoom-out

使用 iconfont 图标 ​

使用时需要单独引入 iconfont 图标文件。

template
<nt-font-icon name="Search" />

name 属性填入引入的 iconfont 文件里面对应的 id 即可

颜色和尺寸 ​

修改颜色和尺寸可以通过 color 和 font-size 修改

template
<nt-search-icon style="color:red;font-size:16px" />

如果不想直接修改 style，也能通过 Tailwind CSS 或者 unocss，然后直接添加 class

template
<nt-search-icon class="text-sm text-blue" />

自定义图标 ​

可以通过使用 base-icon 然后加入自定义的 svg-path 路径来构建自定义的图标

当然自定义图标，也可以使用 unplugin-icons 实现

使用其它图标库 ​

本身提供的图标数量有限，如果不能满足需求，可以考虑使用通用性更强、数量更多的图标库。

Released under the MulanPSL2 License.

Copyright © 2019-present Shu

- + \ No newline at end of file diff --git a/components/image.html b/components/image.html index 870f551d..6883f926 100644 --- a/components/image.html +++ b/components/image.html @@ -19,7 +19,7 @@

主题

Image 图片 ​

可预览的图片，在保留所有原生 img 的特性下，支持懒加载，自定义占位图片、加载失败等

演示 ​

基础用法 ​

适应容器 ​

可以通过 fit 确定图片如何适应到容器框，同原生 object-fit CSS 属性；如果不填浏览器默认为 fill

占位 ​

使用 placeholder 定义图片加载时显示的图片；通常用于加载大图时用来实现渐进加载，将 placeholder 设置为一个原图模糊后的图片

加载失败 ​

加载失败显示图像占位符

禁用预览 ​

使用 preview-disabled 来禁止预览

多图预览 ​

可通过 previewSrcList 开启预览多图的功能。 可以通过 initial-index 初始化第一张预览图片的位置。 默认初始位置为 0。

懒加载 ​

通过使用浏览器原生支持的 loading 属性来开启懒加载，只需要设置 loading="lazy"

从 ios 15.4 开始已经全面支持; 对于不支持 loading="lazy" 属性的浏览器，可以通过 loading-attribute-polyfill 来兼容

手动预览 ​

如果不想通过 Image 组件来预览图片，也可以手动通过使用 ImagePreview 来预览图片

API ​

Image Props ​

参数说明类型默认值
src必填 , 图片源地址，同原生属性一致string—
width宽度string-
height高度string-
alt原生属性 altstring-
loading原生属性, 浏览器加载图像的策略eager、lazyeager
fit确定图片如何适应容器框，同原生 object-fitstring-
fallback图片加载失败时显示的地址string-
placeholder图片占位, 用于加载大图时的占位string-
preview-disable禁用图片预览booleanfalse
preview--src-list预览图片地址列表, 多图预览时使用string[]-
initial-index初始预览图像索引number0

Released under the MulanPSL2 License.

Copyright © 2019-present Shu

- + \ No newline at end of file diff --git a/components/input.html b/components/input.html index b035f6b8..1b35a289 100644 --- a/components/input.html +++ b/components/input.html @@ -19,7 +19,7 @@

主题

Input 输入框 ​

通过鼠标或键盘输入内容，是最基础的表单域的包装。

基础用法 ​

文本输入的基础用法。

API ​

Input Props ​

参数说明类型默认值
html-type原始的 typestringtext
model-value / v-model绑定值string—
placeholder占位文本string—

Released under the MulanPSL2 License.

Copyright © 2019-present Shu

- + \ No newline at end of file diff --git a/components/loading.html b/components/loading.html index 99ec5aa2..2234d2a4 100644 --- a/components/loading.html +++ b/components/loading.html @@ -26,7 +26,7 @@ const loadingInstance2 = NtLoading.open(); loadingInstance2.close();

API ​

配置项 ​

字段说明类型默认值
to加载条的挂载位置；可传入一个 DOM 对象或字符串； 若传入字符串，则会将其作为参数传入 document.querySelector 以获取到对应 DOM 节点string、HTMLElement、Ref<HTMLElement>document.body
fullscreen是否为全屏加载booleantrue
unlock是否取消禁止页面滚动booleanfalse
text显示在加载图标下方的加载文案; 通过传递空字符串可以用于不显示文本string加载中……
bar加载条是否显示为进度条样式booleanfalse
background遮罩层背景色string-

指定 ​

字段说明类型
v-loading是否显示加载组件boolean
nt-loading-text显示在加载图标下方的加载文案string
nt-loading-background遮罩层背景色string
- + \ No newline at end of file diff --git a/components/message.html b/components/message.html index 22065e85..77f301ef 100644 --- a/components/message.html +++ b/components/message.html @@ -19,7 +19,7 @@

主题

Message 消息提示 ​

常用于主动操作后的反馈提示。更多用于系统级通知的被动提醒。

基础用法 ​

从顶部出现，3 秒后自动消失; 可以接收一个字符串被显示为正文内容

不同状态 ​

用来显示「成功、警告、消息、错误」类的操作反馈。

当需要自定义更多属性时，Message 也可以接收一个对象为参数。 比如，设置 type 字段可以定义不同的状态，默认为 info 。 此时正文内容以 message 的值传入。 同时，也为 Message 的各种 type 注册了方法，可以在不传入 type 字段的情况下, 直接调用指定类型的函数, 例如: Message.info('x')。

手动关闭 ​

将 duration 属性设置为 0``, 可以使 Message 不自动消失。然后显示消息的函数会返回一个消息 id, 通过手动调用 close 手动关闭

持续时间 ​

通过 duration 属性设定 Message 的持续时间。

API ​

Message 配置项 ​

名称类型默认值说明
messagestring-消息正文内容
durationnumber3000消息显示的持续时间，单位为毫秒。如果设置为 0，则不会自动关闭
typestringinfo消息类型，可选值为 success、warning、error、info
customClassstring-自定义类名

Message 方法 ​

名称参数说明返回类型
info{...}显示普通提示信息, 参数为配置项, 返回消息 idstring
success{...}显示成功提示信息string
warn{...}显示警告提示信息string
error{...}显示错误提示信息string
closeid: string手动关闭消息-

Released under the MulanPSL2 License.

Copyright © 2019-present Shu

- + \ No newline at end of file diff --git a/components/polygon.html b/components/polygon.html index af2245d1..8e786910 100644 --- a/components/polygon.html +++ b/components/polygon.html @@ -19,7 +19,7 @@

主题

Polygon 多边形 ​

显示一些多边形，例如：三角形、菱形、六边形、梯形等；全部采用 clip-path 实现

演示 ​

基础用法 ​

默认提供了多种三角形，只需要配置 shape 属性即可。

自定义菱形 ​

传递 shape 为 rhombus。然后自己定义 nt-polygon-rhombus 样式即可。同时可以通过 background 设置图形颜色

API ​

Shape Props ​

属性名类型说明默认值
shapestring形状-
backgroundstring背景色-

样式变量 ​

变量名默认值说明
--nt-polygen-size10px多边形大小
--nt-polygen-widthvar(--nt-polygen-size)多边形宽度
--nt-polygen-heightvar(--nt-polygen-size)多边形高度
--nt-polygen-background#666多边形背景色

Released under the MulanPSL2 License.

Copyright © 2019-present Shu

- + \ No newline at end of file diff --git a/components/progress.html b/components/progress.html index dd63f7fe..739682b7 100644 --- a/components/progress.html +++ b/components/progress.html @@ -19,7 +19,7 @@

主题

Progress ​

用于展示操作进度, 为用户显示该操作的当前进度和状态；通常在操作需要较长时间才能完成时使用。

演示 ​

基础用法 ​

标准的进度条

API ​

Progress Props ​

参数说明类型默认值
xxxx

Released under the MulanPSL2 License.

Copyright © 2019-present Shu

- + \ No newline at end of file diff --git a/components/qrcode.html b/components/qrcode.html index a2f3da19..f0925ea7 100644 --- a/components/qrcode.html +++ b/components/qrcode.html @@ -19,7 +19,7 @@

主题

Qrcode 二维码 ​

生成二维码

基本使用 ​

底层的二维码的渲染是使用 qrcode-generator-es 进行渲染

简单二维码 ​

text 属性为二维码内容

颜色以及大小 ​

可以通过 fill 属性更改二维码颜色, size 属性更改大小; 注意: 实际的二维码的大小不一定跟传递的 size 一样大，因为会调整每一个二维码小单元格尺寸, 所以最终大小只能是小于等于传递的 size

API ​

Qrcode Props ​

参数说明类型默认值
text二维码内容string—
fill二维码颜色string#000000
size二维码大小string100
level二维码容错率, L、M、Q、HstringL
margin二维码边距number0

Released under the MulanPSL2 License.

Copyright © 2019-present Shu

- + \ No newline at end of file diff --git a/components/radio.html b/components/radio.html index 88874991..3997f89a 100644 --- a/components/radio.html +++ b/components/radio.html @@ -19,7 +19,7 @@

主题

Radio 单选框 ​

在一组备选项中进行单选

演示 ​

基础用法 ​

当只有一个选项时，可以直接通过 v-model 绑定一个 boolean 值来控制是否选中；使用 slot-label 来重写选项的文字。

禁用状态 ​

设置 disabled 属性即可。

单选框组 ​

结合 nt-radio-group 组件实现单选框组

按钮样式 ​

在单选框组基础上，设置 nt-radio 的 type 属性为 button 即可。

受控 ​

有时候需要自己手动控制选中状态时，只需要传递一个 checked 属性，true 选中, false 为未选中

API ​

Radio Props ​

参数说明类型默认值
model-value / v-model是否选中booleanx
name原生 name 属性string-
disabled是否禁用booleanfalse
value原生 value 属性string-
label显示的标签string-
type是否设置为按钮风格button-
checked是否选中boolean-

RadioGroup Props ​

参数说明类型默认值
model-value / v-model选中项绑定的值string-

Radio Events ​

事件说明参数
change选中项变化时触发(checked: boolean) => void

RadioGroup Events ​

事件说明参数
change选中项变化时触发(checkedValue: string) => void

Radio Slots ​

名称说明
label自定义文本内容

Released under the MulanPSL2 License.

Copyright © 2019-present Shu

- + \ No newline at end of file diff --git a/components/shadow.html b/components/shadow.html index 26d11d1f..e3e2e213 100644 --- a/components/shadow.html +++ b/components/shadow.html @@ -23,7 +23,7 @@ Hello World!!! </div> </nt-shadow>

API ​

Shadow Props ​

参数说明类型默认值
shadow-class传递给 shadow 主体的样式，而不是顶层样式string-
transparentshadow 的背景是否是透明booleanfalse

Shadow Events ​

事件说明
shadow-click点击 shadow 触发
- + \ No newline at end of file diff --git a/components/switch.html b/components/switch.html index 2f5eab6d..5d2c585e 100644 --- a/components/switch.html +++ b/components/switch.html @@ -19,7 +19,7 @@

主题

Switch 开关 ​

表示两种相互对立的状态间的切换，多用于触发「开/关」。

演示 ​

基础用法 ​

绑定 v-model 到一个 boolean 类型的变量。可以使用 true 和 false 分别表示开和关。

文字描述 ​

使用 checked-text 和 unchecked-text 属性来设置开关的文字描述。

API ​

Switch Props ​

参数说明类型默认值
v-model开关状态(是否打开)booleanfalse
checked-text开启时的文字描述string-
unchecked-text关闭时的文字描述string-

Switch Events ​

事件名说明回调参数
change开关状态改变时触发(checked: boolean)

Switch CSS Variables ​

变量名默认值描述
--nt-switch-height20px开关按钮高度
--nt-switch-widthvar(--nt-switch-height) * 2开关按钮宽度

Released under the MulanPSL2 License.

Copyright © 2019-present Shu

- + \ No newline at end of file diff --git a/components/tabbar.html b/components/tabbar.html index c8f5a7b1..9d69c32f 100644 --- a/components/tabbar.html +++ b/components/tabbar.html @@ -19,7 +19,7 @@

主题

Tabbar 标签栏 ​

使用场景如下:

  1. 底部导航栏，用于在不同页面之间进行切换
  2. 标签切换
  3. 选项卡

演示 ​

导航栏模式 ​

将 type 设置为 nav[默认]

选项卡 ​

基础的、简洁的选项卡，初始选中第2项

排列方式 ​

主轴的排列方式，只对 bar 类型生效。只需要将 justify-content 的属性设置为 justify-content可用值 即可。

卡片式 ​

具有卡片风格的标签。只需要设置 type 属性为 card 就可以使选项卡改变为标签风格。 同时可以通过 gap 调整选项卡之间的间距。

API ​

Tabbar Props ​

参数说明类型默认值
v-model选中的选项卡string-
type风格nav、bar、cardnav
justify-content主轴的排列方式stringflex-start
gap选项卡之间的间距number0

Tabbar Events ​

| 事件名 | 说明 | 参数 | | change | 选项卡切换时触发 | (active: string) => void |

TabbarItem Props ​

参数说明类型默认值
name选项卡的唯一标识string | name-

TabbarItem Slots ​

插槽名说明
icon选项卡的图标
default选项卡的内容

Tabbar Css Vars ​

变量名说明默认值
--nt-tabbar-hover-color选项卡的鼠标悬浮时的颜色var(--nt-primary-color-light1)
--nt-tabbar-active-color选项卡的选中时的颜色var(--nt-primary-color)
--nt-tabbar-item-gap选项卡之间的间距0
--nt-tabbar-height选项卡的高度38px[nav时默认为: 50px]
--nt-tabbar-line-color下划线的颜色var(--nt-primary-color)
--nt-tabbar-card-border-color卡片选项卡的边框颜色#f5f7fa
--nt-tabbar-card-border-radius卡片选项卡的边框圆角5px

Released under the MulanPSL2 License.

Copyright © 2019-present Shu

- + \ No newline at end of file diff --git a/components/table.html b/components/table.html index dd2a0965..bd2e7bd2 100644 --- a/components/table.html +++ b/components/table.html @@ -19,7 +19,7 @@

主题

Table 表格 ​

用于展示大量结构化数据

演示 ​

基础表格 ​

通过 data 定义数据源, 通过 columns 定义列，最后一列为各种操作

斑马纹 ​

表格默认带斑马纹，可以通过设置 stripe 为 false 来取消斑马纹

边框 ​

默认情况下，Table 组件是不具有竖直方向的边框的， 如果需要，可以使用 border 属性，把该属性设置为 true 即可启用。

空表格 ​

数据列表没有数据时，显示空表格

固定表头和列 ​

给表格设置 max-height 样式，然后设置 fixed-head 属性为 true 即可实现固定表头。 将表格 将 table-layout 设置为 fixed，然后将需要固定的列设置 fixed 为 left 或 right，就能实现固定列。

  1. 切记: 要固定列，需要使用 fixed 布局，不能将 table-layout 设置为 auto
  2. 设置 max-height 可以通过直接设置 style；也可以通过 tailwindcss-max-height
  3. 如果想改变滚动条样式，参考 工具样式-滚动条；引入样式表，然后给 Table 组件, 添加 nt-scrollbar 的类名: <nt-table ... fixed-head class="max-h-24 nt-scrollbar"></nt-table>

排序 ​

给列的选项增加 sorter 为 true，同时配置 key 字段就能实现排序；可以通过 defaultSort 设置初始排序；也可以添加 sorter 回调函数来启用手动排序

表尾合计行 ​

设置 renderSummary 函数来渲染表尾合计行

多级表头 ​

配置 columns 的时候，给某一列增加一个 children 就能实现表头分组

合并单元格 ​

通过配置 columns 中的 colspan、rowspan 来实现合并单元格；当 colspan 或者 rowspan 为 0 时，则不显示当前单元格

可编辑表格 ​

通过自定义渲染的形式能够快速实现单元格的编辑

可选择(单选) ​

可选择(多选) ​

API ​

Table Props ​

参数说明类型默认值
data数据源array-
columns表格列配置ColumnOption[]-
default-sort初始排序SortOption-
stripe是否为斑马纹booleantrue
border是否显示四周边框booleanfalse
fixed-head是否固定表头booleanfalse
sorter使用手动排序(data: any[]) => any[]-
render-summary渲染表尾合计行() => VNode | VNode[]-
table-layout表格的 table-layout 样式属性fixed、autoauto

ColumnOption 选项:

字段说明类型默认值
title列名string-
key列标识, 自动排序时必传string-
width列宽string、number-
fixed列是否固定left、right-
sorter是否排序booleanfalse
render自定义渲染(row: any, index: number) => VNode | VNode[]-
titleRowspan表头的行所占的行数number-
titleColspan表头的单元格所占的列数number-
rowspan单元格的 rowspannumber | (rowData: any, rowIndex: number) => number-
colspan单元格的 colspannumber | (rowData: any, rowIndex: number) => number-

SortOption 选项

字段说明类型
key列标识, 自动排序时必传string
order排序方式asc - 升序、desc - 降序

Released under the MulanPSL2 License.

Copyright © 2019-present Shu

- + \ No newline at end of file diff --git a/components/tabs.html b/components/tabs.html index c740e8e4..5bc15b93 100644 --- a/components/tabs.html +++ b/components/tabs.html @@ -24,7 +24,7 @@ <!-- 内容区域--> </div> </div> - + \ No newline at end of file diff --git a/components/tooltip.html b/components/tooltip.html index 5699f30e..9ecfc278 100644 --- a/components/tooltip.html +++ b/components/tooltip.html @@ -19,7 +19,7 @@

主题

Tooltip 文字提示 ​

常用于展示鼠标 hover 时的提示信息。

可用来代替系统默认的 title 提示，通常用于针对一个图标按钮的鼠标悬浮显示简单说明

该提示使用纯 CSS 实现，所以气泡框位置通常需要手动设置

基础用法 ​

使用 title 属性来决定 hover 时的提示信息。 由 placement 属性决定展示位置: topStart、top[默认]、topEnd、bottomStart、bottom、bottomEnd

自定义提示 ​

通过使用 title 插槽来渲染自定义的提示; 如果同时传递 title 和 插槽，则 title 属性为准

受控模式 ​

通过 visible 属性来控制提示框的显示与隐藏

自定义风格 ​

通过 styleName 属性来设置提示框的风格名称，然后自定义 .nt-tooltip--xx 来定义风格样式，xx 就是传递的 styleName 的值；例如从 css-generators 复制一段样式，改名称为 nt-tooltip--demo

可以通过配合 nt-tooltip-top、nt-tooltip-start 等调整箭头或者提示框的位置

API ​

Tooltip Props ​

参数说明类型可选值默认值
title提示文字string--
placement提示框出现位置stringtopStart、top、topEnd、bottomStart、bottom、bottomEndtop
styleName风格, 可以自定义风格string-default
visible是否显示提示框[受控模式]boolean-false
contentClassTooltip Content 样式string--

Tooltip Slots ​

参数说明参数
title自定义提示内容以及样式()

Released under the MulanPSL2 License.

Copyright © 2019-present Shu

- + \ No newline at end of file diff --git a/css-util.html b/css-util.html index 8696eeef..75ddd934 100644 --- a/css-util.html +++ b/css-util.html @@ -19,7 +19,7 @@

主题

1. Vue3 Transition 渐变 ​

1.1 引入样式 ​

ts
import '@asteres/neatui-vue/style/util/transition.css';

1.2 使用 ​

所有的渐变都支持传递 --nt-transition-times 控制时长, 默认为 0.3s；只需要简单的添加相应的 Transition-name 属性即可。

1.2.1 nt-opacity ​

普通渐变进入/退出

1.2.2 nt-fadein ​

从顶部往下移动渐变的进入/退出; 支持通过 --nt-fadein-offset 控制距离, 默认为 -20px

样式变量 ​

组件提供了下列 CSS 变量，可用于自定义样式

名称描述默认值
--nt-transition-times渐变时长, 所有渐变都支持0.3s
--nt-fadein-offset渐变距离, 支持的渐变有: nt-fadein-20px

2. 滚动条样式 ​

如果觉得默认滚动条不好看，想修改滚动条样式

引入滚动条样式表 ​

ts
import '@asteres/neatui-vue/style/util/scrollbar.css';

使用 ​

只需要在滚动容器添加 nt-scrollbar 类即可

更改滚动条颜色以及大小 ​

通过使用下面表格中的 CSS 变量，可以更改滚动条的颜色以及大小

主题定制 - 样式变量 ​

名称描述默认值
--nt-scrollbar-bg滑块背景色#d9d9d9
--nt-scrollbar-hover鼠标悬浮时滑块颜色#bfbfbf
--nt-scrollbar-size滑块尺寸, 水平滚动条时为高度，垂直时为宽度10px

Released under the MulanPSL2 License.

Copyright © 2019-present Shu

- + \ No newline at end of file diff --git a/hashmap.json b/hashmap.json index 596235ba..fc09409f 100644 --- a/hashmap.json +++ b/hashmap.json @@ -1 +1 @@ -{"components_card.md":"H6PkhXUX","components_button.md":"DbfCiMZ0","components_checkbox.md":"CvBZnr6Y","components_container.md":"DPuHRK3e","components_input.md":"C5C3YF0g","components_switch.md":"sn6TZbR6","components_tabbar.md":"oBlqZQfn","css-util.md":"B2MgVL1m","index.md":"Bar9Pr5h","components_tooltip.md":"kWf13fBc","components_table.md":"DRYegwFK","components_tabs.md":"DinJU0U-","reset.md":"gC62Tlli","usage.md":"BZz8MHsf","components_directives.md":"Bk6PBMp8","components_icon.md":"a5616xTr","components_collapse.md":"CC8xHJNC","components_message.md":"Dj9iOadK","components_polygon.md":"7GXyeaEf","components_image.md":"DsbngY1o","components_shadow.md":"D15v6Y7y","components_loading.md":"BviUqwEL","components_form.md":"r8yG6c9_","components_progress.md":"C7nxbGc5","components_radio.md":"B6yIhYjR","components_descriptionpanel.md":"Cz3EtxEg","components_qrcode.md":"CZh45zSj"} +{"components_container.md":"DPuHRK3e","components_form.md":"r8yG6c9_","components_image.md":"DsbngY1o","components_directives.md":"CVKfuD6p","components_input.md":"C5C3YF0g","components_card.md":"H6PkhXUX","components_icon.md":"a5616xTr","components_message.md":"Dj9iOadK","components_loading.md":"BviUqwEL","components_polygon.md":"7GXyeaEf","components_shadow.md":"D15v6Y7y","components_switch.md":"sn6TZbR6","reset.md":"gC62Tlli","components_table.md":"DRYegwFK","usage.md":"BZz8MHsf","components_collapse.md":"CC8xHJNC","components_tabs.md":"DinJU0U-","index.md":"Bar9Pr5h","components_tabbar.md":"oBlqZQfn","components_qrcode.md":"CZh45zSj","components_button.md":"DbfCiMZ0","components_progress.md":"C7nxbGc5","components_radio.md":"B6yIhYjR","components_descriptionpanel.md":"Cz3EtxEg","css-util.md":"B2MgVL1m","components_tooltip.md":"kWf13fBc","components_checkbox.md":"CvBZnr6Y"} diff --git a/index.html b/index.html index 1d17fd6a..0848d2fc 100644 --- a/index.html +++ b/index.html @@ -19,7 +19,7 @@

主题

NeatUi

Vue3 的 UI 组件库

轻量、样式可控、TypeScript

开始使用

背景

因为很多项目中，需要使用一些基础的 UI 组件，但是这些组件库的提供的功能太过繁杂但我只取其中一瓢，为了一瓢水而引入江河有点不划算

学习

自己写并维护一个 UI 组件库，这也是对于自己的一个总结；把自己会的归纳总结为一个组件

需求

需要使用一些特殊的功能，因此需要自己开发一个

兼容

一个组件同时兼容移动和PC。

Released under the MulanPSL2 License.

Copyright © 2019-present Shu

- + \ No newline at end of file diff --git a/reset.html b/reset.html index 824385c1..abde3e5e 100644 --- a/reset.html +++ b/reset.html @@ -67,7 +67,7 @@ line-height: 1.4; color: #333; } - + \ No newline at end of file diff --git a/usage.html b/usage.html index 738e03ad..34b6da92 100644 --- a/usage.html +++ b/usage.html @@ -57,7 +57,7 @@ }

通过上面就能修改，当然也能在侧边栏的样式的地方，手动覆盖变量也能实现

修改组件样式 ​

组件所有的样式都基本只有一层，所以如果要修改样式，在需要套一个层级就能修改

比如想修改 Button 样式, 只需要给根节点添加一个样式，例如: #app；然后就能修改样式，如下：

css
#app .nt-button {
   background-color: red;
 }

浏览器兼容性 ​

所有的组件尽量保证 ios 能够兼容到 11

- + \ No newline at end of file