更新文档

This commit is contained in:
就眠仪式 2021-10-01 18:20:41 +08:00
parent f574c2aac0
commit 899604b2d0
18 changed files with 159 additions and 46 deletions

View File

@ -31,4 +31,9 @@ export default {
}
</script>
:::
:::
| | | |
|--|--|--|
| type | 类型 | `dot` `rim` |
| theme| 主题 | `orange` `green` `cyan` `blue` `black` `gray`|

View File

@ -47,4 +47,9 @@ export default {
}
</script>
:::
:::
| | | |
|--|--|--|
| header | 插槽 | `内容` |
| body | 插槽 | `内容` |

View File

@ -0,0 +1,23 @@
::: demo
<template>
<lay-collapse>
<lay-collapse-item title="标题"> 内容 </lay-collapse-item>
<lay-collapse-item title="标题"> 内容 </lay-collapse-item>
<lay-collapse-item title="标题"> 内容 </lay-collapse-item>
</lay-collapse>
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
return {
}
}
}
</script>
:::

View File

@ -3,25 +3,25 @@
<template>
<ul class="layui-row layui-col-space15">
<li class="layui-col-sm3">
<div style="background-color: #009688;padding:10px;color:whitesmoke;padding-left:30px">
<div style="background-color: #009688;padding:10px;color:whitesmoke;padding:30px">
<p>#009688</p><p>
</p><p tips="">主色调之一</p>
</div>
</li>
<li class="layui-col-sm3">
<div style="background-color: #5FB878;padding:10px;color:whitesmoke;padding-left:30px">
<div style="background-color: #5FB878;padding:10px;color:whitesmoke;padding:30px">
<p>#5FB878</p><p>
</p><p tips="">一般用于选中状态</p>
</div>
</li>
<li class="layui-col-sm3">
<div style="background-color: #393D49;padding:10px;color:whitesmoke;padding-left:30px">
<div style="background-color: #393D49;padding:10px;color:whitesmoke;padding:30px">
<p>#393D49</p><p>
</p><p tips="">通常用于导航</p>
</div>
</li>
<li class="layui-col-sm3">
<div style="background-color: #1E9FFF;padding:10px;color:whitesmoke;padding-left:30px">
<div style="background-color: #1E9FFF;padding:10px;color:whitesmoke;padding:30px">
<p>#1E9FFF</p><p>
</p><p tips="">经典蓝</p>
</div>
@ -47,25 +47,25 @@ export default {
<template>
<ul class="layui-row layui-col-space15">
<li class="layui-col-sm3">
<div style="background-color: #FFB800;padding:10px;color:whitesmoke;padding-left:30px">
<div style="background-color: #FFB800;padding:10px;color:whitesmoke;padding:30px">
<p>#FFB800</p><p>
</p><p tips="">暖色系</p>
</div>
</li>
<li class="layui-col-sm3">
<div style="background-color: #FF5722;padding:10px;color:whitesmoke;padding-left:30px">
<div style="background-color: #FF5722;padding:10px;color:whitesmoke;padding:30px">
<p>#FF5722</p><p>
</p><p tips="">比较引人注意的颜色</p>
</div>
</li>
<li class="layui-col-sm3">
<div style="background-color: #01AAED;padding:10px;color:whitesmoke;padding-left:30px">
<div style="background-color: #01AAED;padding:10px;color:whitesmoke;padding:30px">
<p>#01AAED</p><p>
</p><p tips="">文本链接着色</p>
</div>
</li>
<li class="layui-col-sm3">
<div style="background-color: #2F4056;padding:10px;color:whitesmoke;padding-left:30px">
<div style="background-color: #2F4056;padding:10px;color:whitesmoke;padding:30px">
<p>#2F4056</p><p>
</p><p tips="">侧边色</p>
</div>

View File

@ -57,4 +57,8 @@ export default {
}
</style>
:::
:::
| | | |
|--|--|--|
| fluid | 流模式 | `true` `false` |

View File

@ -93,4 +93,15 @@ export default {
}
</script>
:::
:::
| | | | |
|--|--|--|--|
| xs | 尺寸 | 超小屏幕 (手机<768px) | 12 |
| sm | 尺寸 | 小屏幕 (平板≥768px) | 12 |
| md | 尺寸 | 中等屏幕 (桌面≥992px) | 12 |
| lg | 尺寸 | 大型屏幕 (桌面≥1200px) | 12 |
| xsOffset | 偏移 | 超小屏幕 (手机<768px) | 12 |
| smOffset | 偏移 | 小屏幕 (平板≥768px) | 12 |
| mdOffset | 偏移 | 中等屏幕 (桌面≥992px) | 12 |
| lgOffset | 偏移 | 大型屏幕 (桌面≥1200px) | 12 |

View File

@ -20,4 +20,4 @@ export default {
| | | |
|--|--|--|
| type | 图标 | `layui-icon-home` `layui-icon-template`... |
| type | 图标 | `layui-icon-home` |

View File

@ -30,3 +30,7 @@ export default {
</script>
:::
| | | |
|--|--|--|
| theme| 主题 | `orange` `green` `cyan` `blue` `black` `gray`|

View File

@ -26,3 +26,32 @@ export default {
</script>
:::
::: demo
<template>
<lay-menu tree>
<lay-menu-item title="首页"></lay-menu-item>
<lay-menu-item title="用户"></lay-menu-item>
<lay-menu-item title="角色"></lay-menu-item>
<lay-menu-item title="目录">
<lay-menu-child-item title="菜单一"></lay-menu-child-item>
<lay-menu-child-item title="菜单二"></lay-menu-child-item>
<lay-menu-child-item title="菜单三"></lay-menu-child-item>
</lay-menu-item>
</lay-menu>
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
return {
}
}
}
</script>
:::

View File

@ -16,28 +16,4 @@ export default {
}
</script>
:::
::: demo
<template>
<lay-collapse>
<lay-collapse-item title="标题"> 内容 </lay-collapse-item>
<lay-collapse-item title="标题"> 内容 </lay-collapse-item>
<lay-collapse-item title="标题"> 内容 </lay-collapse-item>
</lay-collapse>
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
return {
}
}
}
</script>
:::

View File

@ -1,7 +1,7 @@
::: demo
<template>
<lay-progress percent="80"></lay-progress>
<lay-progress percent="70"></lay-progress>
<br>
<lay-progress percent="60"></lay-progress>
</template>
@ -44,3 +44,36 @@ export default {
</script>
:::
::: demo
<template>
<lay-progress percent="80" showText></lay-progress>
<br/>
<br/>
<lay-progress percent="80" showText text="销售量"></lay-progress>
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
return {
}
}
}
</script>
:::
| | | |
|--|--|--|
| percent | 进度 | -- |
| theme| 主题 | `orange` `green` `cyan` `blue` `black` `gray`|
| size | 尺寸 | `big` |
| text | 提示 | -- |
| color| 颜色 | -- |
| showText | 展示描述 | -- |

View File

View File

@ -79,6 +79,8 @@ export default {
{ id: 18, title: '进度',subTitle:"progress" ,path: '/zh-CN/components/progress' },
{ id: 19, title: '时间线',subTitle:"timeline" ,path: '/zh-CN/components/timeline' },
{ id: 20, title: '颜色',subTitle:"color" ,path: '/zh-CN/components/color' },
{ id: 21, title: '手风琴',subTitle:"collapse" ,path: '/zh-CN/components/collapse' },
{ id: 22, title: '表格',subTitle:"table" ,path: '/zh-CN/components/table' },
]
const selected = ref(1)

View File

@ -106,6 +106,16 @@ const zhCN = [
path: '/zh-CN/components/timeline',
component: () => import('../../docs/zh-CN/components/timeline.md'),
meta: { title: '时间线' },
},
{
path: '/zh-CN/components/collapse',
component: () => import('../../docs/zh-CN/components/collapse.md'),
meta: { title: '手风琴' },
},
{
path: '/zh-CN/components/table',
component: () => import('../../docs/zh-CN/components/table.md'),
meta: { title: '表格' },
}
],
},

View File

@ -88,18 +88,12 @@ h1 {
line-height: 38px;
}
p,
ol,
ul {
margin: 1rem 0;
line-height: 1.7;
}
p {
margin-top: 20px !important;
font-size: 14px !important;
}
a,
area,
button,

View File

@ -5,5 +5,13 @@
</template>
<script setup name="LayCollapse" lang="ts">
import { provide } from "vue";
const props =
defineProps<{
openKeys?:Array<string>
}>()
provide('openKeys',props.openKeys);
</script>

View File

@ -12,10 +12,14 @@
</template>
<script setup name="LayCollapseItem" lang="ts">
import { defineProps } from 'vue'
import { defineProps, inject } from 'vue'
const props =
defineProps<{
key?: string
title?: string
}>()
const openKeys = inject('openKeys');
</script>

View File

@ -1,9 +1,14 @@
<template>
<ul class="layui-nav layui-nav-tree">
<ul class="layui-nav" :class="[tree ? 'layui-nav-tree':'']">
<slot></slot>
</ul>
</template>
<script setup name="LayMenu" lang="ts">
import { defineProps } from 'vue'
const props =
defineProps<{
tree: boolean
}>()
</script>