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. 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

<Fab />