介绍

本文档主要用于描述 ShadcnCard 组件的一些特性和用法。

用法

查看代码

<template>
    <ShadcnCard title="Title">
        <div class="flex items-center justify-center h-32">Content</div>
    </ShadcnCard>
</template>

<script setup lang="ts">
</script>

描述 (description)

查看代码

<template>
    <ShadcnCard title="Title" description="Description">
        <div class="flex items-center justify-center h-32">Content</div>
    </ShadcnCard>
</template>

<script setup lang="ts">
</script>

阴影 (shadow)

查看代码

<template>
    <div class="space-y-4">
        <ShadcnCard title="Shadow Never" shadow="never"/>
        <ShadcnCard title="Shadow Always" shadow="always"/>
        <ShadcnCard title="Shadow Hover" shadow="hover"/>
    </div>
</template>

<script setup lang="ts">
</script>

加载 (loading)

查看代码

<template>
  <ShadcnCard title="Loading" :loading="true">
    <div class="flex items-center justify-center h-32">Content</div>
  </ShadcnCard>
  <ShadcnCard title="Only Content Loading" :loading="true" only-content-loading>
    <div class="flex items-center justify-center h-32">Content</div>
  </ShadcnCard>
</template>

<script setup lang="ts">
</script>

边框 (border)

查看代码

<template>
    <ShadcnCard title="Border" border>
        <div class="flex items-center justify-center h-32">Content</div>
    </ShadcnCard>
    <ShadcnCard title="No Border" :border="false">
        <div class="flex items-center justify-center h-32">Content</div>
    </ShadcnCard>
</template>

<script setup lang="ts">
</script>

卡片 (Card) 属性

卡片 (Card) 插槽