更新文档

example/docs/zh-CN/guide/changelog.md

@@ -11,6 +11,18 @@
 <template>
 <lay-timeline>
   <lay-timeline-item title="0.3.x">
+     <ul> 
+      <a name="0-3-7"> </a> 
+      <li> 
+        <h3>0.3.7 <span class="layui-badge-rim">2022-02-07</span></h3> 
+        <ul> 
+          <li>[新增] index.less 样式文件, 支持一定程度的主题定制。</li>
+          <li>[新增] slider 滑块组件 setp 属性, 支持设置步长。</li>
+          <li>[升级] icons-vue 1.0.4 版本。</li>
+          <li>[升级] layer-vue 1.3.3 版本</li>
+        </ul> 
+      </li>
+    </ul>
     <ul> 
       <a name="0-3-6"> </a> 
       <li> 

example/docs/zh-CN/guide/getStarted.md

@@ -1,20 +1,18 @@
 ::: title 快速上手
 :::
 
+<img style="margin:20px;margin-left:30px;width:380px;" src="../../../src/assets/start.svg"/>
+
+::: describe 使用 (npm, yarn, pnpm) 工具安装 layui vue, 然后你就可以使用打包工具, 如 vite
+:::
+
 ```
 npm install @layui/layui-vue --save
-```
 
-```
+或
+
 yarn add @layui/layui-vue --save
 ```
-
-```
-pnpm install @layui/layui-vue --save
-```
-
-<br>
-
 ::: title 全局注册
 :::
 
@@ -26,8 +24,8 @@ import '@layui/layui-vue/lib/index.css'
 
 createApp(App).use(Layui).mount('#app')
 ```
-
-<br>
+::: describe 以上代码便完成了 layui-vue 的引入。需要注意的是，样式文件需要单独引入。
+:::
 
 ::: title 按需引入
 :::
@@ -46,8 +44,6 @@ app.component("LayTable", LayTable);
 
 app.mount('#app')
 ```
-<br>
-
 
 ::: title 基础示例
 :::
@@ -64,3 +60,6 @@ app.mount('#app')
   <lay-footer>pearadmin.com</lay-footer>
 </lay-layout>
 ```
+::: describe 您可以从现在起启动您的项目。 对于每个组件的用法，请参考单个组件对应的文档。
+:::
+

example/docs/zh-CN/guide/theme.md

@@ -1,18 +1,31 @@
 ::: title 定制主题
 :::
 
-::: describe Layui 设计规范上支持一定程度的样式定制，以满足业务和品牌上多样化的视觉需求，包括但不限于主色、圆角、边框和部分组件的视觉定制。
+::: describe Layui 支持一定程度的主题定制，以满足业务和品牌上多样化的视觉需求，包括但不限于主色、圆角、边框和部分组件的视觉定制。
 :::
 
+|    |    |
+| -- | -- |
+| <img style="margin:50px;width:60%;" src="../../../src/assets/theme1.svg" />   | <img style="margin:50px;width:60%;" src="../../../src/assets/theme2.svg" /> |
+
 ::: describe 以下是一些最常用的通用变量，所有样式变量可以在 这里 找到。
 :::
 
 ```css
 @global-primary-color: #009688; // 主题色
-@global-checked-color: #5FB878; // 选中色
+@global-checked-color: #5FB878; // 选中色 
 @global-border-radius: 2px; // 圆角度数
 ```
-::: describe 如果以上变量不能满足你的定制需求，可以给我们提 issue。
+::: describe 除全局的主题配置外, 我们还对组件提供定制化的主题配置 
+:::
+
+```css
+@button-primary-color: #009688; // 按钮主题色
+@button-border-radius: 2px; // 按钮圆角度数
+...
+```
+
+::: describe 组件的主题配置会覆盖全局的配置, 组件的定制化配置会在对应的组件文档中看到。
 :::
 
 ::: title 定制方式
@@ -26,5 +39,5 @@
 @import 'your-theme-file.less'; // 用于覆盖上面定义的变量
 ```
 
-::: describe 注意，这种方式已经载入了所有组件的样式，不需要也无法和按需加载插件 babel-plugin-import 的 style 属性一起使用。
+::: describe 注意: 样式必须加载 less 格式，一个常见的问题就是引入了多份样式，less 的样式被 css 的样式覆盖了。
 :::