ふかしぎのReactさんぷるず

Fabの解説 Componet API - MUI v5 API - Reactさんぷるず

最終更新 2022/02/16
MUI v5の各機能の説明です。
対象のMUIのバージョンは v5.4.1 です。
ここでは初心者向けの基本的な説明をしています。

使用するための下準備

お約束です。取り込まないと使えません。
インポートならば
import { Fab } from '@mui/material';
CDNで使いたいのなら<script>でMUIを読み込んだ後に
const Fab  = MaterialUI.Fab;
で使用できるようになります。
CDNでの詳しいやり方はこちらに移動してください。

Fabの各プロパティの解説

MUIでのFabの扱い方の説明です。
よくある画面右下にあり押すとメニューが表示される常に前面に表示されている浮いている操作ボタンです。
Floating Action Buttonを略してFABと言っています。
const Fab = MaterialUI.Fab;
ReactDOM.render(
<Fab>FAB</Fab>
, document.getElementById('sample')
);
残念ながら画面の隅に表示する機能はありません
自分で実装する必要があります、
CSSのpositonを使うのがよくあるやり方です。
.fabHidariUeButton {
  position: absolute;
  right: 10px;
  top: 10px;
}
positionはabsoluteでもfixedでも似たような感じになりますが違いがあります。
absoluteはabsoluteと言いながらrelativeです。
なにをいってるんだこいつは、という感じですがpositionが規定値(static)ではない親要素が基準になります。それがなければ遡って最上位を基準にします。そのためfixedと違いがなくなり混同して使ってしまうときがあります。
fixedは完全に最上位に対しての基準になります。ただ画面の隅にFABを表示したいのならこちらを使用するのがいいでしょう。
サンプルの「ABS(olute)右上」は基準の所から右10px下10px移動したところに表示されます。
サンプルの「FIX(ed)右上」はこの画面の右上を基準に右10px下10px移動したところに表示されます。
const Fab = MaterialUI.Fab;
ReactDOM.render(
<div>
  <div style={{"position":"relative","marginBottom":"50px"}}>ここでrelativeを指定したので子要素absoluteのposition基準になる
    <div style={{"position":"absolute","right":"10px","top":"10px",}}>
      <Fab>abs右上</Fab>
    </div>
  </div>
  <div style={{"position":"relative"}}>
    <div style={{"position":"fixed","right":"10px","top":"10px",}}>
      <Fab href="#positionFixed">fix右上</Fab>
    </div>
  </div>
</div>
, document.getElementById('sample')
);

children

Fabのchildrenの使い方の説明です。
表示するものをノードで渡せます。
ふぁぶ1は変数。ふぁぶ2はアロー関数を渡しています。
const Fab = MaterialUI.Fab;
const TukuttaDiv1 = <div>ふぁぶ1</div>;
const TukuttaDiv2 = () => <div>ふぁぶ2</div>;
ReactDOM.render(
<div>
  <Fab children={TukuttaDiv1} />
  <Fab children={TukuttaDiv2()} />
</div>
, document.getElementById('sample')
);

classes

Fabのclassesの使い方の説明です。
CSSの設定を上書きします。

color

Fabのcolorの使い方の説明です。
ボタンの色設定はcolorで行います。
使えるのはprimary、secondary、success、error、info、warning、それと自分で作った色です。
自分で色を作る場合は変数で定義しThemeProviderで適用します。
未設定のデフォルトはdefaultになります。
defaultはテーマのモードに依存します。
モードがライト(mode:light)の場合はgrey[100]が、モードがダーク(mode:dark)の場合grey[900]が使用されます。
テーマカラーを設定していない場合はデフォルトの色がprimaryやsecondaryに自動的に設定されます。
const ThemeProvider = MaterialUI.ThemeProvider;
const Fab = MaterialUI.Fab;
const createTheme = MaterialUI.createTheme;
const tukuttaTheme = createTheme({
  palette: {
    tukuttaIro: {
      main: '#ff00ff',
    },
  },
});
ReactDOM.render(
<div>
<ThemeProvider theme={tukuttaTheme}>
  <Fab color="primary">primary</Fab>
  <Fab color="secondary">secondary</Fab>
  <Fab color="success">success</Fab>
  <Fab color="error">error</Fab>
  <Fab color="info">info</Fab>
  <Fab color="warning">warning</Fab>
  <Fab>default</Fab>
  <Fab color="tukuttaIro">tukuttaIro</Fab>
</ThemeProvider>
</div>
, document.getElementById('sample')
);

component

Fabのcomponentの使い方の説明です。
Fabを表示する際のおおもとの要素を設定できます。
未設定のデフォルトはbuttonになります。
サンプルの1つ目はDIV要素を指定しています。
2つ目はあまりよろしくありませんがI要素を指定しているのでブラウザーによっては斜字で表示されているはずです。
const Fab = MaterialUI.Fab;
ReactDOM.render(
<div>
<Fab component="div">fab1</Fab>
<Fab component="i">fab2</Fab>
</div>
, document.getElementById('sample')
);

disabled

Fabのdisabledの使い方の説明です。
Fabを不使用にするにはdisabledをtrueに設定します。
desabledにすると全体が灰色になりクリックしたときのアニメーションがなくなります。
わかりやすく「disabled={true}」と書いていますが「disabled」で機能します。
ブール値を渡さなければいけないため「disabled="false"」だと文字列を渡したことになり正しく機能しません。
const Fab = MaterialUI.Fab;
ReactDOM.render(
<div>
<Fab disabled={true}>true</Fab>
<Fab disabled={false}>false</Fab>
</div>
, document.getElementById('sample')
);

disableFocusRipple

FabのdisableFocusRippleの使い方の説明です。
キーボードのTABキーで移動した際に中心から波のアニメーションをするかの設定です。
TABキーを連打して移動してください。
FALSEのほうだけアニメーションが発生します。
キーボードに関する設定なのでマウスで操作している時には違いが発生しません。
const Fab = MaterialUI.Fab;
ReactDOM.render(
<div>
<Fab disableFocusRipple={false} tabIndex={1}>false</Fab>
<Fab disableFocusRipple={true} tabIndex={2}>true</Fab>
<Fab disableFocusRipple={false} tabIndex={3}>false</Fab>
<Fab disableFocusRipple={true} tabIndex={4}>true</Fab>
<Fab disableFocusRipple={false} tabIndex={5}>false</Fab>
</div>
, document.getElementById('sample')
);

disableRipple

FabのdisableRippleの使い方の説明です。
波が広がっていくアニメーションをするかの設定です。
FALSEのほうだけアニメーションが発生します。
disableFocusRippleと違いキーボードでもマウスでも有効になります。
const Fab = MaterialUI.Fab;
ReactDOM.render(
<div>
<Fab disableRipple={true}>true</Fab>
<Fab disableRipple={false}>false</Fab>
</div>
, document.getElementById('sample')
);

href

Fabのhrefの使い方の説明です。
これを使用するとA要素をおおもとにしてFABを作成します。
component="A"が自動的に適用されているかたちになります。
その際にリンク先のhref属性の設定ができます。
const Fab = MaterialUI.Fab;
ReactDOM.render(
<Fab href="/">TOP移動</Fab>
, document.getElementById('sample')
);

size

Fabのsizeの使い方の説明です。
Fabの大きさを設定します。
小さいsmall、標準medium、大きいlargeがあります。
未設定のデフォルトはlargeです。
const Fab = MaterialUI.Fab;
ReactDOM.render(
<div>
<Fab size="small">small</Fab>
<Fab size="medium">medium</Fab>
<Fab size="large">large</Fab>
<Fab>default</Fab>
</div>
, document.getElementById('sample')
);

sx

AvatarGroupのsxの使い方の説明です。が他のコンポーネントと共通のプロパティのため別ページにまとめました。
sxの解説に移動してください。

variant

Fabのvariantの使い方の説明です。
circular、extended、それと独自定義した文字列が使えます。
circularは丸く
extendedは書かれている文字列によって伸びます
未設定のデフォルトはcircularになります。
極端な話variantはCSSの記述の違いなのでCSSを独自定義しそれをここで指定することができてます。説明のために無理やりしていますがこのやり方はあまりよろしくありません。
const Fab = MaterialUI.Fab;
ReactDOM.render(
<div>
<Fab variant="circular">circular</Fab>
<Fab variant="extended">extended</Fab>
<Fab>未設定</Fab>
<Fab variant="circular">circularたかあしがに</Fab>
<Fab variant="extended">extendedたかあしがに</Fab>
<Fab variant="tukuttaStyle">自作</Fab>
</div>
, document.getElementById('sample')
);
<style>
.MuiFab-tukuttaStyle {
  border: 5px solid #ff0000;
  border-radius: 30%;
}
</style>
menu

React 目次

最初に現在のReactについて
世界一シンプルなサンプル
React Router v6
React Router v6 API
MUI v5
sxの解説
マテリアルアイコンの解説
Autocomplete
Avatar
AvatarGroup
Badge
Button
ButtonGroup
Checkbox
Chip
Collapse
Divider
Floating Action Button(Fab)
Fade
FormControlLabel
Grow
Icon
List
ListItem
ListItemAvatar
ListItemButton
ListItemIcon
ListItemSecondaryAction
ListItemText
ListSubheader
Radio
RadioGroup
Rating
Select
Slide
Slider
Switch
TextField
ToggleButton
ToggleButtonGroup
Zoom
エラー対処
HTMl select
戻る

全体目次