Appearance

iuiDesign
100%
02:32
本页目录

将信息分类后分标题、详情等区域聚合展现，一般作为简洁介绍或者信息的大盘和入口。

基本使用 ​

常规的内容容器，可承载文字、列表、图片、段落，常用于模块划分和内容概览。

html
<iui-card title="Title" extra="More">
  <view>This is content</view>
  <view>This is content</view>
  <view>This is content</view>
</iui-card>
<iui-card title="Title" extra="More">
  <view>This is content</view>
  <view>This is content</view>
  <view>This is content</view>
</iui-card>

阴影 ​

指定 shadow 属性可以显示阴影。

html
<iui-card title="Title" extra="More" :shadow="true">
  <view>This is content</view>
  <view>This is content</view>
  <view>This is content</view>
</iui-card>
<iui-card title="Title" extra="More" :shadow="true">
  <view>This is content</view>
  <view>This is content</view>
  <view>This is content</view>
</iui-card>

无边框 ​

将 border 属性设置为 false 可以隐藏边框。

html
<iui-card title="Title" extra="More" :border="false">
  <view>This is content</view>
  <view>This is content</view>
  <view>This is content</view>
</iui-card>
<iui-card title="Title" extra="More" :border="false">
  <view>This is content</view>
  <view>This is content</view>
  <view>This is content</view>
</iui-card>

仅显示内容 ​

如果只需要内容区域，可以省略 title 属性 。

html
<iui-card>
  <view>This is content</view>
  <view>This is content</view>
</iui-card>
<iui-card>
  <view>This is content</view>
  <view>This is content</view>
</iui-card>

更灵活的内容 ​

通过 cover 插槽可以设置封面图，footer 插槽可以设置底部内容。

html
<iui-card title="Title" extra="More" :headerStyle="{ border: 'none' }">
  <template #cover>
    <view style="overflow: hidden">
      <image
        mode="aspectFill"
        :src="url"
        style="width: 100%; height: 200px"
      ></image>
    </view>
  </template>

  <view>This is content</view>
  <view>This is content</view>
  <view>This is content</view>

  <template #footer>
    <view>This is footer</view>
  </template>
</iui-card>
<iui-card title="Title" extra="More" :headerStyle="{ border: 'none' }">
  <template #cover>
    <view style="overflow: hidden">
      <image
        mode="aspectFill"
        :src="url"
        style="width: 100%; height: 200px"
      ></image>
    </view>
  </template>

  <view>This is content</view>
  <view>This is content</view>
  <view>This is content</view>

  <template #footer>
    <view>This is footer</view>
  </template>
</iui-card>

API ​

<Card>props
参数描述类型默认值
title标题String-
extra额外操作String-
border是否显示边框Booleantrue
shadow卡片阴影Booleanfalse
headerStyle头部自定义样式Object-
bodyStyle内容自定义样式Object-
footerStyle底部自定义样式Object-
<Card>slots
插槽名描述参数
default卡片内容-
title卡片标题-
extra卡片额外操作-
header卡片头部-
footer卡片底部-
cover卡片封面-