feat: 新增 card 组件 shadow 属性

This commit is contained in:
就眠儀式
2022-03-29 05:29:05 +08:00
parent ed9ebccf79
commit 65031d2507
5 changed files with 86 additions and 26 deletions

View File

@@ -114,6 +114,9 @@ export default {
:::
::: title 使用插槽
:::
::: demo
<template>
@@ -153,6 +156,46 @@ export default {
:::
::: title 边框阴影
:::
::: demo 通过 shadow 属性设置卡片阴影出现的时机。 该属性的值可以是always、hover或never。
<template>
<div class="card-container">
<lay-card>
内容
</lay-card>
<lay-card shadow="hover">
内容
</lay-card>
<lay-card shadow="never">
内容
</lay-card>
</div>
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
return {
}
}
}
</script>
<style>
.card-container {
background: whitesmoke;
padding: 20px;
}
</style>
:::
::: title Card 属性
:::
@@ -169,11 +212,11 @@ export default {
::: table
| 插槽 | 描述 | 可选值 |
| ------ | -------- | ------ |
| default| 默认插槽 | -- |
| header | 头部插槽 | -- |
| body | 内容插槽 | -- |
| 插槽 | 描述 | 可选值 |
| ------- | -------- | ------ |
| default | 默认插槽 | -- |
| header | 头部插槽 | -- |
| body | 内容插槽 | -- |
:::
@@ -181,4 +224,4 @@ export default {
:::
::: previousNext card
:::
:::