Card 卡片

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

基础用法

卡片包含标题，内容以及操作区域。

Card 组件由 header, footer 和 body 组成。 header, footer 是可选的，其内容取决于一个具名的 slot。

Card Title

Card Content 1
Card Content 2

html

<os-card>
  <template #header>
    <div style="display:flex;flex: 1;justify-content: space-between;">
      Card Title
      <os-button link>Other Actions</os-button>
    </div>

  </template>
  Card Content 1 <br />
  Card Content 2
</os-card>

带有阴影效果的卡片

通过 shadow 属性设置卡片阴影出现的时机。该属性的值可以是：always、hover 或 none，默认为none。

Always Card Content

Hover Card Content

html

<os-card
shadow="always">
</os-card>

定义阴影样式

通过css --os-card-shadow能进行样式定义。

html

<os-card
style="--os-card-shadow: 0 0 10px rgba(166, 208, 255, .5)"
shadow="always">
</os-card>

Card 卡片 ​

基础用法 ​

带有阴影效果的卡片 ​

定义阴影样式 ​

Card 卡片

基础用法

带有阴影效果的卡片

定义阴影样式