使用 header、default 和 footer 插槽向卡片添加内容。
<template>
<UCard>
<template #header>
<Placeholder class="h-8" />
</template>
<Placeholder class="h-32" />
<template #footer>
<Placeholder class="h-8" />
</template>
</UCard>
</template>
使用 variant 属性更改卡片的变体。
<template>
<UCard variant="subtle">
<template #header>
<Placeholder class="h-8" />
</template>
<Placeholder class="h-32" />
<template #footer>
<Placeholder class="h-8" />
</template>
</UCard>
</template>
| 属性 | 默认值 | 类型 |
|---|---|---|
as |
|
此组件应渲染为的元素或组件。 |
variant |
|
|
ui |
|
| 插槽 | 类型 |
|---|---|
页头 |
|
default |
|
页脚 |
|
export default defineAppConfig({
ui: {
card: {
slots: {
root: 'rounded-lg overflow-hidden',
header: 'p-4 sm:px-6',
body: 'p-4 sm:p-6',
footer: 'p-4 sm:px-6'
},
variants: {
variant: {
solid: {
root: 'bg-inverted text-inverted'
},
outline: {
root: 'bg-default ring ring-default divide-y divide-default'
},
soft: {
root: 'bg-elevated/50 divide-y divide-default'
},
subtle: {
root: 'bg-elevated/50 ring ring-default divide-y divide-default'
}
}
},
defaultVariants: {
variant: 'outline'
}
}
}
})
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'
export default defineConfig({
plugins: [
vue(),
ui({
ui: {
card: {
slots: {
root: 'rounded-lg overflow-hidden',
header: 'p-4 sm:px-6',
body: 'p-4 sm:p-6',
footer: 'p-4 sm:px-6'
},
variants: {
variant: {
solid: {
root: 'bg-inverted text-inverted'
},
outline: {
root: 'bg-default ring ring-default divide-y divide-default'
},
soft: {
root: 'bg-elevated/50 divide-y divide-default'
},
subtle: {
root: 'bg-elevated/50 ring ring-default divide-y divide-default'
}
}
},
defaultVariants: {
variant: 'outline'
}
}
}
})
]
})