233 lines
3.0 KiB
Plaintext
233 lines
3.0 KiB
Plaintext
::: anchor
|
||
:::
|
||
|
||
::: title 基本介绍
|
||
:::
|
||
|
||
::: describe 最基础的卡片容器，可承载文字、列表、图片、段落，常用于后台概览页面。
|
||
:::
|
||
|
||
::: title 基础使用
|
||
:::
|
||
|
||
::: demo 使用 `lay-card` 标签, 创建卡片组件
|
||
|
||
<template>
|
||
<div class="card-container">
|
||
<lay-card title="标题">
|
||
内容
|
||
</lay-card>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { ref } from 'vue'
|
||
|
||
export default {
|
||
setup() {
|
||
|
||
return {
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
.card-container {
|
||
background: whitesmoke;
|
||
padding: 20px;
|
||
}
|
||
</style>
|
||
|
||
:::
|
||
|
||
::: title 卡片插槽
|
||
:::
|
||
|
||
::: demo
|
||
|
||
<template>
|
||
<div class="card-container">
|
||
<lay-card>
|
||
<template v-slot:title>
|
||
标题
|
||
</template>
|
||
<template v-slot:body>
|
||
内容
|
||
</template>
|
||
<template v-slot:footer>
|
||
底部
|
||
</template>
|
||
</lay-card>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { ref } from 'vue'
|
||
|
||
export default {
|
||
setup() {
|
||
|
||
return {
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
.card-container {
|
||
background: whitesmoke;
|
||
padding: 20px;
|
||
}
|
||
</style>
|
||
|
||
:::
|
||
|
||
::: title 简单使用
|
||
:::
|
||
|
||
::: demo
|
||
|
||
<template>
|
||
<div class="card-container">
|
||
<lay-card>
|
||
内容
|
||
</lay-card>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { ref } from 'vue'
|
||
|
||
export default {
|
||
setup() {
|
||
|
||
return {
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
.card-container {
|
||
background: whitesmoke;
|
||
padding: 20px;
|
||
}
|
||
</style>
|
||
|
||
:::
|
||
|
||
::: title 使用插槽
|
||
:::
|
||
|
||
::: demo
|
||
|
||
<template>
|
||
<div class="card-container">
|
||
<lay-card>
|
||
<template v-slot:title>
|
||
标题
|
||
</template>
|
||
<template v-slot:extra>
|
||
更多
|
||
</template>
|
||
<template v-slot:body>
|
||
内容
|
||
</template>
|
||
</lay-card>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { ref } from 'vue'
|
||
|
||
export default {
|
||
setup() {
|
||
|
||
return {
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
.card-container {
|
||
background: whitesmoke;
|
||
padding: 20px;
|
||
}
|
||
</style>
|
||
|
||
:::
|
||
|
||
::: 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 属性
|
||
:::
|
||
|
||
::: table
|
||
|
||
| 属性 | 描述 | 类型 | 可选值 | 可选值 |
|
||
| ----- | ---- | ------ | ----- | ----- |
|
||
| title | 标题 | `string` | -- | -- |
|
||
| shadow | 阴影 | `string` | `always` | `always` `hover` `never` |
|
||
|
||
:::
|
||
|
||
::: title Card 插槽
|
||
:::
|
||
|
||
::: table
|
||
|
||
| 插槽 | 描述 | 可选值 | 版本 |
|
||
| ------- | -------- | ------ |------ |
|
||
| default | 默认插槽 | -- |-- |
|
||
| header | 头部插槽 | -- |-- |
|
||
| body | 内容插槽 | -- |-- |
|
||
| extra | 扩展插槽 | -- |-- |
|
||
| footer | 扩展插槽 | -- |`1.4.3`|
|
||
:::
|
||
|
||
::: contributor card
|
||
:::
|
||
|
||
::: previousNext card
|
||
:::
|