assignment_late
为什么捐赠
travel_explore
API 浏览器
widgets
Vue 组件
Ajax Bar Ajax 进度条
Avatar 头像
Badge 徽标
Banner 横幅
Bar 工具栏
Breadcrumbs 面包屑
Card 卡片
Carousel 轮播
Chat Message 聊天消息
Chip 纸片
Circular Progress 环形进度条
Color Picker 颜色选择器
Dialog 对话框
Editor WYSIWYG 编辑器
Expansion Item 展开项
Floating Action Button 浮动操作按钮
Icon 图标
Img 图片
Infinite Scroll 无限滚动
Inner Loading 内部加载
Intersection 交叉观察
Knob 旋钮
Linear Progress 线性进度条
List & List Items 列表与列表项
Markup Table 标记表格
Menu 菜单
No SSR
Observers 观察者
Pagination 分页
Parallax 视差
Popup Edit 弹出编辑
Popup Proxy 弹出代理
Pull to Refresh 下拉刷新
Rating 评分
Responsive 响应式
Scroll Area 滚动区域
Separator 分隔线
Skeleton 骨架屏
Slide Item 滑动项
Slide Transition 滑动过渡
Space 间隔
Spinners 加载动画
Splitter 分割面板
Stepper 步骤条
Table 表格
Tabs 标签页
Tab Panels 标签面板
Timeline 时间线
Toolbar 工具栏
Tooltip 提示框
Tree 树形控件
Uploader 上传器
Video 视频
Virtual Scroll 虚拟滚动
alternate_email
联系站长
浮动操作按钮 (FAB) 代表应用程序中的主要操作。但是,它不仅限于一个单一的行动。它也可以包含任意数量的子操作。更重要的是,它还可以在页面或布局中内联使用。
注意,不需要 QLayout 您也可以使用 FAB。
正在加载 QFab API...
正在加载 QFabAction API...
用法
FAB 有两种类型:可展开的(有子操作)和不可展开的。
TIP
关于完整的选项列表,请参考 API 卡片部分。
不可展开的
如果您想要一个不可展开的 FAB,您只需要一个圆形按钮 - 如果在 QLayout 上使用,则包装在 QPageSticky 中。
不可展开的
可展开的
可展开的
内部标签
内部标签
切换内部标签
当标签是内部的,并且您的 QFab 垂直打开(向上或向下)时,您还可以选择如何垂直对齐子操作:
垂直操作对齐
外部标签
默认情况下,当主 QFab(不是子操作)上的标签是外部的时,它只在 QFab 打开时显示。但是,您可以通过为 hide-label 属性设置布尔值来覆盖它。
外部标签
自定义样式的外部标签
切换外部标签
隐藏图标
如果我们隐藏图标(通过特定属性),我们至少应该使用内部标签:
隐藏图标
内边距
QFab 的默认内边距是 “md”,QFabAction 的默认内边距是 “sm”。但是,您可以使用 padding 属性来自定义它(也接受 CSS 单位):
调整内边距
方形样式
方形样式
插槽 v2.4+
注意下面 QFab 的插槽和 QFabAction 的插槽:
插槽:icon, active-icon 和 label
与 QPageSticky 一起使用
与 QPageSticky 一起使用
可拖动的
下面是一个使用 TouchPan 使 QFab 可以在屏幕上拖动的很好的例子。
可拖动的
发现错误?在浏览器中编辑此页
1. Introduction
2. QFab API
3. 用法
3.1. 不可展开的
3.2. 可展开的
3.3. 内部标签
3.4. 外部标签
3.5. 隐藏图标
3.6. 内边距
3.7. 方形样式
3.8. 插槽
3.9. 与 QPageSticky 一起使用
3.10. 可拖动的