init

.svn/pristine/7c/7c19d7ee2c8d1e2f053527c42e4cfcece9027c0c.svn-base

@@ -0,0 +1,232 @@
+::: 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
+:::