Card

GitHub
在卡片中显示内容，包含头部、主体和底部。

用法

使用 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>

标题 4.7+

使用 title 属性来设置卡片页眉的标题。

带标题的卡片
<template>
  <UCard title="Card with title" class="w-full">
    <Placeholder class="h-32" />
  </UCard>
</template>

描述 4.7+

使用 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 属性来更改卡片的变体样式。

<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

属性

属性默认值类型
as'div'any

此组件应渲染为的元素或组件。

titlestring
descriptionstring
variant'outline'"solid" | "outline" | "soft" | "subtle"
ui{ root?: ClassNameValue; header?: ClassNameValue; title?: ClassNameValue; description?: ClassNameValue; body?: ClassNameValue; footer?: ClassNameValue; }

插槽

插槽类型
页头{}
title{}
description{}
default{}
页脚{}

主题

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'
          }
        }
      }
    })
  ]
})

更新日志

暂无近期更新

日历

用于选择单个日期、多个日期或日期范围的日历组件。

标签

用于指示数值或状态的组件。