mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
[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
GitHub
parent
46ab59930e
commit
5eb3303ec6
@ -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
|
||||
```
|
||||
|
||||
|
||||
@ -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';
|
||||
```
|
||||
|
||||
@ -1,14 +1,14 @@
|
||||
<template>
|
||||
<section class="van-doc-demo-pages">
|
||||
<h2>示例</h2>
|
||||
<p>下面是一些使用 Vant 搭建的示例页面，点击图片切换至对应示例。</p>
|
||||
<h2>{{ $t('title') }}</h2>
|
||||
<p>{{ $t('description') }}</p>
|
||||
<div class="van-doc-demo-pages__gallery">
|
||||
<div
|
||||
:class="['van-doc-demo-pages__item', { 'van-doc-demo-pages__item--active': index === currentDemo }]"
|
||||
v-for="(demo, index) in demos"
|
||||
>
|
||||
<h4>{{ demo.title }}</h4>
|
||||
<a :href="demo.source" target="_blank">源代码</a>
|
||||
<a :href="demo.source" target="_blank">{{ $t('source') }}</a>
|
||||
<img :src="demo.preview" @click="onChangeDemo(demo, index)" />
|
||||
</div>
|
||||
</div>
|
||||
@ -19,26 +19,50 @@
|
||||
export default {
|
||||
name: 'van-doc-demo-pages',
|
||||
|
||||
i18n: {
|
||||
'zh-CN': {
|
||||
title: '示例',
|
||||
source: '源代码',
|
||||
description: '下面是一些使用 Vant 搭建的示例页面，点击图片切换至对应示例。',
|
||||
goodsDetail: '商品详情',
|
||||
userCenter: '会员中心',
|
||||
shoppingCart: '购物车'
|
||||
},
|
||||
'en-US': {
|
||||
title: 'Demo Pages',
|
||||
source: 'Source code',
|
||||
description: 'Here are some of the demo pages built using Vant, click on the picture to switch to the corresponding demo.',
|
||||
goodsDetail: 'Goods Detail',
|
||||
userCenter: 'User Center',
|
||||
shoppingCart: 'Shopping Cart'
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
currentDemo: 0,
|
||||
demos: [{
|
||||
title: '商品详情',
|
||||
currentDemo: 0
|
||||
};
|
||||
},
|
||||
|
||||
computed: {
|
||||
demos() {
|
||||
return [{
|
||||
title: this.$t('goodsDetail'),
|
||||
preview: 'https://img.yzcdn.cn/public_files/2017/10/24/7070a8d1d6504b864c605114d32f2aae.png',
|
||||
url: 'https://youzan.github.io/vant-demo/#/goods',
|
||||
source: 'https://github.com/youzan/vant-demo/tree/master/src/view/goods/index.vue'
|
||||
}, {
|
||||
title: '会员中心',
|
||||
title: this.$t('userCenter'),
|
||||
preview: 'https://img.yzcdn.cn/public_files/2017/10/23/e1d70757e3ab88d39a360b704be8f43f.png',
|
||||
url: 'https://youzan.github.io/vant-demo/#/user',
|
||||
source: 'https://github.com/youzan/vant-demo/tree/master/src/view/user/index.vue'
|
||||
}, {
|
||||
title: '购物车',
|
||||
title: this.$t('shoppingCart'),
|
||||
preview: 'https://img.yzcdn.cn/public_files/2017/10/24/06b8b5ed3692314d434db7f6854dcdbe.png',
|
||||
url: 'https://youzan.github.io/vant-demo/#/cart',
|
||||
source: 'https://github.com/youzan/vant-demo/tree/master/src/view/cart/index.vue'
|
||||
}]
|
||||
};
|
||||
}];
|
||||
}
|
||||
},
|
||||
|
||||
beforeMount() {
|
||||
|
||||
@ -308,12 +308,12 @@ module.exports = {
|
||||
},
|
||||
{
|
||||
path: '/theme',
|
||||
title: 'Theme (In translation)',
|
||||
title: 'Custom Theme',
|
||||
noExample: true
|
||||
},
|
||||
{
|
||||
path: '/demo',
|
||||
title: 'Demo pages (In translation)',
|
||||
title: 'Demo pages',
|
||||
noDocument: true,
|
||||
noExample: true
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user