[Doc] rename component README file (#3662)

2019-06-27 14:22:40 +08:00
parent a56f96c246
commit ddb24e6762
119 changed files with 4 additions and 3 deletions
@@ -0,0 +1,128 @@
+# ActionSheet
+
+### Install
+``` javascript
+import { ActionSheet } from 'vant';
+
+Vue.use(ActionSheet);
+```
+
+## Usage
+
+### Basic Usage
+
+Use `actions` prop to set options of action-sheet. 
+
+```html
+<van-action-sheet
+  v-model="show"
+  :actions="actions"
+  @select="onSelect"
+/>
+```
+
+```javascript
+export default {
+  data() {
+    return {
+      show: false,
+      actions: [
+        { name: 'Option' },
+        { name: 'Option' },
+        { name: 'Option', subname: 'Description' }
+      ]
+    };
+  },
+
+  methods: {
+    onSelect(item) {
+      this.show = false;
+      Toast(item.name);
+    }
+  }
+}
+```
+
+### Status
+
+```html
+<van-action-sheet
+  v-model="show"
+  :actions="actions"
+/>
+```
+
+```javascript
+export default {
+  data() {
+    return {
+      show: false,
+      actions: [
+        { name: 'Option' },
+        { loading: true },
+        { name: 'Disabled Option', disabled: true }
+      ]
+    };
+  }
+}
+```
+
+### ActionSheet with cancel button
+
+```html
+<van-action-sheet
+  v-model="show"
+  :actions="actions"
+  cancel-text="Cancel"
+  @select="onSelect"
+  @cancel="onCancel"
+/>
+```
+
+### ActionSheet with title
+
+```html
+<van-action-sheet v-model="show" title="Title">
+  <p>Content</p>
+</van-action-sheet>
+```
+
+## API
+
+### Props
+
+| Attribute | Description | Type | Default |
+|------|------|------|------|
+| actions | Options | `Array` | `[]` |
+| title | Title | `String` | - |
+| cancel-text | Text of cancel button | `String` | - |
+| overlay | Whether to show overlay | `Boolean` | `true` |
+| close-on-click-action | Whether to close when click action | `Boolean` | `false` |
+| close-on-click-overlay | Whether to close when click overlay | `Boolean` | `true` |
+| lazy-render | Whether to lazy render util appeared | `Boolean` | `true` |
+| lock-scroll | Whether to lock background scroll | `Boolean` | `true` |
+| duration | Transition duration, unit second | `Number` | `0.3` |
+| get-container | Return the mount node for action-sheet | `String | () => HTMLElement` | - |
+| safe-area-inset-bottom | Whether to enable bottom safe area adaptation, to enable those features use `viewport-fit=cover` in the `viewport` meta tag | `Boolean` | `false` |
+
+### Events
+
+| Event | Description | Arguments |
+|------|------|------|
+| select | Triggered when click option | item, index |
+| cancel | Triggered when cancel click | - |
+| click-overlay | Triggered when click overlay | - |
+| open | Triggered when open ActionSheet | - |
+| opened | Triggered when opened ActionSheet | - |
+| close | Triggered when close ActionSheet | - |
+| closed | Triggered when closed ActionSheet | - |
+
+### Data struct of actions
+
+| key | Description |
+|------|------|
+| name | Title |
+| subname | Subtitle |
+| className | className for the option |
+| loading | Whether to be loading status |
+| disabled | Whether to be disabled |