diff --git a/404.html b/404.html index 55f6e6b2..83d48f23 100644 --- a/404.html +++ b/404.html @@ -16,7 +16,7 @@

主题

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

Released under the MulanPSL2 License.

Copyright © 2019-present Shu

- + \ No newline at end of file diff --git a/assets/components_directives.md.CU02nADO.js b/assets/components_directives.md.BeK8bMCp.js similarity index 94% rename from assets/components_directives.md.CU02nADO.js rename to assets/components_directives.md.BeK8bMCp.js index cf4e42a4..dda02525 100644 --- a/assets/components_directives.md.CU02nADO.js +++ b/assets/components_directives.md.BeK8bMCp.js @@ -1 +1 @@ -import{x as s,c as i,o as a,a9 as e}from"./chunks/framework.frWttwNL.js";const u=JSON.parse('{"title":"Directives 指令","description":"","frontmatter":{},"headers":[],"relativePath":"components/directives.md","filePath":"components/directives.md","lastUpdated":1713175101000}'),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{x as s,c as i,o as a,a9 as e}from"./chunks/framework.frWttwNL.js";const u=JSON.parse('{"title":"Directives 指令","description":"","frontmatter":{},"headers":[],"relativePath":"components/directives.md","filePath":"components/directives.md","lastUpdated":1713175101000}'),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}; diff --git a/assets/components_directives.md.CU02nADO.lean.js b/assets/components_directives.md.BeK8bMCp.lean.js similarity index 100% rename from assets/components_directives.md.CU02nADO.lean.js rename to assets/components_directives.md.BeK8bMCp.lean.js diff --git a/components/Polygon.html b/components/Polygon.html index 81021962..730a33cc 100644 --- a/components/Polygon.html +++ b/components/Polygon.html @@ -19,7 +19,7 @@

主题

Polygon ​

Polygon

演示 ​

基础用法 ​

基础用法

Released under the MulanPSL2 License.

Copyright © 2019-present Shu

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

主题

Button 按钮 ​

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

基础使用 ​

按钮类型 ​

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

按钮禁用 ​

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

按钮加载状态 ​

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

Block 按钮 ​

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

按钮形状 ​

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

图标按钮 ​

直接在 Button 内使用 Icon 组件。

API ​

Button Props ​

名称说明类型默认值
type按钮类型, normal, primary, textstringnormal
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-bg-color按钮的背景颜色 #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-bg-color鼠标悬浮时按钮的背景颜色var(--nt-btn-bg-color)
--nt-btn-active-color点击时按钮的颜色#197df1
--nt-btn-active-bg-color点击时按钮的背景颜色var(--nt-btn-bg-color)
--nt-btn-active-border-color点击时按钮的边框颜色var(--nt-btn-active-color)
--nt-btn-disabled-color禁用时按钮的文字颜色#c9c9c9
--nt-btn-disabled-bg-color禁用时按钮的背景颜色#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 26637332..d60e6f5a 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/container.html b/components/container.html index a07aaab4..a9903a11 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/directives.html b/components/directives.html index 115a6359..c720b5ab 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/icon.html b/components/icon.html
index 72e9c06d..d1919abd 100644
--- a/components/icon.html
+++ b/components/icon.html
@@ -27,7 +27,7 @@
 <nt-error-icon />
 <nt-loading-icon />
 // ......

框架内置的图标如下：

arrow-left
arrow-right
caret-bottom
caret-top
close
info
loading
mask-close
reduction
refresh-left
refresh-right
search
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 a820fba9..51b14d1b 100644 --- a/components/image.html +++ b/components/image.html @@ -19,7 +19,7 @@

主题

Image 图片 ​

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 439078ca..c7882fb3 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/message.html b/components/message.html index 13c14195..17a552d2 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/qrcode.html b/components/qrcode.html index 2ffb07ed..d0c0560a 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/tooltip.html b/components/tooltip.html index d6f6ba19..065f15e8 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 属性为准

API ​

Tooltip Props ​

参数说明类型可选值默认值
title提示文字string--
placement提示框出现位置stringtopStart、top、topEnd、bottomStart、bottom、bottomEndtop

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 33fba3a4..972ae435 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 bded8669..3f0a4bd7 100644 --- a/hashmap.json +++ b/hashmap.json @@ -1 +1 @@ -{"components_directives.md":"CU02nADO","components_image.md":"M5U9z6dg","components_icon.md":"BmPFGDS2","components_container.md":"DFK0UL_Y","components_message.md":"DugwUyse","components_button.md":"CCEoX63m","components_qrcode.md":"Dvc7pc4P","components_polygon.md":"Dd_pZq4z","css-util.md":"7NqqV1I1","components_input.md":"CrCUYUDz","index.md":"CPTGM_Q4","reset.md":"DrQySwz5","usage.md":"E2hxx1we","components_tooltip.md":"BjbDtZPD","components_card.md":"Dxbu6iR_"} +{"components_polygon.md":"Dd_pZq4z","components_button.md":"CCEoX63m","components_card.md":"Dxbu6iR_","components_input.md":"CrCUYUDz","reset.md":"DrQySwz5","components_icon.md":"BmPFGDS2","components_message.md":"DugwUyse","components_container.md":"DFK0UL_Y","components_tooltip.md":"BjbDtZPD","components_qrcode.md":"Dvc7pc4P","components_image.md":"M5U9z6dg","index.md":"CPTGM_Q4","css-util.md":"7NqqV1I1","components_directives.md":"BeK8bMCp","usage.md":"E2hxx1we"} diff --git a/index.html b/index.html index 6a818d1e..77d14ee9 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 40bc0303..dd9762f6 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 a1de9354..85f1b925 100644 --- a/usage.html +++ b/usage.html @@ -53,7 +53,7 @@ }

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

修改组件样式 ​

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

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

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

浏览器兼容性 ​

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

- + \ No newline at end of file