跳转到内容

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>

Size 大小

Use the size prop for larger or smaller floating action buttons.

Animation

默认情况下,浮动操作按钮会以展开的动画出现在屏幕上。

跨越多个横向屏幕(例如标签式屏幕)的浮动操作按钮应该短暂消失, 然后如果其动作改变则重新出现。

可以使用缩放转换来实现此目的。 注意,既然退出和进入动画同时被触发,我们使用enterDelay来允许旧的浮动动作按钮动画在新的按钮进入之前完成。

Item One

API