Card 卡片

将信息聚合在卡片容器中展示。

基础用法

使用slot传入卡片的内容，包括header,content,footer三个部分。content使用默认插槽传递，header使用header插槽，footer使用footer插槽。

卡片内容


<template>
    <ym-card>
        <template #header>
           <strong>这是卡片的header</strong>
        </template>
        <template #footer>
           <strong>这是卡片的footer</strong>
        </template>
        <p v-for="item in 4" :key="item">卡片内容</p>
    </ym-card>
</template>

使用props传递内容

使用header,footer,content三个props来传递内容。(可以与上面的slot方式混合使用，组件优先渲染props内容)

卡片内容


<template>
    <ym-card header="卡片header" footer="卡片footer" content="卡片内容"> </ym-card>
</template>

卡片阴影

使用shadow属性可以给卡片添加阴影。可以控制阴影的出发时机。

这是一个卡片组件容器


<template>
    <div class="container">
        <ym-card shadow="always">
            <template #header>
                <strong>shadow: always</strong>
            </template>
            这是一个卡片组件容器
        </ym-card>
        <ym-card shadow="hover">
            <template #header>
                <strong>shadow: hover</strong>
            </template>
            这是一个卡片组件容器
        </ym-card>
        <ym-card shadow="never">
            <template #header>
                <strong>shadow: never</strong>
            </template>
            这是一个卡片组件容器
        </ym-card>
    </div>
</template>
<style scoped>
.container {
    display: flex;
    justify-content: space-around;
    align-items: center;
    gap: 10px;
}
</style>

Card API

Props

Name	Description	Type	Default
header	卡片头部内容，可以使用slot传入	`string`	-
content	卡片主体内容，可以使用slot传入	`string`	-
footer	卡片底部内容，可以使用slot传入	`string`	-
shadow	阴影触发方式	`always`	`hover`
contentClass	主题内容类名	`string`	-
contentStyle	主体内容样式	`CSSProperties`	-

Slots

Name	Description
default	默认插槽
header	头部插槽
footer	底部插槽

Card 卡片 ​

基础用法 ​

使用props传递内容 ​

卡片阴影 ​

Card API ​

Props ​

Slots ​