Card

GitHub
Zeigen Sie Inhalte in einer Karte mit Kopf, Körper und Fußzeile an.

Bearbeiten

Verwenden Sie die Steckplätze header, default und footer, um Inhalte zur Karte hinzuzufügen.

<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"} (englisch)

Verwenden Sie die title prop, um den Titel des Kartenkopfes festzulegen.

Card with title
<template>
  <UCard title="Card with title" class="w-full">
    <Placeholder class="h-32" />
  </UCard>
</template>

Beschreibung: badge{label="4.7+" class="align-text-top"}

Verwenden Sie die description-prop, um die Beschreibung des Kartenkopfes festzulegen.

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 Bearbeiten

Verwenden Sie die variant prop, um die Variante der Karte zu ändern.

<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 (englisch)

Props (englisch)

Prop Default Type
as
'div'
any

The 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 (englisch)

Slot Type
header
{}
title
{}
description
{}
default
{}
footer
{}

Theme Bearbeiten

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

Changelog Bearbeiten

No recent changes

Calendar

A calendar component for selecting single dates, multiple dates or date ranges.

Chip

An indicator of a numeric value or a state.