在card组件的默认插槽中使用 markdown 来高亮你的内容。
使用title、icon和color prop 来定制它。你也可以传递任何属性<NuxtLink>组件的任何属性。
::card{title="Startup" icon="i-lucide-users" color="primary" to="https://nuxt.lemonsqueezy.com" target="_blank"}
Best suited for small teams, startups and agencies with up to 5 developers.
::
| 属性 | 默认值 | 类型 |
|---|---|---|
过渡到 | string | RouteLocationAsRelativeGeneric | RouteLocationAsPathGeneric
| |
target | null | "_blank" | "_parent" | "_self" | "_top" | string & {} | |
图标 | any | |
title | string | |
description | string | |
color | 'primary' | "error" | "primary" | "secondary" | "success" | "info" | "warning" | "neutral" |
ui | { base?: ClassNameValue; icon?: ClassNameValue; title?: ClassNameValue; description?: ClassNameValue; externalIcon?: ClassNameValue; } |
| 插槽 | 类型 |
|---|---|
default | {} |
title | {} |
export default defineAppConfig({
ui: {
prose: {
card: {
slots: {
base: [
'group relative block my-5 p-4 sm:p-6 border border-default rounded-md bg-default',
'transition-colors'
],
icon: 'size-6 mb-2 block',
title: 'text-highlighted font-semibold',
description: 'text-[15px] text-muted *:first:mt-0 *:last:mb-0 *:my-1',
externalIcon: [
'size-4 align-top absolute right-2 top-2 text-dimmed pointer-events-none',
'transition-colors'
]
},
variants: {
color: {
primary: {
icon: 'text-primary'
},
secondary: {
icon: 'text-secondary'
},
success: {
icon: 'text-success'
},
info: {
icon: 'text-info'
},
warning: {
icon: 'text-warning'
},
error: {
icon: 'text-error'
},
neutral: {
icon: 'text-highlighted'
}
},
to: {
true: ''
},
title: {
true: {
description: 'mt-1'
}
}
},
compoundVariants: [
{
color: 'primary',
to: true,
class: {
base: 'hover:bg-primary/10 hover:border-primary',
externalIcon: 'group-hover:text-primary'
}
},
{
color: 'neutral',
to: true,
class: {
base: 'hover:bg-elevated/50 hover:border-inverted',
externalIcon: 'group-hover:text-highlighted'
}
}
],
defaultVariants: {
color: 'primary'
}
}
}
}
})
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'
export default defineConfig({
plugins: [
vue(),
ui({
ui: {
prose: {
card: {
slots: {
base: [
'group relative block my-5 p-4 sm:p-6 border border-default rounded-md bg-default',
'transition-colors'
],
icon: 'size-6 mb-2 block',
title: 'text-highlighted font-semibold',
description: 'text-[15px] text-muted *:first:mt-0 *:last:mb-0 *:my-1',
externalIcon: [
'size-4 align-top absolute right-2 top-2 text-dimmed pointer-events-none',
'transition-colors'
]
},
variants: {
color: {
primary: {
icon: 'text-primary'
},
secondary: {
icon: 'text-secondary'
},
success: {
icon: 'text-success'
},
info: {
icon: 'text-info'
},
warning: {
icon: 'text-warning'
},
error: {
icon: 'text-error'
},
neutral: {
icon: 'text-highlighted'
}
},
to: {
true: ''
},
title: {
true: {
description: 'mt-1'
}
}
},
compoundVariants: [
{
color: 'primary',
to: true,
class: {
base: 'hover:bg-primary/10 hover:border-primary',
externalIcon: 'group-hover:text-primary'
}
},
{
color: 'neutral',
to: true,
class: {
base: 'hover:bg-elevated/50 hover:border-inverted',
externalIcon: 'group-hover:text-highlighted'
}
}
],
defaultVariants: {
color: 'primary'
}
}
}
}
})
]
})