## Actionsheet
### Install
``` javascript
import { Actionsheet } from 'vant';
Vue.component(Actionsheet.name, Actionsheet);
```
### Usage
#### Basic Usage
Use `actions` prop to set options of actionsheet.
:::demo Basic Usage
```html
Show Actionsheet
```
```javascript
export default {
data() {
return {
show1: false,
actions: [
{ name: 'Option1', callback: this.onClick },
{ name: 'Option2' },
{ name: 'Option3', loading: true }
]
};
},
methods: {
onClick(item) {
Toast(item.name);
}
}
}
```
:::
#### Actionsheet with cancel button
:::demo Actionsheet with cancel button
```html
Show Actionsheet with cancel button
```
:::
#### Actionsheet with title
Actionsheet will get another style if there is a `title` prop.
:::demo Actionsheet with title
```html
Show Actionsheet with title
Content
```
:::
### API
| Attribute | Description | Type | Default | Accepted Values |
|-----------|-----------|-----------|-------------|-------------|
| actions | Options | `Array` | `[]` | - |
| title | Title | `String` | - | - |
| cancelText | Text of cancel button | `String` | - | - |
| overlay | Whether to show overlay | `Boolean` | - | - |
| closeOnClickOverlay | Whether to close when click overlay | `Boolean` | - | - |
### Data struct of actions
| key | Description |
|-----------|-----------|
| name | Title |
| subname | Subtitle |
| className | className for the option |
| loading | Whether to be loading status |
| callback | Triggered when click option |