diff --git a/docs/components/layout/global-footer.md b/docs/components/layout/global-footer.md index a47d852b..f41c00ea 100644 --- a/docs/components/layout/global-footer.md +++ b/docs/components/layout/global-footer.md @@ -58,6 +58,82 @@ const socials = [ ::: +## 液态玻璃效果 (glass) + +::: raw + + +
+
+ +
+
+ + +::: + +::: details 查看代码 + +```vue + + + +``` + +::: + ## 全局页脚 (Global Footer) 属性 @@ -109,6 +187,39 @@ const socials = [ { icon: 'Github', href: 'https://github.com/devlive-community', label: 'GitHub' } ] +const glassLinks = [ + { + title: '产品', + links: [ + { label: '功能', href: '#', icon: 'lucide:sparkles' }, + { label: '定价', href: '#', icon: 'lucide:dollar-sign' }, + { label: '更新日志', href: '#', icon: 'lucide:history' } + ] + }, + { + title: '资源', + links: [ + { label: '文档', href: '#', icon: 'lucide:book-open' }, + { label: 'API', href: '#', icon: 'lucide:code' }, + { label: '博客', href: '#', icon: 'lucide:newspaper' } + ] + }, + { + title: '社区', + links: [ + { label: 'GitHub', href: 'https://github.com', icon: 'lucide:github', external: true }, + { label: 'Discord', href: '#', icon: 'lucide:message-circle' }, + { label: '论坛', href: '#', icon: 'lucide:users' } + ] + } +] + +const glassSocials = [ + { label: 'GitHub', href: 'https://github.com', icon: 'lucide:github' }, + { label: 'Twitter', href: 'https://twitter.com', icon: 'lucide:twitter' }, + { label: 'Discord', href: '#', icon: 'lucide:message-circle' } +] + import { useData } from 'vitepress' import { computed } from 'vue' diff --git a/docs/components/layout/skeleton.md b/docs/components/layout/skeleton.md index 72961034..a8208641 100644 --- a/docs/components/layout/skeleton.md +++ b/docs/components/layout/skeleton.md @@ -118,6 +118,71 @@ title: 骨架屏 (Skeleton) ::: +## 液态玻璃效果 (glass) + + +
+
+
+

基础骨架屏

+ +
+
+

带动画效果

+ +
+
+

不同形状

+
+ + + +
+
+
+

图片骨架屏

+ +
+
+
+ + +::: details 查看代码 + +```vue + + + +``` + +::: + ## 骨架屏 (Skeleton) 属性 @@ -139,6 +206,8 @@ title: 骨架屏 (Skeleton) ['width', '节点的宽度', 'Number | String', '-', '-'], ['type', '节点的类型', 'Enum', 'rect', 'circle | square | rect | image'], ['size', '节点的尺寸', 'Enum', 'default', 'small | default | large'], + ['dark', '是否为暗黑模式', 'boolean', 'false', '-'], + ['glass', '是否启用液态玻璃效果', 'boolean', 'false', '-'], ]"> diff --git a/docs/components/layout/toolbar-footer.md b/docs/components/layout/toolbar-footer.md index f890b3c8..ec77a9b7 100644 --- a/docs/components/layout/toolbar-footer.md +++ b/docs/components/layout/toolbar-footer.md @@ -116,6 +116,53 @@ title: 工具栏页脚 (Toolbar Footer) ::: +## 液态玻璃效果 (glass) + +::: raw + + +
+
+
+

液态玻璃效果工具栏

+

底部显示带有玻璃效果的工具栏

+
+ + + +
+
+ + +::: + +::: details 查看代码 + +```vue + + + +``` + +::: + ## 工具栏页脚 (Toolbar Footer) 属性 diff --git a/docs/components/view/drawer.md b/docs/components/view/drawer.md index ddaae3de..26ea64e1 100644 --- a/docs/components/view/drawer.md +++ b/docs/components/view/drawer.md @@ -184,6 +184,60 @@ const heightValue = ref(false) ::: +## 液态玻璃效果 (glass) + + + 打开液态玻璃抽屉 + +
+

+ 这是一个带有液态玻璃效果的抽屉组件。 +

+

+ 背景具有模糊和半透明特性，同时保持良好的可读性。 +

+
+ + + + +::: details 查看代码 + +```vue + + + +``` + +::: + ## 抽屉 (Drawer) 属性 @@ -237,4 +293,5 @@ const leftValue = ref(false) const rightValue = ref(false) const widthValue = ref(false) const heightValue = ref(false) +const glassValue = ref(false) \ No newline at end of file diff --git a/docs/components/view/message.md b/docs/components/view/message.md index 495f29ce..a19952e9 100644 --- a/docs/components/view/message.md +++ b/docs/components/view/message.md @@ -256,6 +256,46 @@ export default { ::: +## 液态玻璃效果 (glass) + + +
+
+ 显示液态玻璃消息 +
+
+ + +::: details 查看代码 + +```vue + + + +``` + +::: + ## 消息 (Message) 属性 @@ -348,7 +390,16 @@ return {darkMode} duration: 0, closable: true }); - } + }, + glassMessage() { + this.$Message.info({ + content: '这是一个液态玻璃效果的消息', + type: 'success', + showIcon: true, + glass: true, + duration: 3 + }) + } } } \ No newline at end of file diff --git a/docs/components/view/modal.md b/docs/components/view/modal.md index 6e36f182..6ec13f4b 100644 --- a/docs/components/view/modal.md +++ b/docs/components/view/modal.md @@ -346,6 +346,60 @@ const value = ref(false); ::: +## 液态玻璃效果 (glass) + + + 打开液态玻璃效果 Modal + +
+

+ 这个模态框使用了液态玻璃效果，背景具有模糊和半透明特性。 +

+

+ 您可以通过背景看到后面的内容，同时保持良好的可读性。 +

+
+ + + + +::: details 查看代码 + +```vue + + + +``` + +::: + ## 模态框 (Modal) 属性 @@ -405,4 +461,5 @@ const customHeightModal = ref(false); const closeableModal = ref(false); const noClosableModal = ref(false); const customClosableModal = ref(false); +const glassModal = ref(false); \ No newline at end of file diff --git a/docs/components/view/progress.md b/docs/components/view/progress.md index 8f99a999..11e097ec 100644 --- a/docs/components/view/progress.md +++ b/docs/components/view/progress.md @@ -132,6 +132,44 @@ const value = ref(10) ::: +## 液态玻璃效果 (glass) + + +
+
+ Basic Glass + Success + Warning + Error + Large +
+
+ + +::: details 查看代码 + +```vue + + + +``` + +::: + +``` + +::: + ## 表格 (Table) 属性 { ['height', '组件的高度', 'string | number', 'auto', '-'], ['maxHeight', '组件的最大高度', 'string | number', '300', '-'], ['size', '组件的尺寸', 'enum', 'default', 'small | default | large'], + ['glass', '是否启用液态玻璃效果', 'boolean', 'false', '-'], + ['dark', '是否启用暗黑模式', 'boolean', 'false', '-'], ]"> diff --git a/docs/components/view/tooltip.md b/docs/components/view/tooltip.md index 789ff70e..ae0934e3 100644 --- a/docs/components/view/tooltip.md +++ b/docs/components/view/tooltip.md @@ -177,6 +177,69 @@ const darkMode = computed(() => isDark.value) ::: +## 液态玻璃效果 (glass) + + +
+
+
+ + 上方提示 + + + 下方提示 + + + 左侧提示 + + + 右侧提示 + +
+
+ + 带箭头提示 + +
+
+
+ + +::: details 查看代码 + +```vue + + + +``` + +::: + ## 提示 (Tooltip) 属性 isDark.value) ['position', '组件的位置', 'enum', 'top', 'top | bottom | left | right'], ['arrow', '是否显示箭头', 'boolean', 'true', '-'], ['maxWidth', '如果宽度为 auto，则提示工具的最大宽度', 'number | string', '200', '-'], + ['dark', '是否为暗黑模式', 'boolean', 'false', '-'], + ['glass', '是否启用液态玻璃效果', 'boolean', 'false', '-'], ]"> diff --git a/playground/src/example/drawer/glass.vue b/playground/src/example/drawer/glass.vue new file mode 100644 index 00000000..099352e5 --- /dev/null +++ b/playground/src/example/drawer/glass.vue @@ -0,0 +1,138 @@ + + + diff --git a/playground/src/example/global-footer/glass.vue b/playground/src/example/global-footer/glass.vue new file mode 100644 index 00000000..4bb84d62 --- /dev/null +++ b/playground/src/example/global-footer/glass.vue @@ -0,0 +1,73 @@ + + + diff --git a/playground/src/example/modal/glass.vue b/playground/src/example/modal/glass.vue new file mode 100644 index 00000000..56041314 --- /dev/null +++ b/playground/src/example/modal/glass.vue @@ -0,0 +1,79 @@ + + + diff --git a/playground/src/example/progress/glass.vue b/playground/src/example/progress/glass.vue new file mode 100644 index 00000000..5d26302b --- /dev/null +++ b/playground/src/example/progress/glass.vue @@ -0,0 +1,91 @@ + + + diff --git a/playground/src/example/skeleton/glass.vue b/playground/src/example/skeleton/glass.vue new file mode 100644 index 00000000..747dcb91 --- /dev/null +++ b/playground/src/example/skeleton/glass.vue @@ -0,0 +1,77 @@ + + + diff --git a/playground/src/example/toolbar-footer/glass.vue b/playground/src/example/toolbar-footer/glass.vue new file mode 100644 index 00000000..01eb827f --- /dev/null +++ b/playground/src/example/toolbar-footer/glass.vue @@ -0,0 +1,45 @@ + + + diff --git a/playground/src/example/tooltip/glass.vue b/playground/src/example/tooltip/glass.vue new file mode 100644 index 00000000..b14d5092 --- /dev/null +++ b/playground/src/example/tooltip/glass.vue @@ -0,0 +1,76 @@ + + + diff --git a/src/App.vue b/src/App.vue index 76549021..699dc126 100644 --- a/src/App.vue +++ b/src/App.vue @@ -1,36 +1,24 @@