Card 卡片

典型卡片

包含标题、内容和额外操作。

<at-card style="width: 300px;">
  <h4 slot="title">Card Title</h4>
  <div slot="extra"><a>Extra</a></div>
  <div>
    Card Content
  </div>
</at-card>

无边框

通过设置属性 bordered: false，不添加边框。

<at-card style="width: 300px;" :bordered="false">
  <h4 slot="title">Card Title</h4>
  <div slot="extra"><a>Extra</a></div>
  <div>
    Card Content
  </div>
</at-card>

无阴影

通过设置属性 no-hover: true 来禁用鼠标悬停时显示的阴影效果。

<at-card style="width: 300px;" :no-hover="true">
  <h4 slot="title">Card Title</h4>
  <div slot="extra"><a>Extra</a></div>
  <div>
    Card Content
  </div>
</at-card>

只显示卡片内容区域

只显示卡片内容，而不显示标题和额外操作。

<at-card style="width: 300px;" :body-style="{ padding: 0 }">
  <div>
    <img style="width: 100%" src="https://misc.aotu.io/koppthe/at-ui/cover.jpg">
    <div style="padding: 14px;">
      <p>AT-UI</p>
    </div>
  </div>
</at-card>

预加载的卡片（默认）

数据加载前的文本块 Loading。

<at-card :loading="loading" :style="{ width: '300px' }">
  <h4 slot="title">Card Title</h4>
  <div slot="extra"><a>Extra</a></div>
  <div>
    Card Content
  </div>
</at-card>

预加载的卡片（自定义）

自定义数据加载前的文本块 Loading。

<at-card :loading="loading" style="width: 300px">
  <h4 slot="title">Card Title</h4>
  <div slot="extra"><a>Extra</a></div>
  <div slot="loading">加载中...</div>
  <div>
    Card Content
  </div>
</at-card>

Card 参数

Card slot