Floating Action Button 悬浮操作按钮
A floating action button (FAB) performs the primary, or most common, action on a screen.
Floating Action Button
A floating action button appears in front of all screen content, typically as a circular shape with an icon in its center. FAB有两种类型:常规的和扩展的。
只使用FAB是最适合呈现屏幕主要操作的方法。
在每个屏幕中,我们建议只有一个浮动操作按钮来表示最常见的操作。
<Fab color="primary" aria-label="add">
<AddIcon />
</Fab>
<Fab color="secondary" aria-label="edit">
<EditIcon />
</Fab>
<Fab variant="extended">
<NavigationIcon className={classes.extendedIcon} />
Navigate
</Fab>
<Fab disabled aria-label="like">
<FavoriteIcon />
</Fab>
Animation
默认情况下,浮动操作按钮会以展开的动画出现在屏幕上。
跨越多个横向屏幕(例如标签式屏幕)的浮动操作按钮应该短暂消失, 然后如果其动作改变则重新出现。
可以使用缩放转换来实现此目的。 注意,既然退出和进入动画同时被触发,我们使用enterDelay
来允许旧的浮动动作按钮动画在新的按钮进入之前完成。