更新文档
This commit is contained in:
parent
f574c2aac0
commit
899604b2d0
@ -31,4 +31,9 @@ export default {
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
:::
|
||||
|
||||
| | | |
|
||||
|--|--|--|
|
||||
| type | 类型 | `dot` `rim` |
|
||||
| theme| 主题 | `orange` `green` `cyan` `blue` `black` `gray`|
|
@ -47,4 +47,9 @@ export default {
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
:::
|
||||
|
||||
| | | |
|
||||
|--|--|--|
|
||||
| header | 插槽 | `内容` |
|
||||
| body | 插槽 | `内容` |
|
23
docs/docs/zh-CN/components/collapse.md
Normal file
23
docs/docs/zh-CN/components/collapse.md
Normal 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>
|
||||
|
||||
:::
|
@ -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>
|
||||
|
@ -57,4 +57,8 @@ export default {
|
||||
}
|
||||
</style>
|
||||
|
||||
:::
|
||||
:::
|
||||
|
||||
| | | |
|
||||
|--|--|--|
|
||||
| fluid | 流模式 | `true` `false` |
|
@ -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 |
|
@ -20,4 +20,4 @@ export default {
|
||||
|
||||
| | | |
|
||||
|--|--|--|
|
||||
| type | 图标 | `layui-icon-home` `layui-icon-template`... |
|
||||
| type | 图标 | `layui-icon-home` |
|
||||
|
@ -30,3 +30,7 @@ export default {
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
| | | |
|
||||
|--|--|--|
|
||||
| theme| 主题 | `orange` `green` `cyan` `blue` `black` `gray`|
|
@ -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>
|
||||
|
||||
:::
|
||||
|
@ -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>
|
||||
|
||||
:::
|
@ -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 | 展示描述 | -- |
|
0
docs/docs/zh-CN/components/table.md
Normal file
0
docs/docs/zh-CN/components/table.md
Normal 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)
|
||||
|
@ -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: '表格' },
|
||||
}
|
||||
],
|
||||
},
|
||||
|
@ -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,
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
Loading…
Reference in New Issue
Block a user