ivyDesign

Appearance

Card 卡片 ​

常规用法 ​

包含头部和主题部分，默认不显示阴影

卡片头部

卡片
html
<ivy-card style="width: 300px;">
  <p slot="header" style="margin: 0;">卡片头部</p>
  <div>卡片</div>
</ivy-card>

阴影 ​

通过设置 shadow 来显示阴影,

shadow=always 总是显示阴影

卡片头部

卡片
卡片
卡片
卡片
卡片

shadow=hover hover 时显示阴影

卡片头部

卡片
卡片
卡片
卡片
卡片
html
<ivy-card style="width: 300px;" shadow="always">
  <p slot="header" style="margin: 0;">卡片头部</p>
  <div>卡片</div>
  <div>卡片</div>
  <div>卡片</div>
  <div>卡片</div>
  <div>卡片</div>
</ivy-card>
<ivy-card style="width: 300px;" shadow="hover">
  <p slot="header" style="margin: 0;">卡片头部</p>
  <div>卡片</div>
  <div>卡片</div>
  <div>卡片</div>
  <div>卡片</div>
  <div>卡片</div>
</ivy-card>

API ​

Props ​

属性描述类型可选值默认值
header标题string--
shadow卡片阴影-默认不显示stringalways/hover-