Floating action button
A floating action button (FAB) performs the primary, or most common, action on a screen.
フローティング アクションボタン
A floating action button appears in front of all screen content, typically as a circular shape with an icon in its center. FABには次の二つのタイプがあります: regular extended
FABを使用するのは、それが画面の主なアクションを提示するための最も適切な方法である場合だけにしてください。
最も一般的なアクションを表すには、画面ごとに1つのフローティングアクションボタンのみをお勧めします。
<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を使用することに注意してください。