145 lines
1.7 KiB
Markdown
145 lines
1.7 KiB
Markdown
::: 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:header>
|
|
标题
|
|
</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
|
|
|
|
<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 Card 属性
|
|
:::
|
|
|
|
::: table
|
|
|
|
| 属性 | 描述 | 可选值 |
|
|
| ----- | ---- | ------ |
|
|
| title | 标题 | -- |
|
|
|
|
:::
|
|
|
|
::: title Card 插槽
|
|
:::
|
|
|
|
::: table
|
|
|
|
| 插槽 | 描述 | 可选值 |
|
|
| ------ | -------- | ------ |
|
|
| default| 默认插槽 | -- |
|
|
| header | 头部插槽 | -- |
|
|
| body | 内容插槽 | -- |
|
|
|
|
:::
|
|
|
|
::: comment
|
|
:::
|
|
|
|
::: previousNext card
|
|
::: |