[Doc] translate theme & demo pages (#320)

* fix: Tabbar icon line-height

* [new feature] progress add showPivot prop

* [new feature] TabItem support vue-router

* [new feature] update document header style

* [Doc] add toast english ducoment

* [bugfix] Search box-sizing wrong

* [Doc] update vant-demo respo

* [Doc] translate theme & demo pages
This commit is contained in:
neverland
2017-11-15 21:42:03 -06:00
committed by GitHub
parent 46ab59930e
commit 5eb3303ec6
4 changed files with 47 additions and 24 deletions
+10 -11
View File
@@ -1,20 +1,20 @@
## Custom Theme (In translation)
## Custom Theme
`Vant` provides a set of default themes, if you want to custom the theme color or other styles, you can use the following methods:
### 方案一. PostCSS 插件
在项目中直接引入组件对应的 postcss 源代码,并通过 postcss 插件 [postcss-theme-variables](https://www.npmjs.com/package/postcss-theme-variables) 替换颜色变量,步骤如下:
### Option 1. PostCSS Plugin
You can import the postcss source code in your own project, then use [postcss-theme-variables](https://www.npmjs.com/package/postcss-theme-variables) to replace the postcss variable.
```javascript
// 引入基础样式
// import base style
import 'vant/packages/vant-css/src/base.css';
// 引入组价对应的样式
// import component style
import 'vant/packages/vant-css/src/button.css';
import 'vant/packages/vant-css/src/checkbox.css';
```
接着在 postcss.config.js 中引入所需的 postcss 插件,并根据项目需求配置颜色变量,所有可用的颜色变量请参考 [配置文件](https://github.com/youzan/vant/blob/dev/packages/vant-css/src/common/var.css)
Then require the plugin in the postcss.config.js, and configure the variables according to project needs, you can view all the available variables in [profile](https://github.com/youzan/vant/blob/dev/packages/vant-css/src/common/var.css).
```javascript
module.exports = {
@@ -39,17 +39,16 @@ module.exports = {
};
```
### 方案二. 本地构建
可以通过在本地构建 vant-css 的方式生成所需的主题
### Option 2. Local build
Vant also support local build to custom themes.
```bash
# 克隆仓库
# Clone the repository
git clone git@github.com:youzan/vant.git
cd packages/vant-css
```
在本地 vant-css 仓库中,修改 src/common/var.css 中的颜色变量,然后执行以下构建命令,即可生成对应的样式文件
In the local vant-css repository, modify the variables in src/common/var.css, then execute the following build command to generate the style file.
```bash
npm run build
```
+1 -1
View File
@@ -9,7 +9,7 @@
// 引入基础样式
import 'vant/packages/vant-css/src/base.css';
// 引入组对应的样式
// 引入组对应的样式
import 'vant/packages/vant-css/src/button.css';
import 'vant/packages/vant-css/src/checkbox.css';
```