Skip to content

Commit 9bbddbc

Browse files
qianmoQqianmoQ
authored
Merge pull request #225 from qianmoQ/dev-2025.1.5
fix: 修复文档 CNAME
2 parents a60f0ac + bf71f46 commit 9bbddbc

5 files changed

Lines changed: 119 additions & 29 deletions

File tree

‎.github/workflows/deploy-docs.yml‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@ jobs:
2929
with:
3030
github_token: ${{ secrets.GH_TOKEN }}
3131
publish_dir: docs/.vitepress/dist
32+
cname: view-shadcn-ui.devlive.org
3233

3334
deploy-playground:
3435
runs-on: ubuntu-latest

‎docs/components/layout/divider.md‎

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -106,6 +106,84 @@ title: 分隔线 (Divider)
106106

107107
:::
108108

109+
## 液态玻璃效果 (glass)
110+
111+
::: raw
112+
113+
<div :class="['p-6 rounded-lg', darkMode ? 'bg-gradient-to-r from-teal-900 to-cyan-900' : 'bg-gradient-to-r from-teal-400 to-cyan-400']">
114+
<CodeRunner title="液态玻璃效果" class="bg-transparent">
115+
<div :class="['p-8 rounded-lg', darkMode ? 'bg-gray-800/50' : 'bg-white/50']">
116+
<div class="space-y-6">
117+
<div>
118+
<h4 :class="['text-base font-semibold mb-3', darkMode ? 'text-gray-200' : 'text-gray-800']">基础分割线</h4>
119+
<ShadcnDivider glass :dark="darkMode"/>
120+
</div>
121+
<div>
122+
<h4 :class="['text-base font-semibold mb-3', darkMode ? 'text-gray-200' : 'text-gray-800']">带文字分割线</h4>
123+
<ShadcnDivider text="文本内容" glass :dark="darkMode"/>
124+
</div>
125+
<div>
126+
<h4 :class="['text-base font-semibold mb-3', darkMode ? 'text-gray-200' : 'text-gray-800']">不同位置</h4>
127+
<div class="space-y-3">
128+
<ShadcnDivider text="左侧文本" orientation="left" glass :dark="darkMode"/>
129+
<ShadcnDivider text="居中文本" orientation="center" glass :dark="darkMode"/>
130+
<ShadcnDivider text="右侧文本" orientation="right" glass :dark="darkMode"/>
131+
</div>
132+
</div>
133+
<div>
134+
<h4 :class="['text-base font-semibold mb-3', darkMode ? 'text-gray-200' : 'text-gray-800']">虚线样式</h4>
135+
<ShadcnDivider text="虚线分割" dashed glass :dark="darkMode"/>
136+
</div>
137+
</div>
138+
</div>
139+
</CodeRunner>
140+
</div>
141+
142+
:::
143+
144+
::: details 查看代码
145+
146+
```vue
147+
<template>
148+
<div :class="['p-6 rounded-lg', darkMode ? 'bg-gradient-to-r from-teal-900 to-cyan-900' : 'bg-gradient-to-r from-teal-400 to-cyan-400']">
149+
<div :class="['p-8 rounded-lg', darkMode ? 'bg-gray-800/50' : 'bg-white/50']">
150+
<div class="space-y-6">
151+
<div>
152+
<h4 :class="['text-base font-semibold mb-3', darkMode ? 'text-gray-200' : 'text-gray-800']">基础分割线</h4>
153+
<ShadcnDivider glass :dark="darkMode"/>
154+
</div>
155+
<div>
156+
<h4 :class="['text-base font-semibold mb-3', darkMode ? 'text-gray-200' : 'text-gray-800']">带文字分割线</h4>
157+
<ShadcnDivider text="文本内容" glass :dark="darkMode"/>
158+
</div>
159+
<div>
160+
<h4 :class="['text-base font-semibold mb-3', darkMode ? 'text-gray-200' : 'text-gray-800']">不同位置</h4>
161+
<div class="space-y-3">
162+
<ShadcnDivider text="左侧文本" orientation="left" glass :dark="darkMode"/>
163+
<ShadcnDivider text="居中文本" orientation="center" glass :dark="darkMode"/>
164+
<ShadcnDivider text="右侧文本" orientation="right" glass :dark="darkMode"/>
165+
</div>
166+
</div>
167+
<div>
168+
<h4 :class="['text-base font-semibold mb-3', darkMode ? 'text-gray-200' : 'text-gray-800']">虚线样式</h4>
169+
<ShadcnDivider text="虚线分割" dashed glass :dark="darkMode"/>
170+
</div>
171+
</div>
172+
</div>
173+
</div>
174+
</template>
175+
176+
<script setup lang="ts">
177+
import { useData } from 'vitepress'
178+
import { computed } from 'vue'
179+
180+
const { isDark } = useData()
181+
const darkMode = computed(() => isDark.value)
182+
</script>
183+
```
184+
185+
:::
186+
109187
## 分隔线 (Divider) 属性
110188

111189
<ApiTable title="分隔线 (Divider) 属性"
@@ -115,6 +193,8 @@ title: 分隔线 (Divider)
115193
['type', '分隔线类型', 'enum', '-', 'horizontal | vertical'],
116194
['orientation', '分割线标题的位置', 'enum', '-', 'left | center | right'],
117195
['dashed', '分隔线是否为虚线', 'boolean', 'false', '-'],
196+
['glass', '液态玻璃效果', 'boolean', 'false', '-'],
197+
['dark', '暗黑模式', 'boolean', 'false', '-'],
118198
]">
119199
</ApiTable>
120200

‎src/App.vue‎

Lines changed: 19 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -6,34 +6,30 @@
66

77
<div class="space-y-6 my-6">
88
<div>
9-
<h3 :class="['text-lg font-semibold mb-4', isDark ? 'text-gray-200' : '']">ShadcnGradientText - 液态玻璃效果</h3>
10-
<div :class="['p-6 rounded-lg', isDark ? 'bg-gradient-to-r from-indigo-900 to-purple-900' : 'bg-gradient-to-r from-indigo-400 to-purple-400']">
9+
<h3 :class="['text-lg font-semibold mb-4', isDark ? 'text-gray-200' : '']">ShadcnDivider - 液态玻璃效果</h3>
10+
<div :class="['p-6 rounded-lg', isDark ? 'bg-gradient-to-r from-teal-900 to-cyan-900' : 'bg-gradient-to-r from-teal-400 to-cyan-400']">
1111
<div :class="['p-8 rounded-lg', isDark ? 'bg-gray-800/50' : 'bg-white/50']">
12-
<div class="space-y-4">
12+
<div class="space-y-6">
1313
<div>
14-
<h4 :class="['text-base font-semibold mb-2', isDark ? 'text-gray-200' : 'text-gray-800']">基础渐变文本</h4>
15-
<div class="space-y-2">
16-
<ShadcnGradientText from="#FF6B6B" to="#4ECDC4" :deg="90" background glass :dark="isDark">
17-
渐变文本效果
18-
</ShadcnGradientText>
19-
<br/>
20-
<ShadcnGradientText from="#FFD93D" to="#FF6B9D" :deg="45" background glass :dark="isDark">
21-
彩虹渐变文本
22-
</ShadcnGradientText>
23-
</div>
14+
<h4 :class="['text-base font-semibold mb-3', isDark ? 'text-gray-200' : 'text-gray-800']">基础分割线</h4>
15+
<ShadcnDivider glass :dark="isDark"/>
16+
</div>
17+
<div>
18+
<h4 :class="['text-base font-semibold mb-3', isDark ? 'text-gray-200' : 'text-gray-800']">带文字分割线</h4>
19+
<ShadcnDivider text="文本内容" glass :dark="isDark"/>
2420
</div>
2521
<div>
26-
<h4 :class="['text-base font-semibold mb-2', isDark ? 'text-gray-200' : 'text-gray-800']">多色渐变</h4>
27-
<div class="space-y-2">
28-
<ShadcnGradientText options="90deg, #667eea 0%, #764ba2 50%, #f093fb 100%" background glass :dark="isDark">
29-
三色渐变文本
30-
</ShadcnGradientText>
31-
<br/>
32-
<ShadcnGradientText options="135deg, #667eea 0%, #764ba2 25%, #f093fb 50%, #4facfe 75%, #00f2fe 100%" background glass :dark="isDark">
33-
五色渐变文本
34-
</ShadcnGradientText>
22+
<h4 :class="['text-base font-semibold mb-3', isDark ? 'text-gray-200' : 'text-gray-800']">不同位置</h4>
23+
<div class="space-y-3">
24+
<ShadcnDivider text="左侧文本" orientation="left" glass :dark="isDark"/>
25+
<ShadcnDivider text="居中文本" orientation="center" glass :dark="isDark"/>
26+
<ShadcnDivider text="右侧文本" orientation="right" glass :dark="isDark"/>
3527
</div>
3628
</div>
29+
<div>
30+
<h4 :class="['text-base font-semibold mb-3', isDark ? 'text-gray-200' : 'text-gray-800']">虚线样式</h4>
31+
<ShadcnDivider text="虚线分割" dashed glass :dark="isDark"/>
32+
</div>
3733
</div>
3834
</div>
3935
</div>
@@ -45,7 +41,7 @@
4541
<script setup lang="ts">
4642
import { ref } from 'vue'
4743
import { ShadcnButton } from "@/ui/button";
48-
import { ShadcnGradientText } from "@/ui/text";
44+
import { ShadcnDivider } from "@/ui/divider";
4945
5046
const isDark = ref(false)
5147
</script>

‎src/ui/divider/ShadcnDivider.vue‎

Lines changed: 18 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,24 @@
11
<template>
22
<div :class="cn(type === 'vertical' ? 'border-l' : 'flex items-center w-full relative pr-8')">
33
<!-- Left dividing line -->
4-
<div v-if="text && orientation === 'left'" :class="cn('w-8 border-t', dark ? 'border-gray-600' : 'border-gray-100', dashed && 'border-dashed')"/>
4+
<div v-if="text && orientation === 'left'" :class="cn('w-8 border-t',
5+
glass ? (dark ? 'border-white/30' : 'border-gray-400/50') : (dark ? 'border-gray-600' : 'border-gray-100'),
6+
glass && 'shadow-sm shadow-black/10',
7+
dashed && 'border-dashed')"/>
58
<div v-else-if="orientation !== 'left'"
69
:class="cn(
7-
type === 'vertical' ? (dark ? 'bg-gray-600' : 'bg-gray-100') : cn('flex-grow border-t', dark ? 'border-gray-600' : 'border-gray-100'),
10+
type === 'vertical' ? (glass ? (dark ? 'bg-white/30' : 'bg-gray-400/50') : (dark ? 'bg-gray-600' : 'bg-gray-100')) : cn('flex-grow border-t', glass ? (dark ? 'border-white/30' : 'border-gray-400/50') : (dark ? 'border-gray-600' : 'border-gray-100')),
11+
glass && 'shadow-sm shadow-black/10',
812
dashed && 'border-dashed',
913
orientation === 'right' && 'flex-1'
1014
)"/>
1115

1216
<!-- A small short line on the left -->
1317
<div v-if="(text || $slots.default) && orientation === 'left' && type === 'horizontal'"
14-
:class="cn('w-8 mr-4 border-t', dark ? 'border-gray-600' : 'border-gray-100', dashed && 'border-dashed')"/>
18+
:class="cn('w-8 mr-4 border-t',
19+
glass ? (dark ? 'border-white/30' : 'border-gray-400/50') : (dark ? 'border-gray-600' : 'border-gray-100'),
20+
glass && 'shadow-sm shadow-black/10',
21+
dashed && 'border-dashed')"/>
1522

1623
<!-- Text or slot content -->
1724
<span v-if="text"
@@ -36,14 +43,18 @@
3643

3744
<!-- Dividing line on the right -->
3845
<div :class="cn(
39-
type === 'vertical' ? (dark ? 'bg-gray-600' : 'bg-gray-100') : cn('flex-grow border-t', dark ? 'border-gray-600' : 'border-gray-100'),
46+
type === 'vertical' ? (glass ? (dark ? 'bg-white/30' : 'bg-gray-400/50') : (dark ? 'bg-gray-600' : 'bg-gray-100')) : cn('flex-grow border-t', glass ? (dark ? 'border-white/30' : 'border-gray-400/50') : (dark ? 'border-gray-600' : 'border-gray-100')),
47+
glass && 'shadow-sm shadow-black/10',
4048
dashed && 'border-dashed',
4149
orientation === 'right' && 'flex-1'
4250
)"/>
4351

4452
<!-- A small short line on the right -->
4553
<div v-if="(text || $slots.default) && orientation === 'right' && type === 'horizontal'"
46-
:class="cn('absolute right-0 top-1/2 -translate-y-1/2 w-8 border-t', dark ? 'border-gray-600' : 'border-gray-100', dashed && 'border-dashed')"/>
54+
:class="cn('absolute right-0 top-1/2 -translate-y-1/2 w-8 border-t',
55+
glass ? (dark ? 'border-white/30' : 'border-gray-400/50') : (dark ? 'border-gray-600' : 'border-gray-100'),
56+
glass && 'shadow-sm shadow-black/10',
57+
dashed && 'border-dashed')"/>
4758
</div>
4859
</template>
4960

@@ -54,6 +65,7 @@ import { DividerProps } from '@/ui/divider/types.ts'
5465
withDefaults(defineProps<DividerProps>(), {
5566
type: 'horizontal',
5667
dashed: false,
57-
dark: false
68+
dark: false,
69+
glass: false
5870
})
5971
</script>

‎src/ui/divider/types.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,4 +5,5 @@ export interface DividerProps
55
orientation?: 'left' | 'center' | 'right'
66
dashed?: boolean
77
dark?: boolean
8+
glass?: boolean
89
}

0 commit comments

Comments
 (0)