跳转到内容

Floating action button 浮动操作按钮组件

浮动操作按钮 (FAB) 通常用于在屏幕上执行一些主要的或是最为常见的操作。

浮动操作按钮组件出现在所有屏幕内容的前面,通常是以圆形的形状出现,并且中间有一个图标。 FAB 有两种类型:常规(regular)和扩展(extended)。

Only use a FAB if it is the most suitable way to present a screen's primary action. 在每个屏幕中,我们建议只有一个浮动操作按钮来表示最常见的操作。 在每个屏幕中,我们建议只有一个浮动操作按钮来表示最常见的操作。

简单的浮动操作按钮

<Fab color="primary" aria-label="add">
  <AddIcon />
</Fab>
<Fab color="secondary" aria-label="edit">
  <EditIcon />
</Fab>
<Fab variant="extended">
  <NavigationIcon sx={{ mr: 1 }} />
  Navigate
</Fab>
<Fab disabled aria-label="like">
  <FavoriteIcon />
</Fab>

Size 大小

By default, the size is large. By default, the size is large. By default, the size is large. Use the size prop for smaller floating action buttons.

<Fab size="small" color="secondary" aria-label="add">
  <AddIcon />
</Fab>
<Fab size="medium" color="secondary" aria-label="add">
  <AddIcon />
</Fab>
<Fab color="secondary" aria-label="add">
  <AddIcon />
</Fab>
<Fab variant="extended" size="small" color="primary" aria-label="add">
  <NavigationIcon sx={{ mr: 1 }} />
  Extended
</Fab>
<Fab variant="extended" size="medium" color="primary" aria-label="add">
  <NavigationIcon sx={{ mr: 1 }} />
  Extended
</Fab>
<Fab variant="extended" color="primary" aria-label="add">
  <NavigationIcon sx={{ mr: 1 }} />
  Extended
</Fab>

Animation 动画

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

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

您可以使用缩放动画(Zoom transition)来实现这个效果。 请注意,因为退出动画和进入动画都是同时触发的,所以我们需要使 enterDelay 方法,确保在新的浮动操作按钮进入之前,就已经执行完旧的那个的退出动作。

Item One

API