theluyuan/layui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[文档] 新增 color 文档, 修正 lay-block 组件样式

Browse Source
This commit is contained in:
就眠仪式 2021-09-30 23:49:46 +08:00
parent 7e2f6abc7b
commit 4bad992d9b
14 changed files with 171 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
docs/docs/zh-CN/components/block.md
View File

@ -2,6 +2,25 @@
<template>
<lay-block>引用区域的文字</lay-block>
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
return {
}
}
}
</script>
:::
::: demo
<template>
<lay-block nm>引用区域的文字</lay-block>
</template>

9
docs/docs/zh-CN/components/button.md
View File

@ -150,4 +150,11 @@ export default {
}
</script>
:::
:::
| | | |
|--|--|--|
| type | 主题 | `primary` `normal` `warm` `danger` `disabled`|
| size | 尺寸 | `lg` `sm` `xs` |
| fluid | 最大化 | `true` `false` |
| radius | 圆角 | `true` `false` |

87
docs/docs/zh-CN/components/color.md Normal file
View File

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

27
docs/docs/zh-CN/components/grid.md
View File

@ -22,6 +22,20 @@ export default {
}
</script>
<style>
.grid-demo-bg1 {
background-color: #63BA79;
}
.grid-demo {
padding: 10px;
line-height: 50px;
border-radius: 4px;
text-align: center;
background-color: #79C48C;
color: #fff;
}
</style>
:::
::: demo
@ -44,6 +58,19 @@ export default {
}
</script>
<style>
.grid-demo-bg1 {
background-color: #63BA79;
}
.grid-demo {
padding: 10px;
line-height: 50px;
border-radius: 4px;
text-align: center;
background-color: #79C48C;
color: #fff;
}
</style>
:::
::: demo

4
docs/docs/zh-CN/components/icon.md
View File

@ -17,3 +17,7 @@ export default {
</script>
:::
| | | |
|--|--|--|
| type | 图标 | `layui-icon-home` `layui-icon-template`... |

2
docs/src/layouts/Layout.vue
View File

@ -48,7 +48,6 @@
<router-view></router-view>
</div>
</lay-body>
<lay-footer></lay-footer>
</lay-layout>
</div>
</template>
@ -79,6 +78,7 @@ export default {
{ id: 17, title: '面包屑',subTitle:"breadcrumb" ,path: '/zh-CN/components/breadcrumb' },
{ 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' },
]
const selected = ref(1)

8
docs/src/router/zh-CN.ts
View File

@ -33,7 +33,13 @@ const zhCN = [
path: '/zh-CN/components/layout',
component: () => import('../../docs/zh-CN/components/layout.md'),
meta: { title: '布局' },
}, {
},
{
path: '/zh-CN/components/color',
component: () => import('../../docs/zh-CN/components/color.md'),
meta: { title: '颜色' },
},
{
path: '/zh-CN/components/container',
component: () => import('../../docs/zh-CN/components/container.md'),
meta: { title: '容器' },

13
docs/src/styles/markdown.css
View File

@ -120,7 +120,6 @@ ul {
}
p {
color: #454d64 !important;
margin-top: 20px !important;
font-size: 14px !important;
}
@ -178,18 +177,6 @@ li > ol {
margin: 0;
}
blockquote {
margin: 1rem 0;
border-left: 0.2rem solid #dfe2e5;
padding: 0.25rem 0 0.25rem 1rem;
font-size: 1rem;
color: #999;
}
blockquote > p {
margin: 0;
}
form {
margin: 0;
}

11
src/css/all.css
View File

@ -1,11 +0,0 @@
.grid-demo-bg1 {
background-color: #63BA79;
}
.grid-demo {
padding: 10px;
line-height: 50px;
border-radius: 4px;
text-align: center;
background-color: #79C48C;
color: #fff;
}

1
src/css/layui.css
View File

@ -66,7 +66,6 @@ img {
white-space: nowrap
}
blockquote,
body,
button,
dd,

1
src/index.ts
View File

@ -2,7 +2,6 @@ import type { App } from 'vue'
import type { IDefineComponent, InstallOptions } from './module/type/index'
import "./css/layui.css"
import "./css/all.css"
import LayRadio from './module/radio/index'
import LayButton from './module/button/index'
import LayButtonContainer from './module/buttonContainer/index'

1
src/module/breadcrumb/index.vue
View File

@ -5,6 +5,5 @@
</template>
<script setup name="LayBreadcrumb" lang="ts">
import { useSlots } from "vue";
</script>

9
src/module/count/index.ts Normal file
View File

@ -0,0 +1,9 @@
import type { App } from 'vue'
import Component from './index.vue'
import type { IDefineComponent } from '../type/index'
Component.install = (app: App) => {
app.component(Component.name || 'LayCount', Component)
}
export default Component as IDefineComponent

9
src/module/count/index.vue Normal file
View File

@ -0,0 +1,9 @@
<template>
<span class="layui-count">
</span>
</template>
<script setup name="LayCount" lang="ts">
</script>