Card

GitHub
创建带有可选链接和导航的高亮内容块。

用法

在 card 组件的默认插槽中使用 markdown 来高亮您的内容。

使用 title、icon 和 color 属性来自定义。您还可以传递来自<NuxtLink>组件的任何属性。

创业版

最适合最多 5 名开发人员的小型团队、初创公司和代理机构。
::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.
::

API

属性

属性默认值类型
过渡到

字符串 | RouteLocationAsRelativeGeneric | RouteLocationAsPathGeneric

target

null | "_blank" | "_parent" | "_self" | "_top" | string & {}

图标

字符串 | 对象

title

string

description

string

color

'主要'

"error" | "primary" | "secondary" | "success" | "info" | "warning" | "neutral"

ui

{ base?: ClassNameValue; icon?: ClassNameValue; title?: ClassNameValue; description?: ClassNameValue; externalIcon?: ClassNameValue; }

插槽

插槽类型
default

{}

title

{}

主题

app.config.ts
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'
        }
      }
    }
  }
})
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: {
        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'
            }
          }
        }
      }
    })
  ]
})
为便于阅读，compoundVariants 中的某些颜色已省略。请在 GitHub 上查看源代码。

更新日志

5cb65— 特性：导入 @nuxt/ui-pro 组件

e6e51— fix：class 应该优先于 ui 属性

39c86— fix：@nuxt/module-builder 升级后重构类型（#3855)

Callout

使用引人注目的彩色框和图标来突出重要信息。

CardGroup

在响应式网格布局中组织多个卡片，以获得更好的内容呈现。