按钮: 悬浮响应按钮
v-btn
组件可以用作悬浮响应按钮;它可以为应用提供最主要的操作。通过与v-speed-dial
组件的组合使用, 你可以为你的用户创建一系列的功能集。
用例
Floating action buttons can be attached to material to signify a promoted action in your application. The default size will be used in most cases, whereas the small
variant can be used to maintain continuity with similar sized elements.
API
给元素设置绝对定位
将组件向底部对齐
Speed-dial显示的方向. 可设置的值有 top
, bottom
, left
, right
.
给元素设置固定定位
将组件向左边对齐
设置过渡模式(不适用于“过渡组(transition-group)”)
悬浮时开启Speed-dial
设置过渡原点
将组件向右边对齐
将组件向顶部对齐
设置组件过渡效果,可以是内置的过渡配置或者是您自己的配置的其中一个。
控制可见性
示例
小型按钮
为了达到更好的视觉效果,我们可以使用小型按钮以适配列表的头像。
显示时的动画
首次显示时,悬浮响应按钮应当使用一个动画效果加载到屏幕上,这里我们使用v-fab-transition
和v-show来演示动画效果,你也可以使用任何Vuetify内置的效果或者你自定义的。
横向屏幕切换
当你的按钮需要改变默认的操作时,这里推荐使用一个过渡效果来彰显它的变化(如下进行标签页切换时,给悬浮响应按钮一个过渡动画)。我们是通过绑定key
属性到数据块来正确地发送响应变化信号至Vue过渡系统。当你使用自定义过渡效果时,请确保已经设置mode
属性为out-in。
悬浮响应按钮用于v-Speed-dial组件
v-speed-dial
组件为悬浮响应按钮提供了强大的api,你可以尽情定制你想要的效果。