浮动操作按钮

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

浮动操作按钮显示在所有屏幕内容的前面，通常为圆形，中心带有一个图标。FAB 分为两种类型：常规型和扩展型。

仅当 FAB 是呈现屏幕主要操作的最合适方式时才使用它。建议每个屏幕仅使用一个组件来表示最常见的操作。

基本 FAB

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

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

按 Enter 开始编辑

尺寸

默认情况下，尺寸为 large。对于较小的浮动操作按钮，请使用 size 属性。

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

按 Enter 开始编辑

<Fab variant="extended" size="small" color="primary">
  <NavigationIcon sx={{ mr: 1 }} />
  Extended
</Fab>
<Fab variant="extended" size="medium" color="primary">
  <NavigationIcon sx={{ mr: 1 }} />
  Extended
</Fab>
<Fab variant="extended" color="primary">
  <NavigationIcon sx={{ mr: 1 }} />
  Extended
</Fab>

<Fab variant="extended" size="small" color="primary">
  <NavigationIcon sx={{ mr: 1 }} />
  Extended
</Fab>
<Fab variant="extended" size="medium" color="primary">
  <NavigationIcon sx={{ mr: 1 }} />
  Extended
</Fab>
<Fab variant="extended" color="primary">
  <NavigationIcon sx={{ mr: 1 }} />
  Extended
</Fab>

按 Enter 开始编辑

动画

默认情况下，浮动操作按钮以扩展的 Material 组件动画形式出现在屏幕上。

跨越多个横向屏幕（例如标签页屏幕）的浮动操作按钮应短暂消失，然后在操作更改时重新出现。

可以使用 Zoom 过渡效果来实现此目的。请注意，由于退出和进入动画同时触发，我们使用 enterDelay 以允许传出的浮动操作按钮动画在新的浮动操作按钮进入之前完成。

选项一

API

请参阅下面的文档，以获取此处提及的组件的所有属性和类的完整参考。

<Fab />