JView UICard 组件，作为文本、图片、数据图表等内容的容器，可用于一些栏目页面。
基本展示
包含标题和具体内容。
心灵鸡汤
在人生的道路上，我们常常会遇到各种困难和挑战。有时候，我们可能会感到力不从心，想要放弃。但是，请相信，坚持就是力量！只要我们坚持不懈地追求自己的梦想，就一定能够克服困难，迎接成功的到来
展开查看代码
vue
<template>
<j-card title="心灵鸡汤">
在人生的道路上，我们常常会遇到各种困难和挑战。有时候，我们可能会感到力不从心，想要放弃。但是，请相信，坚持就是力量！只要我们坚持不懈地追求自己的梦想，就一定能够克服困难，迎接成功的到来
</j-card>
</template><template>
<j-card title="心灵鸡汤">
在人生的道路上，我们常常会遇到各种困难和挑战。有时候，我们可能会感到力不从心，想要放弃。但是，请相信，坚持就是力量！只要我们坚持不懈地追求自己的梦想，就一定能够克服困难，迎接成功的到来
</j-card>
</template>loading 状态
通过loading属性可以切换加载状态。
通过headActions插槽可以定制卡片头部的操作项。
标题
展开查看代码
vue
<template>
<j-card title="标题" :loading="loading" hoverable>
本来无一物，何处染尘埃
<template #headActions>
<j-switch v-model:checked="loading"></j-switch>
</template>
</j-card>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const loading = ref(true)
</script><template>
<j-card title="标题" :loading="loading" hoverable>
本来无一物，何处染尘埃
<template #headActions>
<j-switch v-model:checked="loading"></j-switch>
</template>
</j-card>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const loading = ref(true)
</script>无边框模式
在灰色背景容器下，可以使用无边框模式，设置:bordered="false"即可。
鸡汤
青春，是人生中最美好的时光。在这段时光里，我们拥有无限的活力和创造力，我们可以去追求自己的梦想，去挑战自我，去创造属于自己的未来。
展开查看代码
vue
<template>
<div style="background-color: lightgray; padding: 30px; display: inline-block">
<j-card title="鸡汤" :bordered="false">
青春，是人生中最美好的时光。在这段时光里，我们拥有无限的活力和创造力，我们可以去追求自己的梦想，去挑战自我，去创造属于自己的未来。
</j-card>
</div>
</template><template>
<div style="background-color: lightgray; padding: 30px; display: inline-block">
<j-card title="鸡汤" :bordered="false">
青春，是人生中最美好的时光。在这段时光里，我们拥有无限的活力和创造力，我们可以去追求自己的梦想，去挑战自我，去创造属于自己的未来。
</j-card>
</div>
</template>属性
| 参数 | 说明 | 类型 | 默认值 | 必填 |
|---|---|---|---|---|
| title | 卡片标题 | string | VNode | 无 | 否 |
| bordered | 是否有边框 | boolean | true | 否 |
| loading | 加载状态，卡片内容会被骨架屏组件替代 | boolean | 无 | 否 |
| hoverable | 是否有鼠标悬浮效果 | boolean | 无 | 否 |
| headActions | 卡片头部的操作项（位于右侧） | VNode | 无 | 否 |