Action-bar 操作栏
汇集若干文案或操作按钮的吸底边栏,可用于展示表单信息与提交按钮
引入
import { ActionBar } from 'mand-mobile-next'
Vue.createApp().component(ActionBar.name, ActionBar)
使用指南
TIP
默认使用position: fixed
固定在页面底部,为避免遮挡内容区底部预留不小于100px
的空白(iPhone还需额外增加constant(safe-area-inset-bottom)/env(safe-area-inset-bottom)
)
代码演示
API
ActionBar Props
属性 | 说明 | 类型 | 默认值 | 备注 |
---|---|---|---|---|
actions | 按钮组 | Array<ActionOptions> |
ActionOptions
属性 | 说明 | 类型 | 默认值 | 备注 |
---|---|---|---|---|
text | 文案 | String | ||
disabled | 禁用 | Boolean | false | |
onClick | 点击回调 | Function(action: ActionOptions) | ||
type | 类型 | String | disabled /primary | disabled 为true 时为disabled ,否则为primary |
plain | 朴素 | Boolean | 最后一个按钮为false ,其它为true | |
round | 圆角 | Boolean | false | |
icon | 按钮图标 | String | ||
icon-svg | 按钮svg图标 | Boolean | false | |
inactive | 未激活 | Boolean | false | |
loading | 加载中状态 | Boolean | false |
ActionBar Slots
default
左侧文案内容
ActionBar Events
@click(event, action, index)
按钮点击事件
属性 | 说明 | 类型 |
---|---|---|
action | actions列表中被点击按钮对应的对象 | Object: ActionOptions |
index | actions列表中被点击按钮对应的对象的数组下标 | Number |