底部对话框插件

底部对话框从设备屏幕的底部边缘向上滑动,并显示一组可以确认或取消操作的选项。 底部对话框有时可以用作菜单的替代方法,但是,不应将它们用于导航。

底部对话框始终显示在页面上任何其他组件的上方,并且必须将其消除才能与基础内容进行交互。 触发该选项后,页面的其余部分将变暗,以使焦点更多地放在底部对话框选项上。

底部对话框可以显示为列表或网格,带有图标或头像。 它们既可以用作Vue文件模板中的组件,也可以用作全局可用的方法。

BottomSheet API

安装


// quasar.config.js

return {
  framework: {
    plugins: [
      'BottomSheet'
    ]
  }
}

用法

// 在Vue文件之外
import { BottomSheet } from 'quasar'
BottomSheet.create({ ... }) // 返回对象

// 在Vue文件之中
import { useQuasar } from 'quasar'
setup () {
  const $q = useQuasar()
  $q.bottomSheet({ ... }) // 返回对象
}

TIP

当用户点击电话/平板电脑后退按钮(仅适用于Cordova应用程序)时,底部对话框将自动关闭。

同样,在桌面浏览器上,按`ESCAPE’键也会关闭底部对话框。







TIP

有关选项的详尽列表,请检查API部分。