为什么捐赠
API 资源管理器
底部表单插件

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

底部表单始终显示在页面上的任何其他组件之上,并且必须将其关闭才能与底层内容进行交互。当它被触发时,页面其余部分会变暗,以便更加关注底部表单选项。

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

正在加载底部表单 API...
安装

// quasar.config file

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

用法

在 Vue 文件之外

import { BottomSheet } from 'quasar'
BottomSheet.create({ ... }) // returns Object

// inside of a Vue file
import { useQuasar } from 'quasar'
setup () {
  const $q = useQuasar()
  $q.bottomSheet({ ... }) // returns Object
}

提示

当用户点击手机/平板电脑的后退按钮(仅适用于 Cordova 应用)时,操作表单将自动关闭。

此外,在桌面浏览器上,按ESCAPE键也会关闭操作表单。

列表和网格



强制暗模式



提示

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