Card 卡片

使用指南

引入方式

import { Card } from 'feart';

components: {
  'fe-card': Card,
}

代码示例

普通卡片

<fe-card title="卡片标题" subTitle="副标题" @click="onClick"> </fe-card>

卡片小标题置于顶部

<fe-card
  thumb="https://nuofe.nntest.cn/feart/images/demoimgs/card-demo.jpg"
  title="标题只显示一行,多余会省略了,被省略了"
  subTitle="小标题只显示一行,多余会省略了,被省略了,被省略了"
  :subTitleTopping="true"
  @click="onClick"
>
</fe-card>

左侧图片及右侧图标垂直居中

<fe-card
  thumb="https://nuofe.nntest.cn/feart/images/demoimgs/card-demo.jpg"
  title="标题只显示一行,多余会省略了,被省略了"
  desc="这里包含了描述信息,可以显示多行多行多行多行多行多行多行多行多行多行"
  :thumbAlign="'middle'"
  @click="onClick"
>
</fe-card>

卡片包含描述信息及下方额外内容

<fe-card
  thumb="https://nuofe.nntest.cn/feart/images/demoimgs/card-demo.jpg"
  title="卡片标题"
  desc="这里包含了描述信息,可以显示多行多行多行多行多行多行多行多行多行多行"
  rightIconColor="#ff0000"
  additionalDesc="我是卡片下方的描述信息"
  additionalIcon="failure"
  additionalIconColor="#ff0000"
  :rightAlign="'top'"
  @click="onClick"
>
</fe-card>

卡片自定义

<fe-card rightIcon="" @click="onClick">
  <div slot="thumb">
    <img src="https://nuofe.nntest.cn/feart/images/demoimgs/card-demo.jpg" />
  </div>
  <div slot="title" style="white-space:pre-wrap;">通过slot,可以自定义样式,让你的标题显示多行</div>
  <template slot="sub-title">副标题副标题</template>
  <div slot="additional">
    这里是自定义的：
    <ul>
      <li>说明1...</li>
      <li>说明2...</li>
    </ul>
  </div>
</fe-card>

Props

Events

Slots