Card
카드의 내용을 머리글, 본문 및 바닥글과 함께 표시합니다.
Usage
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>Title : badge{label="4.7+" class="align-text-top"}
title prop을 사용하여 카드 헤더의 제목을 설정합니다.
Card with title
<template>
<UCard title="Card with title" class="w-full">
<Placeholder class="h-32" />
</UCard>
</template>설명: badge{label="4.7+" class="align-text-top"}
description prop을 사용하여 카드의 헤더에 대한 설명을 설정합니다.
Card with description
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<template>
<UCard
title="Card with description"
description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
class="w-full"
>
<Placeholder class="h-32" />
</UCard>
</template>Variant
variant prop을 사용하여 카드의 변형을 변경합니다.
<template>
<UCard variant="subtle">
<template #header>
<Placeholder class="h-8" />
</template>
<Placeholder class="h-32" />
<template #footer>
<Placeholder class="h-8" />
</template>
</UCard>
</template>API
Props (### Props)
| Prop | Default | Type |
|---|---|---|
as | 'div' | anyThe element or component this component should render as. |
title | string | |
description | string | |
variant | 'outline' | "solid" | "outline" | "soft" | "subtle" |
ui | { root?: SlotClass; header?: SlotClass; title?: SlotClass; description?: SlotClass; body?: SlotClass; footer?: SlotClass; } |
Slots
| Slot | Type |
|---|---|
header | {} |
title | {} |
description | {} |
default | {} |
footer | {} |
Theme (## 테마)
app.config.ts
export default defineAppConfig({
ui: {
card: {
slots: {
root: 'rounded-lg overflow-hidden',
header: 'p-4 sm:px-6',
title: 'text-highlighted font-semibold',
description: 'mt-1 text-muted text-sm',
body: 'p-4 sm:p-6',
footer: 'p-4 sm:px-6'
},
variants: {
variant: {
solid: {
root: 'bg-inverted text-inverted',
title: 'text-inverted',
description: 'text-dimmed'
},
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'
}
}
}
})vite.config.ts
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',
title: 'text-highlighted font-semibold',
description: 'mt-1 text-muted text-sm',
body: 'p-4 sm:p-6',
footer: 'p-4 sm:px-6'
},
variants: {
variant: {
solid: {
root: 'bg-inverted text-inverted',
title: 'text-inverted',
description: 'text-dimmed'
},
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'
}
}
}
})
]
})변경 로그
No recent changes