@ivy-design/vue

Appearance

Card 卡片 ​

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

基础用法 ​

包含标题，内容和操作

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

html
<ivy-card>
    <template #header>
        <div
            style="display: flex;justify-content: space-between;align-items: center;"
        >
            <span>卡片名称</span>
            <ivy-button>操作按钮</ivy-button>
        </div>
    </template>
    <div>
        <p>列表内容 1</p>
        <p>列表内容 2</p>
        <p>列表内容 3</p>
    </div>
</ivy-card>
<ivy-card>
    <template #header>
        <div
            style="display: flex;justify-content: space-between;align-items: center;"
        >
            <span>卡片名称</span>
            <ivy-button>操作按钮</ivy-button>
        </div>
    </template>
    <div>
        <p>列表内容 1</p>
        <p>列表内容 2</p>
        <p>列表内容 3</p>
    </div>
</ivy-card>

简单卡片 ​

卡片可以只有内容区域

卡片阴影 ​

可对阴影的显示进行配置。

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

API ​

Props ​

属性描述类型可选值默认值
header设置 headerString——
body-style设置 body 的样式Object—{padding: '16px 20px'}
shadow设置阴影显示时机Stringalways/hover/neveralways