## ActionSheet
`ActionSheet` provides two common styles and it is flexible.
__Notice:__ Cause this component used create-api, so you should read [create-api](#/en-US/docs/create-api) first.
### Example
- Basic usage
```html
action sheet
```
```js
export default {
methods: {
showDefault() {
this.$createActionSheet({
title: '我是标题~~~',
data: [
{
content: 'align - center',
class: 'cube-foo'
},
{
content: 'align - left',
align: 'left'
},
{
content: 'align - right',
align: 'right'
}
],
onSelect: (item, index) => {
this.$createToast({
txt: `Clicked ${item.content}`,
time: 1000
}).show()
}
}).show()
}
}
}
```
You can create a basic actionsheet by setting `title` and `data` option. Pay attention that `content` in `data` can be a HTML string. Also, setting the custom class by `class` and setting the align of the item's content by `align`.
- Highlight item
```html
ActionSheet - active
```
```js
export default {
methods: {
showActive() {
this.$createActionSheet({
title: '我是标题~~~',
active: 0,
data: [
{
content: '舒适型'
},
{
content: '七座商务'
},
{
content: '豪华型'
}
],
onSelect: (item, index) => {
this.$createToast({
txt: `Clicked ${item.content}`,
type: 'correct',
time: 1000
}).show()
},
onCancel: () => {
this.$createToast({
txt: `Clicked canceled`,
type: 'warn',
time: 1000
}).show()
}
}).show()
}
}
}
```
You can control the highlighted item by setting the `active` option.
- Picker style setting
```html
ActionSheet - picker style
```
```js
export default {
methods: {
showPickerStyle() {
this.$createActionSheet({
title: '我是标题~~~',
pickerStyle: true,
data: [
{
content: '舒适型'
},
{
content: '七座商务'
},
{
content: '豪华型'
}
],
onSelect: (item, index) => {
this.$createToast({
txt: `Clicked ${item.content}`,
type: 'correct',
time: 1000
}).show()
},
onCancel: () => {
this.$createToast({
txt: `Clicked canceled`,
type: 'warn',
time: 1000
}).show()
}
}).show()
}
}
}
```
You can use Picker style by setting `pickerStyle` to be true.
### Props configuration
| Attribute | Description | Type | Accepted Values | Default |
| - | - | - | - | - |
| title | actionsheet's title | String | - | '' |
| data | the data list to display | Array | - | [] |
| active | the highlighted item's index | Number | - | -1 |
| pickerStyle | Picker style | Boolean | true/false | false |
* `data` sub configuration
| Attribute | Description | Type | Accepted Values | Default |
| - | - | - | - | - |
| content | the content to display in the actionsheet's item | String | any text, include HTML | '' |
| align | align the content | String | left/right | '' |
| class | custom class | String | - | '' |
### Events
| Event Name | Description | Parameters 1 | Parameters 2 |
| - | - | - | - |
| cancel | triggers when clicking the cancel button | - | - |
| select | triggers when clicking some item | the clicked item - data[index] | the index of the clicked item |