feat(@vben-core/shadcn-ui): 新增 GlassCard 毛玻璃卡片组件
- 创建独立的 GlassCard 组件,提供更明确的语义化 API - 导出 GlassCard 组件供项目使用 - 支持自定义 class 属性进行样式扩展
This commit is contained in:
20
apps/web-antd/src/components/glass-card/GlassCard.vue
Normal file
20
apps/web-antd/src/components/glass-card/GlassCard.vue
Normal file
@@ -0,0 +1,20 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
const props = defineProps<{
|
||||||
|
class?: string | string[] | Record<string, boolean>;
|
||||||
|
}>();
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div
|
||||||
|
:class="[
|
||||||
|
'glass-card glass-border glass-shadow glass-highlight',
|
||||||
|
'rounded-[2rem] text-card-foreground',
|
||||||
|
'transition-all duration-300 ease-out',
|
||||||
|
'hover:-translate-y-1 hover:glass-shadow-hover',
|
||||||
|
props.class,
|
||||||
|
]"
|
||||||
|
>
|
||||||
|
<slot></slot>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
2
apps/web-antd/src/components/glass-card/index.ts
Normal file
2
apps/web-antd/src/components/glass-card/index.ts
Normal file
@@ -0,0 +1,2 @@
|
|||||||
|
export { default as GlassCard } from './GlassCard.vue';
|
||||||
|
|
||||||
@@ -0,0 +1,24 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import { cn } from '@vben-core/shared/utils';
|
||||||
|
|
||||||
|
const props = defineProps<{
|
||||||
|
class?: any;
|
||||||
|
}>();
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div
|
||||||
|
:class="
|
||||||
|
cn(
|
||||||
|
'glass-card glass-border glass-shadow glass-highlight',
|
||||||
|
'rounded-[2rem] text-card-foreground',
|
||||||
|
'transition-all duration-300 ease-out',
|
||||||
|
'hover:-translate-y-1 hover:glass-shadow-hover',
|
||||||
|
props.class,
|
||||||
|
)
|
||||||
|
"
|
||||||
|
>
|
||||||
|
<slot></slot>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
@@ -0,0 +1,2 @@
|
|||||||
|
export { default as GlassCard } from './GlassCard.vue';
|
||||||
|
|
||||||
@@ -9,6 +9,7 @@ export * from './checkbox';
|
|||||||
export * from './dialog';
|
export * from './dialog';
|
||||||
export * from './dropdown-menu';
|
export * from './dropdown-menu';
|
||||||
export * from './form';
|
export * from './form';
|
||||||
|
export * from './glass-card';
|
||||||
export * from './hover-card';
|
export * from './hover-card';
|
||||||
export * from './input';
|
export * from './input';
|
||||||
export * from './label';
|
export * from './label';
|
||||||
|
|||||||
@@ -34,6 +34,7 @@ export {
|
|||||||
VbenPinInput,
|
VbenPinInput,
|
||||||
VbenSelect,
|
VbenSelect,
|
||||||
VbenSpinner,
|
VbenSpinner,
|
||||||
|
GlassCard,
|
||||||
} from '@vben-core/shadcn-ui';
|
} from '@vben-core/shadcn-ui';
|
||||||
|
|
||||||
export type { FlattenedItem } from '@vben-core/shadcn-ui';
|
export type { FlattenedItem } from '@vben-core/shadcn-ui';
|
||||||
|
|||||||
Reference in New Issue
Block a user