mand-mobile
Version:
A Vue.js 2.0 Mobile UI Toolkit
59 lines (41 loc) • 1.83 kB
Markdown
---
title: ActionBar
preview: https://didi.github.io/mand-mobile/examples/#/action-bar
---
Bottom sidebar with a number of texts or action buttons that can be used to present form information and submit buttons
```javascript
import { ActionBar } from 'mand-mobile'
Vue.component(ActionBar.name, ActionBar)
```
ActionBar is fixed at the bottom of the page by `position: fixed`. In order to avoid the page content being occluded, you need to reserve a blank of not less than `100px` at the bottom (the iPhone also needs to add `constant(safe-area-inset-bottom)`).
### Code Examples
<!-- DEMO -->
### API
#### ActionBar Props
|Props | Description | Type | Default | Note|
|----|-----|------|------|------|
|actions|button group|Array\<ActionOptions\>|-|-|
#### ActionOptions Props
|属性 | 说明 | 类型 | 默认值|
|----|-----|------|------|
|text|-|String|-|
|disabled|-|Boolean|`false`|
|onClick|click handler|Function(action: ActionOptions)|-|
|type <sup class="version-after">2.5.0+</sup>|-|String|`disabled` when the prop `disabled` is true, otherwise is `primary`|
|plain <sup class="version-after">2.5.0+</sup>|-|Boolean|`false` for the last one and `true` for the others|
|round <sup class="version-after">2.5.0+</sup>|-|Boolean|`false`|
|icon <sup class="version-after">2.5.0+</sup>|icon name|String|-|
|iconSvg <sup class="version-after">2.5.0+</sup>|use svg icon|Boolean|`false`|
|inactive <sup class="version-after">2.5.0+</sup>|-|Boolean|`false`|
|loading <sup class="version-after">2.5.0+</sup>|-|Boolean|`false`|
left content
Button click event
|Props | Description | Type |
|----|-----|------|
|action|object corresponding to the clicked button in the actions list|Object: ActionOptions|