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

更新文档

Browse Source
This commit is contained in:
就眠儀式
2022-02-07 13:42:38 +08:00
parent e24297f912
commit 5c2fc10e95
13 changed files with 71 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
example/docs/zh-CN/guide/theme.md
View File

@@ -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 的样式覆盖了。
:::