[new feature] add i18n support (#310)
* 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 * [new feature] add i18n support * feat: Extract demos from markdown * feat: Base components demos * [new feature] complete demo extract & translate * [fix] text cases * fix: add deepAssign test cases * fix: changelog detail * [new feature] AddressEdit support i18n
This commit is contained in:
@@ -30,7 +30,7 @@ npm run dev
|
||||
|
||||
- 仓库的组件代码都位于 `packages` 下,每个组件一个文件夹
|
||||
- 所有的组件样式代码都位于 `packages/vant-css/src` 下,`vant-css` 也会在发布时单独发包
|
||||
- `docs/examples-docs` 目录下是文档网站的代码,根据语言划分为 zh-CN 和 en-US,本地开发时可以在根目录下运行 `npm run dev` 开启文档网站。
|
||||
- `docs/markdown` 目录下是文档网站的代码,根据语言划分为 zh-CN 和 en-US,本地开发时可以在根目录下运行 `npm run dev` 开启文档网站。
|
||||
|
||||
项目目录大致如下:
|
||||
|
||||
@@ -58,7 +58,7 @@ vant
|
||||
|
||||
- 添加文档
|
||||
|
||||
新组件的文档编写,需要在 `docs/examples-docs` 下各个语言中新建对应同名文档 `button.md`,并在 `docs/src/doc.config.js` 中进行文档路径配置
|
||||
新组件的文档编写,需要在 `docs/markdown` 下各个语言中新建对应同名文档 `button.md`,在 `docs/demos` 下创建组件示例,并在 `docs/src/doc.config.js` 中进行配置组件名称
|
||||
|
||||
- 添加测试代码
|
||||
|
||||
@@ -67,7 +67,7 @@ vant
|
||||
|
||||
## 组件文档如何编写
|
||||
|
||||
`docs/examples-docs` 下根据语言划分了组件文档,每个组件需要在各语言中编辑对应的文档。组件文档采用 markdown 格式,内容包括使用示例以及 `API` 等。具体书写规范请参考 [组件文档书写规范](./MARKDOWN.md)。
|
||||
`docs/markdown` 下根据语言划分了组件文档,每个组件需要在各语言中编辑对应的文档。组件文档采用 markdown 格式,内容包括使用示例以及 `API` 等。具体书写规范请参考 [组件文档书写规范](./MARKDOWN.md)。
|
||||
|
||||
#### API 说明
|
||||
|
||||
@@ -106,5 +106,5 @@ vant
|
||||
`z-index` 优先级(从高到低):
|
||||
|
||||
* 特殊组件:Toast 永远在最上面,[3000, +∞)
|
||||
* ‘用完就关’ 的组件:Dialog, Pop, Actionsheet, image-preview 等 [2000, 3000)
|
||||
* ‘用完就关’ 的组件:Dialog, Pop, Actionsheet, ImagePreview 等 [2000, 3000)
|
||||
* 其他:组件内部用来控制层次的 z-index 的区间 [-10, 10],尽可能写小,一般1,2,3这种就够了。
|
||||
|
||||
+16
-20
@@ -18,28 +18,24 @@
|
||||
|
||||
#### 代码演示
|
||||
|
||||
另起一个二级标题,正文可以是 markdown 和示例的混合。示例的结构如下:
|
||||
另起一个二级标题,示例的结构如下:
|
||||
|
||||
// 在 demo 端之外放置的 script 会直接运行
|
||||
// 在 script 中声明的 vue 变量,在 demo 中都可以直接使用
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
size: 'large'
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```javascript
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
size: 'large'
|
||||
};
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
```html
|
||||
<van-button :size="size">
|
||||
Large
|
||||
</van-button>
|
||||
```
|
||||
|
||||
:::demo 基础用法(必须以:::demo开头,后面的描述可选,如果有的话控制在一两句话,不要过长)
|
||||
```html // :::demo后面必须接代码段,否则不会识别为示例
|
||||
<van-button :size="size"> // 在内容区直接写 vue 中 template 段代码即可
|
||||
Large
|
||||
</van-button>
|
||||
```
|
||||
::: // 示例结束的标记,必须接在代码段之后,否则不会识别为示例
|
||||
|
||||
代码演示的几个书写原则:
|
||||
|
||||
- 从简单用法开始介绍,不要上来就同时使用一大堆 API,会让人觉得难以上手
|
||||
|
||||
Reference in New Issue
Block a user