ふかしぎのReactさんぷるず

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

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

使用するための下準備

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

ButtonGroupの各プロパティの解説

MUIでのButtonGroupの扱い方の説明です。
ボタンをグループ化する機能です。
グループ全体の四隅は少し丸くなりますがボタン同士の間は丸くなりません。
const Button = MaterialUI.Button;
const ButtonGroup = MaterialUI.ButtonGroup;
ReactDOM.render(
<div>
<div>グループ化したボタン</div>
<ButtonGroup>
  <Button>ボタン1</Button>
  <Button>ボタン2</Button>
</ButtonGroup>
<div>ただ並べたボタン</div>
<Button variant="outlined">ボタン1</Button>
<Button variant="outlined">ボタン2</Button>
</div>
, document.getElementById('sample')
);

children

ButtonGroupのchildrenの使い方の説明です。
子要素を指定できます。
const Button = MaterialUI.Button;
const ButtonGroup = MaterialUI.ButtonGroup;
const Botan = <div><Button>ボタン1</Button><Button>ボタン2</Button></div>;
ReactDOM.render(
<ButtonGroup children={Botan} />
, document.getElementById('sample')
);

classes

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

color

ButtonGroupのcolorの使い方の説明です。
colorで色設定を行います。
使えるのはprimary、secondary、success、error、info、warning、それと自分で作った色です。
自分で色を作る場合は変数で定義しThemeProviderで適用します。
未設定のデフォルトはprimaryになります。
テーマカラーを設定していない場合はデフォルトの色がprimaryやsecondaryに自動的に設定されます。
const Button = MaterialUI.Button;
const ButtonGroup = MaterialUI.ButtonGroup;
const ThemeProvider = MaterialUI.ThemeProvider;
const createTheme   = MaterialUI.createTheme;
const tukuttaTheme = createTheme({
  palette: {
    tukuttaIro: {
      main: '#ff00ff',
    },
  },
});
ReactDOM.render(
<ThemeProvider theme={tukuttaTheme}>
  <div>
  <ButtonGroup color="primary">
    <Button>primary1</Button>
    <Button>primary2</Button>
  </ButtonGroup>
  </div>
  <div>
    <ButtonGroup color="secondary">
      <Button>secondary1</Button>
      <Button>secondary2</Button>
    </ButtonGroup>
  </div>
  <div>
    <ButtonGroup color="error">
      <Button>error1</Button>
      <Button>error2</Button>
    </ButtonGroup>
  </div>
  <div>
    <ButtonGroup color="info">
      <Button>info1</Button>
      <Button>info2</Button>
    </ButtonGroup>
  </div>
  <div>
    <ButtonGroup color="success">
      <Button>success1</Button>
      <Button>success2</Button>
    </ButtonGroup>
  </div>
  <div>
    <ButtonGroup color="warning">
      <Button>warning1</Button>
      <Button>warning2</Button>
    </ButtonGroup>
  </div>
  <div>
    <ButtonGroup color="tukuttaIro">
      <Button>tukuttaIro1</Button>
      <Button>tukuttaIro2</Button>
    </ButtonGroup>
  </div>
</ThemeProvider>
, document.getElementById('sample')
);

component

ButtonGroupのcomponentの使い方の説明です。
ButtonGroupを表示する際のおおもとの要素を設定できます。
サンプルの1つ目はDIV要素を指定しています。
なにも設定しないとグループはDIV要素で囲まれるためこれは未設定と同じ状態になります。
2つ目はB要素を指定していますが見た目上は違いがありません。開発ツールなどで生成されたHTMLを確認するとB要素でグループが作られていることがわかります。
const Button = MaterialUI.Button;
const ButtonGroup = MaterialUI.ButtonGroup;
ReactDOM.render(
<div>
<ButtonGroup component="div">
  <Button>DIV1</Button>
  <Button>DIV2</Button>
</ButtonGroup>
<ButtonGroup component="b">
  <Button>B1</Button>
  <Button>B2</Button>
</ButtonGroup>
</div>
, document.getElementById('sample')
);

disabled

ButtonGroupのdisabledの使い方の説明です。
trueにするとグループを非活性化します。中にあるボタンも非活性化されます。
全体が薄い灰色になります。
const Button = MaterialUI.Button;
const ButtonGroup = MaterialUI.ButtonGroup;
ReactDOM.render(
<ButtonGroup disabled={true}>
  <Button>ボタン1</Button>
  <Button>ボタン2</Button>
</ButtonGroup>
, document.getElementById('sample')
);

disableElevation

ButtonGroupのdisableElevationの使い方の説明です。
影を付けて立体的に見えるようにするかの設定です。
trueにすると影を付けなくなります。
const Button = MaterialUI.Button;
const ButtonGroup = MaterialUI.ButtonGroup;
ReactDOM.render(
<div>
<ButtonGroup disableElevation={true} variant="contained">
  <Button>影なし1</Button>
  <Button>影なし2</Button>
</ButtonGroup>
<ButtonGroup disableElevation={false} variant="contained">
  <Button>影あり1</Button>
  <Button>影あり2</Button>
</ButtonGroup>
</div>
, document.getElementById('sample')
);

disableFocusRipple

ButtonGroupのdisableFocusRippleの使い方の説明です。
キーボードで移動しフォーカスした際の波模様の効果を無くします。
キーボードのTabキーを押して違いを確認してください。
disableFocusRippleをtrueにした方はタブキーで移動した際に波模様のアニメーションが無くなっています。
「波無し1」ボタンをクリックした後にタブキーを押すと違いが確認できます。
シフトキー+タブキーで前に戻れます。シフトキー+タブキーとタブキーを繰り返して移動した際の違いを確認できます。
const Button = MaterialUI.Button;
const ButtonGroup = MaterialUI.ButtonGroup;
ReactDOM.render(
<div>
<ButtonGroup disableFocusRipple={true} variant="contained">
  <Button>波なし1</Button>
  <Button>波なし2</Button>
</ButtonGroup>
<ButtonGroup disableFocusRipple={false} variant="contained">
  <Button>波あり1</Button>
  <Button>波あり2</Button>
</ButtonGroup>
</div>
, document.getElementById('sample')
);

disableRipple

ButtonGroupのdisableRippleの使い方の説明です。
ボタンをクリックしたときにぽわんと波模様が出すか出さないかの設定をします。
設定できる値はtrueとfalseです。
falseにすると波模様が出なくなります。
未設定のデフォルトはfalseです。
サンプルの1つ目はtrueなのでクリックしても波模様が出なくなります。
2つ目はfalseなので波模様が出ます。
const Button = MaterialUI.Button;
const ButtonGroup = MaterialUI.ButtonGroup;
ReactDOM.render(
<div>
<ButtonGroup disableRipple={true}>
  <Button>波模様なし1</Button>
  <Button>波模様なし2</Button>
</ButtonGroup>
<ButtonGroup disableRipple={false}>
  <Button>波模様あり1</Button>
  <Button>波模様あり2</Button>
</ButtonGroup>
</div>
, document.getElementById('sample')
);

fullWidth

ButtonGroupのfullWidthの使い方の説明です。
fullWidthは横幅いっぱいに広げるかを設定します。
デフォルトはfalseです。
const Button = MaterialUI.Button;
const ButtonGroup = MaterialUI.ButtonGroup;
ReactDOM.render(
<div>
<ButtonGroup fullWidth={true} variant="contained">
  <Button>横幅いっぱい1</Button>
  <Button>横幅いっぱい2</Button>
</ButtonGroup>
<ButtonGroup fullWidth={false} variant="contained">
  <Button>通常1</Button>
  <Button>通常2</Button>
</ButtonGroup>
</div>
, document.getElementById('sample')
);

orientation

ButtonGroupのorientationの使い方の説明です。
表示する方向を縦横どちらか設定できます。
設定できる値はhorizontalとverticalです。
未設定のデフォルトはverticalです。
サンプルの1つ目はのhorizontal
サンプルの2つ目はのvertical
サンプルの3つ目は未設定なのでverticalとなり2つ目と同じになります。
const Button = MaterialUI.Button;
const ButtonGroup = MaterialUI.ButtonGroup;
ReactDOM.render(
<div>
  <div>
  <ButtonGroup orientation="horizontal">
    <Button>横1</Button>
    <Button>横2</Button>
  </ButtonGroup>
  </div>
  <div>
  <ButtonGroup orientation="vertical">
    <Button>縦1</Button>
    <Button>縦2</Button>
  </ButtonGroup>
  </div>
  <div>
  <ButtonGroup>
    <Button>未設定1</Button>
    <Button>未設定2</Button>
  </ButtonGroup>
  </div>
</div>
, document.getElementById('sample')
);

size

ButtonGroupのsizeの使い方の説明です。
ButtonGroupの大きさを設定できます。
smallかmediumかlarge、もしくは文字列を指定できます。
デフォルトはmediumです。
const Button = MaterialUI.Button;
const ButtonGroup = MaterialUI.ButtonGroup;
ReactDOM.render(
<div>
<ButtonGroup size="small">
  <Button>小1</Button>
  <Button>小2</Button>
</ButtonGroup>
<ButtonGroup size="medium">
  <Button>中1</Button>
  <Button>中2</Button>
</ButtonGroup>
<ButtonGroup size="large">
  <Button>大1</Button>
  <Button>大2</Button>
</ButtonGroup>
<ButtonGroup>
  <Button>未設定1</Button>
  <Button>未設定2</Button>
</ButtonGroup>
</div>
, document.getElementById('sample')
);

sx

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

variant

ButtonGroupのvariantの使い方の説明です。
バリアントで見た目を変えられます。
contained、outlined、text、そして定義した文字列が使えます。
containedは色付きです。outlinedは枠線のみです。textは枠線無しです。
デフォルトはoutlinedです。
極端な話variantはCSSの記述の違いなのでCSSを独自定義しそれをここで指定することができてます。説明のために無理やりしていますがこのやり方はあまりよろしくありません。
const Button = MaterialUI.Button;
const ButtonGroup = MaterialUI.ButtonGroup;
ReactDOM.render(
<div>
  <div>
  <ButtonGroup variant="contained">
    <Button>contained1</Button>
    <Button>contained2</Button>
  </ButtonGroup>
  </div>
  <div>
  <ButtonGroup variant="outlined">
    <Button>outlined1</Button>
    <Button>outlined2</Button>
  </ButtonGroup>
  </div>
  <div>
  <ButtonGroup variant="text">
    <Button>text1</Button>
    <Button>text2</Button>
  </ButtonGroup>
  </div>
  <div>
  <ButtonGroup>
    <Button>未設定1</Button>
    <Button>未設定2</Button>
  </ButtonGroup>
  </div>
  <div>
  <ButtonGroup variant="tukuttaStyle">
    <Button>独自1</Button>
    <Button>独自2</Button>
  </ButtonGroup>
  </div>
</div>
, document.getElementById('sample')
);
<style>.MuiButtonGroup-tukuttaStyle {  border : 10px solid #ff0000;}</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
戻る

全体目次