# 样式说明

### 介绍
放置在此处的样式均使用和组件命名规则相同的方式命名。

其中 `index.less` 为所有样式的出口文件，

`var.less` 为样式变量的储存文件，在每一个组件样式中都应当引入 `var.less` 以确保组件样式的可定制化。

`global.less` 为库提供的可供项目和组件使用的公共样式


### global.less
| class 名          | 用途     | 效果   |可供修改的样式变量     | 其他      |
| -------------    | -------- | --------   | ----------          | --------- |
| lw-global-page-box | 单页根节点样式 | 提供`padding=10px` | -   |-         | 
| lw-global-flex-start | `flex` 布局  | 水平居左，垂直居中 | -   | -  | 
| lw-global-flex-start-start | `flex` 布局  | 水平居左，顶对齐 | -   | -  | 
| lw-global-flex-center | `flex` 布局  | 水平垂直居中 | -   | -  | 
| lw-global-flex-between | `flex` 布局  | 两端对齐，垂直居中 | -   | -  | 
| lw-global-flex-around | `flex` 布局  | 两端分散对齐（两端距离占空距离的一半），垂直居中 | -   | -  | 
| lw-global-flex-evenly | `flex` 布局  | 两端分散对齐（两端距离和空距离一样宽度），垂直居中 | -   | -  | 
| lw-global-bottom-border | 底部线条  | 底部实现 | `@borderColor`   | -  | 
| lw-global-required | 显示必填星号  | 元素前显示红色星号 | -   | -  | 
| lw-global-row | 提供上下左右padding  | - | `@rowTopPadding` `@rowLeftPadding`   | -  | 
| lw-global-click-style | 点击反馈  | - | -  | -  | 
| lw-global-tab-box | tabs标签样式  | - | `@baseColor-激活背景色` `@tabsActiveColor-当前激活字体颜色`  | 使用方法 `<div class="lw-global-tab-box"><van-tabs type="card"></van-tabs></div>` | 
| lw-global-model-box | 模块  | 提供圆角和背景白色 | - |- | 
| lw-global-animation-out | 进入动画  | - | - |- | 
| lw-global-title | 描述信息的标题  | - | `@titleColor` |- | 
| lw-global-value | 描述信息的内容  | - | `@fontColor` |- |