init

.svn/pristine/ae/ae05a2e5719920b5574e1711f0fe5061dcd6a3d4.svn-base

@@ -0,0 +1 @@
+x
+)JMU045d040031Q<31><51>KI<4B><49><EFBFBD>I-.f<><66><EFBFBD>7mUQ<55><51>Is|N<>+z<1B><>x=<3D><><EFBFBD>b<EFBFBD>=<3D>r{<7B>&7<>,9<>&<26><><EFBFBD>IXY<58>'5e<35><65><0C><><EFBFBD>&<26><><EFBFBD>fdž<66>{<7B><>jopɿ<70><C9BF>WT<57>Z<EFBFBD><5A><EFBFBD><EFBFBD><EFBFBD>4<><34><EFBFBD>G<EFBFBD>7]<5D><><EFBFBD>ݭ<EFBFBD><DDAD><<3C>ơ'=<3D>
<01><>D

.svn/pristine/ae/ae2a9194610d1c7cfa22fe4b72cfcd765fd3b5b0.svn-base

@@ -0,0 +1,100 @@
+::: anchor
+:::
+
+::: title 基本介绍
+:::
+
+::: describe 面板通常是指一个独立的容器
+:::
+
+::: title 基础使用
+:::
+
+::: demo 使用 `lay-panel` 标签, 创建面板。
+
+<template>
+  <lay-panel>面板</lay-panel>
+</template>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+  setup() {
+
+    return {
+    }
+  }
+}
+</script>
+
+:::
+
+::: title 边框阴影
+:::
+
+::: demo 通过 `shadow` 属性设置阴影出现的时机，可选值为 `always` `hover` `never`， 默认为 `always`。
+
+<template>
+<div class="panel-container">
+  <lay-panel>
+      内容
+  </lay-panel>
+  <lay-panel shadow="hover">
+      内容
+  </lay-panel>
+  <lay-panel shadow="never">
+      内容
+  </lay-panel>
+</div>
+</template>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+  setup() {
+
+    return {
+    }
+  }
+}
+</script>
+
+<style>
+.panel-container > * {
+  background: whitesmoke;
+  margin-top: 20px;
+}
+</style>
+
+:::
+
+
+::: title Panel 属性
+:::
+
+::: table
+
+| 插槽    | 描述     | 类型 | 默认值 | 可选值 |
+| ------- | -------- | ------ | ------ | ----- |
+| shadow | 阴影 | `string`     | `always` | `always`  `hover`  `never` |
+
+:::
+
+::: title Panel 插槽
+:::
+
+::: table
+
+| 插槽    | 描述     | 参数 |
+| ------- | -------- | ------ |
+| default | 默认插槽 | --     |
+
+:::
+
+::: contributor panel
+:::  
+
+::: previousNext panel
+:::

.svn/pristine/ae/aedafd62dd469a9ec8eea9c58a55f8883a2c5eac.svn-base

@@ -0,0 +1,66 @@
+.lay-skeleton {
+  .lay-skeleton-item {
+    height: 16px;
+    border-radius: 5px;
+    margin-bottom: 16px;
+    background: #eeeeee;
+  }
+  .lay-skeleton-type--p {
+    height: 16px;
+    border-radius: 5px;
+    margin-bottom: 16px;
+    background: #eeeeee;
+  }
+
+  .lay-skeleton-type--image {
+    width: 240px;
+    height: 240px;
+    background: #eeeeee;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    i {
+      font-size: 40px;
+    }
+  }
+}
+
+.lay-skeleton-animated {
+  .lay-skeleton-type--image {
+    width: 240px;
+    height: 240px !important;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    i {
+      font-size: 40px;
+    }
+  }
+  .lay-skeleton-item {
+    height: 16px;
+    border-radius: 5px;
+    margin-bottom: 16px;
+    background: #eeeeee;
+    background: linear-gradient(90deg, #f2f2f2 25%, #ececec 37%, #f2f2f2 63%);
+    background-size: 400% 100%;
+    animation: lay-skeleton-loading 1.2s ease infinite;
+  }
+}
+
+.lay-skeleton-first {
+  width: 30%;
+}
+
+.lay-skeleton-last {
+  width: 62.8%;
+}
+
+@keyframes lay-skeleton-loading {
+  0% {
+    background-position: 100% 50%;
+  }
+
+  100% {
+    background-position: 0 50%;
+  }
+}