[Document] add form components english document (#199)

* [Document] add english document of Checkbox * [Document] add english document of Field * [Document] add english document of NumberKeyboard * [bugfix] NumberKeyboard should not dispaly title when title is empty * [Document] add english document of PasswordInput * [Document] add english document of Radio * [document] add english document of Switch * [bugfix] remove redundent styles in english document * [Document] fix details * fix Switch test cases
2017-10-12 07:06:27 -05:00
parent 47576ec47c
commit 9084a662c3
24 changed files with 858 additions and 293 deletions
@@ -0,0 +1,126 @@
+<script>
+export default {
+  data() {
+    return {
+      value: '',
+      password: '',
+      username: '',
+      message: ''
+    };
+  }
+};
+</script>
+
+## Field
+
+### Install
+``` javascript
+import { Field } from 'vant';
+
+Vue.component(Field.name, Field);
+```
+
+### Usage
+
+#### Basic Usage
+The value of filed is bound with v-model.
+
+:::demo Basic Usage
+```html
+<van-cell-group>
+  <van-field v-model="value" placeholder="Username"></van-field>
+</van-cell-group>
+```
+:::
+
+#### Custom Type
+Use `type` prop to custom diffrent type fileds.
+
+:::demo Custom Type
+```html
+<van-cell-group>
+  <van-field
+    v-model="username"
+    label="Username"
+    icon="clear"
+    placeholder="Username"
+    required
+    @click-icon="username = ''"
+  >
+  </van-field>
+
+  <van-field
+    v-model="password"
+    type="password"
+    label="Password"
+    placeholder="Password"
+    required>
+  </van-field>
+</van-cell-group>
+```
+:::
+
+#### Disabled
+
+:::demo Disabled
+```html
+<van-cell-group>
+  <van-field value="Disabled" label="Username" disabled></van-field>
+</van-cell-group>
+```
+:::
+
+#### Error Info
+
+:::demo Error Info
+```html
+<van-cell-group>
+  <van-field label="Username" placeholder="Username" error></van-field>
+</van-cell-group>
+```
+:::
+
+#### Auto resize
+Textarea Filed can be auto resize when has `autosize` prop
+
+:::demo Auto resize
+```html
+<van-cell-group>
+  <van-field
+    v-model="message"
+    label="Message"
+    type="textarea"
+    placeholder="Message"
+    rows="1"
+    autosize
+  >
+  </van-field>
+</van-cell-group>
+```
+:::
+
+### API
+
+| Attribute | Description | Type | Default | Accepted Values |
+|-----------|-----------|-----------|-------------|-------------|
+| type | Filed type | `String`  | `text` | `number` `email` <br> `textarea` `tel` <br> `datetime` `date` <br> `password` `url` |
+| value | Filed value | `String`  | - | - |
+| label | Filed label | `String`  | - | - |
+| disabled | Disable field  | `Boolean`  | `false` | - |
+| error | Whether to show error info | `Boolean`  | `false` | - |
+| autosize | Textarea auto resize | `Boolean`  | `false` | - |
+| icon | Right side Icon name | `String`  | - | - |
+
+### Event
+
+| Event | Description | Parameters |
+|-----------|-----------|-----------|
+| focus | Triggered when filed get focused | - |
+| blur | Triggered when blur filed | - |
+| click-icon | Triggered when click the icon of filed | - |
+
+### Slot
+
+| name | Description |
+|-----------|-----------|
+| icon | Custom icon |