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

✨(component): [line]: 新增 margin 属性，控制分割线边距

Browse Source
This commit is contained in:
sight
2022-08-27 22:37:46 +08:00
parent f30012c852
commit 9a80be4c37
5 changed files with 27 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
package/document-component/src/document/zh-CN/components/dropdown.md
View File

@@ -394,7 +394,7 @@ export default {
<template #default>刷新</template>
<template #suffix><span style="font-size:10px">Ctrl + R</span></template>
</lay-dropdown-menu-item>
<lay-line></lay-line>
<lay-line margin="0" theme="#EEE"></lay-line>
<lay-dropdown-menu-item disabled>
<template #prefix><lay-icon type="layui-icon-about"></lay-icon></template>
<template #default>更多</template>

31
package/document-component/src/document/zh-CN/components/line.md
View File

@@ -10,22 +10,24 @@
::: demo 默认为水平分割线
<template>
<lay-space direction="vertical" fill>
默认分割线
<lay-line></lay-line><br/>
<lay-line></lay-line>
赤色分割线
<lay-line theme="red"></lay-line><br/>
<lay-line theme="red"></lay-line>
橙色分割线
<lay-line theme="orange"></lay-line><br/>
<lay-line theme="orange"></lay-line>
墨绿分割线
<lay-line theme="green"></lay-line><br/>
<lay-line theme="green"></lay-line>
青色分割线
<lay-line theme="cyan"></lay-line><br/>
<lay-line theme="cyan"></lay-line>
蓝色分割线
<lay-line theme="blue"></lay-line><br/>
<lay-line theme="blue"></lay-line>
黑色分割线
<lay-line theme="black"></lay-line><br/>
<lay-line theme="black"></lay-line>
自定义颜色
<lay-line theme="#EEF08D"></lay-line><br/>
<lay-line theme="#EEF08D"></lay-line>
</lay-space>
</template>
<script>
@@ -48,10 +50,12 @@ export default {
::: demo `contentPosition` 属性设置内容位置，`offset` 属性设置内容偏移量, 单位 `px` 或百分比值。也可以通过 `border-style` 和`border-width` 自定义样式
<template>
<lay-line>🌲 🌲 🌲 🌲</lay-line><br>
<lay-line contentPosition="left">left 默认</lay-line><br>
<lay-line contentPosition="right" offset="8%">right 百分比</lay-line><br>
<lay-line border-style="dashed" border-width="3px">自 定 义 宽 度 和 样 式</lay-line><br>
<lay-space direction="vertical" fill>
<lay-line>🌲 🌲 🌲 🌲</lay-line>
<lay-line contentPosition="left">left 默认</lay-line>
<lay-line contentPosition="right" offset="8%">right 百分比</lay-line>
<lay-line border-style="dashed" border-width="3px">自 定 义 宽 度 和 样 式</lay-line>
</lay-space>
</template>
<script>
@@ -63,7 +67,7 @@ export default {
::: title 竖直分割线
:::
::: demo 设置 `direction` = 'vertical' 即可使用竖直分割线
::: demo 设置 `direction = "vertical"` 即可使用竖直分割线
<template>
默认分割线
@@ -100,6 +104,7 @@ export default {
| theme | 主题 | `red` `orange` `green` `cyan` `blue` `black` `gray` 或 string |
| borderWidth | 分割线宽度，单位 px | eg: `2px`|
| borderStyle | 分割线样式 | <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/border-style">参见MDN：border-style</a> |
| margin | 分割线边距，默认 8px |- |
:::