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

✨(component): 简化 icon 文档

Browse Source
This commit is contained in:
就眠儀式
2022-10-23 23:55:00 +08:00
parent 91c3d1406d
commit afabcf3fff
4 changed files with 20 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
package/document-component/src/document/zh-CN/components/icon.md
View File

@@ -4,44 +4,22 @@
::: title 基本介绍
:::
::: describe 语义化的矢量图形。使用图标组件，你需要安装 `@layui/icons-vue` 图标组件包
::: describe 语义化的矢量图形。
:::
::: title 基础使用
:::
::: demo 使用 `lay-icon` 标签, 创建图标组件
<template>
<lay-icon type="layui-icon-face-smile"></lay-icon>
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
return {
}
}
}
</script>
:::
::: title 图标颜色
:::
::: demo 使用 `color` 属性设置颜色
<template>
<lay-icon type="layui-icon-face-smile" color="red"></lay-icon> &nbsp;
<lay-icon type="layui-icon-face-smile"></lay-icon> &nbsp;
<lay-icon type="layui-icon-face-smile" color="orange"></lay-icon> &nbsp;
<lay-icon type="layui-icon-face-smile" color="green"></lay-icon> &nbsp;
<lay-icon type="layui-icon-face-smile" color="cyan"></lay-icon> &nbsp;
<lay-icon type="layui-icon-face-smile" color="blue"></lay-icon> &nbsp;
<lay-icon type="layui-icon-face-smile" color="black"></lay-icon> &nbsp;
<lay-icon type="layui-icon-face-smile" color="red" size="24px" ></lay-icon>
</template>
<script>
@@ -58,43 +36,19 @@ export default {
:::
::: title 图标尺寸
:::
::: demo 使用 `size` 属性设置尺寸
<template>
<lay-icon type="layui-icon-star" size="26px" color="red"></lay-icon>
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
return {
}
}
}
</script>
:::
::: title 图标组件
::: title 组件图标
:::
<br>
::: describe 在 0.2.4 版本后, 图标支持组件化的调用方式, 首先你需要安装 `@layui/icons-vue` 依赖。
::: describe 使用图标组件，你需要安装 `@layui/icons-vue` 图标组件包。
:::
```
npm install @layui/icons-vue
```
::: describe 接下来, 你可以像之前使用组件一样去创建图标。
::: describe 然后, 你可以像之前使用组件一样去创建图标。
:::
```vue
@@ -104,7 +58,7 @@ npm install @layui/icons-vue
</template>
<script setup>
import { AlignCenterIcon, DiamondIcon } from '@layui/icons-vue';
import { AlignCenterIcon, DiamondIcon } from '@layui/icons-vue';
</script>
```

18
package/document-component/src/document/zh-CN/components/ripple.md
View File

@@ -10,17 +10,17 @@
::: title 基础使用
:::
::: demo 使用 `lay-ripple` 标签, 为目标元素新增水波纹。
::: demo 使用 `lay-ripple` 标签, 为 `element` 添加水波纹效果。
<template>
<lay-ripple>
<lay-button>click</lay-button>
</lay-ripple>
<br/>
<br/>
<lay-ripple type="out" borderRadius="2px">
<lay-button>click</lay-button>
</lay-ripple>
<lay-space>
<lay-ripple>
<lay-button>click</lay-button>
</lay-ripple>
<lay-ripple type="out" borderRadius="2px">
<lay-button>click</lay-button>
</lay-ripple>
</lay-space>
</template>
<script>