SpCard 卡片

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

基础用法

为了在有滚动条时有更好的展示效果，你需要根据自己需求设置内容的上边距，组件的内容区域没有默认上边距。

卡片宽高默认为 100%，如果想限制大小你需要给其父元素限制大小。

<SpCard title="工单管理">
  放入你想要的内容
</SpCard>

简单卡片

卡片可以只有内容区域。

<SpCard>
  放入你想要的内容
</SpCard>

标题后追加内容

您可以在标题栏上追加图片或者按钮等内容

<SpCard title="工单管理">
  <template #headerAppend>
    <SpIcon name="tips" />
  </template>
  <template #default>放入你想要的内容</template>
</SpCard>

header 默认是左右对其的，这样更加方便在右侧添加图标或按钮，但是有些情况你可能想在标题后追加一些内容（一般在侧边栏中比较常用）可以在 headerAppend 插槽中使用 SpCardHeaderAppendFill 组件来清除这个副作用。

<SpCard title="工单管理" :title-underline="false">
  <template #headerAppend>
    <SpCardHeaderAppendFill class="justify-between pl-3">
      <el-tag>左边</el-tag>
      <SpIcon name="tips"></SpIcon>
    </SpCardHeaderAppendFill>
  </template>
  <template #default>放入你想要的内容</template>
</SpCard>

去除标题下划线

<SpCard title="去除标题下划线" :title-underline="false">
  放入你想要的内容
</SpCard>

清除 Body Padding

<SpCard title="去除标题下划线" :clear-body-padding="true">
  放入你想要的内容
</SpCard>

API

SpCard 属性

属性名	说明	类型	默认值
title	标题文字	string	-
titleUnderline	显示标题下划线	boolean	true
clearBodyPadding	是否清除 body padding	boolean	false
addButton	是否显示添加按钮	boolean	false

SpCard 插槽

插槽名	说明
default	默认插槽，面板内容
header	header 栏，您可以完全覆盖标题栏的内容
headerAppend	header 栏补充内容（添加在左侧），当使用默认 header 时可以使用此插槽添加自定义补充内容，如在标题后添加图标、按钮等

SpCardHeaderAppendFill 插槽

插槽名	说明
default	默认插槽，内容