Card 卡片

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

基础用法

卡片包含标题, 内容以及操作区域

Card 组件由 header body footer 及 prepend append 组成, body 为默认插槽, 其余内容取决于一个具名 slot

TIP

prepend 插槽本意为 px-icon, 如需更多内容, 请自行设置样式穿透

<template>
  <px-card>
    <template #prepend>
      <px-icon icon="face-thinking-solid" size="30"></px-icon>
    </template>
    <template #header>HEADER</template>
    xxxx
    <template #footer>FOOTER</template>
    <template #append>
      <px-button>APPEND</px-button>
    </template>
  </px-card>
</template>

简单卡片

卡片可以只包含内容区域

WARNING

这里文档待补充, px-list 组件待开发

<template>
  <px-card>
    <p v-for="i in 4" :key="i">{{ 'List item' + i }}</p>
  </px-card>
</template>

卡片圆角

通过 round circle 属性设置卡片的圆角

<template>
  <px-card round class="mb-15">Round</px-card>
  <px-card circle>Circle</px-card>
</template>

Hover 卡片

通过 hoverable 属性设置卡片的 Hover 效果

<template>
  <px-card hoverable>Hover</px-card>
</template>

更多配置

DANGER

由于组件采用 CSS Houdini Paint Worklets 绘制像素边框, 普通 CSS 无法设置边框颜色, 背景颜色等, 需要通过 CSS Custom Properties 设置, 具体参考 xxx 文档待补充

<template>
  <px-card id="px-card-bg" class="mb-15">背景色及阴影配置</px-card>
  <px-card id="px-card-border" class="mb-15">边框配置</px-card>
  <px-card id="px-card-radius" class="mb-15">radius配置</px-card>
</template>
<style>
#px-card-bg {
  --px-bg-color: #92cc41;
  --px-bg-shadow-color: #4aa52e;
}
#px-card-border {
  --px-border-color: #b8272c;
  --px-border: 5;
}
#px-card-radius {
  --px-border-radius: 5;
  --px-border-radius-lt: 5;
  --px-border-radius-rt: 5;
  --px-border-radius-lb: 5;
  --px-border-radius-rb: 5;
}
</style>

Card API

Props

Name	Description	Type	Default
hoverable	是否启用Hover效果	boolean	false
round	是否启用圆角效果	boolean	false
circle	是否启用圆形效果	boolean	false

Slots

Name	Description
default	默认插槽, 卡片内容
header	卡片标题内容
footer	卡片底部内容
prepend	卡片前置内容
append	卡片后置内容