[Doc] new theme

2019-05-15 20:53:04 +08:00
parent 3cae4288f2
commit d0f4169c86
130 changed files with 1460 additions and 1147 deletions
@@ -1,4 +1,7 @@
-## Area
+# Area
+
+### Intro
+
 The Picker component is usually used with [Popup](#/en-US/popup) Component.

 ### Install
@@ -9,9 +12,9 @@ import { Area } from 'vant';
 Vue.use(Area);
 ```

-### Usage
+## Usage

-#### Basic Usage
+### Basic Usage

 To initailize `Area` component, `area-list` property is required. Data structure will be introduced later. 

@@ -19,7 +22,7 @@ To initailize `Area` component, `area-list` property is required. Data structure
 <van-area :area-list="areaList" />
 ```

-#### Initial Value
+### Initial Value

 To have a selected value，simply pass the `code` of target area to `value` property.

@@ -27,7 +30,7 @@ To have a selected value，simply pass the `code` of target area to `value` prop
 <van-area :area-list="areaList" value="110101" />
 ```

-#### Columns Number
+### Columns Number

 `columns-num` property is used to config number of columns to be displayed. This component has 3 columns corresponding to a 3 level picker by default.
 Set `columns-num` with 2, you'll have a 2 level picker.
@@ -36,6 +39,7 @@ Set `columns-num` with 2, you'll have a 2 level picker.
 <van-area :area-list="areaList" :columns-num="2" title="Title" />
 ```

+## API

 ### Props

@@ -67,9 +71,7 @@ Use ref to get area instance and call instance methods
 |------|------|------|------|
 | reset | - | - | Reset all options |

-### Data Structure
-
-#### areaList
+### areaList Data Structure

 An object contains three properties: `province_list`, `city_list` and `county_list`. 
 Each property is a simple key-value object, key is a 6-bit code of the area of which first two bits stand for the province or state, middle two bits are used as city code and the last two are district code, value is the name of the area. If the code stands for an area that has sub-areas, lower bits of it will be filled with 0.
@@ -100,7 +102,8 @@ Example of `AreaList`

 All code of China: [Area.json](https://github.com/youzan/vant/blob/dev/packages/area/demo/area-en.js)

-#### argument of callback function confirm
+### argument of callback function confirm
+
 An array contains selected area objects.

 `code` - code of selected area, `name` - name of selected area
@@ -1,7 +1,10 @@
-## Area 省市区选择
+# Area 省市区选择
+
+### 介绍
+
 省市取选择组件通常与 [弹出层](#/zh-CN/popup) 组件配合使用

-### 使用指南
+### 引入

 ```javascript
 import { Area } from 'vant';
@@ -9,9 +12,9 @@ import { Area } from 'vant';
 Vue.use(Area);
 ```

-### 代码演示
+## 代码演示

-#### 基础用法
+### 基础用法

 要初始化一个`Area`组件，你需要传入一个`area-list`属性，数据格式具体可看下面数据格式章节

@@ -19,7 +22,7 @@ Vue.use(Area);
 <van-area :area-list="areaList" />
 ```

-#### 选中省市区
+### 选中省市区

 如果想选中某个省市区，需要传入一个`value`属性，绑定对应的省市区`code`

@@ -27,7 +30,7 @@ Vue.use(Area);
 <van-area :area-list="areaList" value="110101" />
 ```

-#### 配置显示列
+### 配置显示列

 可以通过`columns-num`属性配置省市区显示的列数，默认情况下会显示省市区，当你设置为`2`，则只会显示省市选择

@@ -35,6 +38,8 @@ Vue.use(Area);
 <van-area :area-list="areaList" :columns-num="2" title="标题" />
 ```

+## API
+
 ### Props

 | 参数 | 说明 | 类型 | 默认值 | 版本 |
@@ -65,9 +70,7 @@ Vue.use(Area);
 |------|------|------|------|
 | reset | - | - | 重置所有选项到第一项 |

-### 数据格式
-
-#### 省市区列表数据格式
+### 省市区列表数据格式

 整体是一个 Object，包含 `province_list`, `city_list`, `county_list` 三个 key。

@@ -104,7 +107,7 @@ Vue.use(Area);

 完整数据见 [Area.json](https://github.com/youzan/vant/blob/dev/packages/area/demo/area.js)

-#### 点击完成时返回的数据格式
+### 点击完成时返回的数据格式

 返回的数据整体为一个数组，数组内包含 `columnsNum` 个数据， 每个数据对应一列选项中被选中的数据。