Login to your account

Enter your email below to login to your account

Email

Password Forgot your password?

Installation

pnpm dlx kliping@latest add card

Usage

<script setup lang="ts">
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from '@/components/ui/card'
</script>

<template>
  <Card>
    <CardHeader>
      <CardTitle>Card Title</CardTitle>
      <CardDescription>Card Description</CardDescription>
    </CardHeader>
    <CardContent>
      <p>Card Content</p>
    </CardContent>
    <CardFooter>
      <p>Card Footer</p>
    </CardFooter>
  </Card>
</template>

Requirements

Semua dipasang otomatis oleh kliping add; tabel ini untuk Anda yang memasang manual atau memeriksa project.

Requirement	Value
Project	Vue 3.5+, Tailwind CSS v4, alias @ — disiapkan kliping init
Files	components/ui/card/card.vue components/ui/card/card-action.vue components/ui/card/card-content.vue components/ui/card/card-description.vue components/ui/card/card-footer.vue components/ui/card/card-header.vue components/ui/card/card-title.vue components/ui/card/index.ts

Anatomy

Susunan bagiannya seperti dipakai di contoh-contoh di atas. Impor semua bagian dari satu tempat, lalu susun begini:

<Card>
  <CardHeader>
    <CardTitle />
    <CardDescription />
    <CardAction />
  </CardHeader>
  <CardContent />
  <CardFooter />
</Card>
<CardFooter />

API Reference

Card

Slot	Props
#default	—

Data attribute	Value
[data-slot]	"card"

CardAction

Slot	Props
#default	—

Data attribute	Value
[data-slot]	"card-action"

CardContent

Slot	Props
#default	—

Data attribute	Value
[data-slot]	"card-content"

CardDescription

Slot	Props
#default	—

Data attribute	Value
[data-slot]	"card-description"

CardFooter

Slot	Props
#default	—

Data attribute	Value
[data-slot]	"card-footer"

CardHeader

Slot	Props
#default	—

Data attribute	Value
[data-slot]	"card-header"

CardTitle

Slot	Props
#default	—

Data attribute	Value
[data-slot]	"card-title"

CSS Variables

Token tema yang dibaca komponen ini — ubah nilainya di CSS global (:root dan .dark, lihat Theming) untuk mengubah tampilannya tanpa menyentuh komponennya: --border, --card, --card-foreground, --muted-foreground, --radius.

Credits

Berasal dari shadcn-vue (MIT, Copyright (c) 2023 unovue). Rantai lengkapnya di Credits.