ふかしぎのReactさんぷるず

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

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

使用するための下準備

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

ListItemButtonの各プロパティの解説

MUIでのListItemButtonの扱い方の説明です。
リストを作った時に各項目にボタンのような感じにします。
これはクリックした時や、マウスオーバーしたときに変化が起こります。
const List = MaterialUI.List;
const ListItem = MaterialUI.ListItem;
const ListItemButton = MaterialUI.ListItemButton;
ReactDOM.render(
<List>
  <ListItemButton>
    <div>リスト1。ボタン効果</div>
  </ListItemButton>
  <ListItem>
    <div>リスト2。何もない場合</div>
  </ListItem>
</List>
, document.getElementById('sample') 
);

alignItems

ListItemButtonのalignItemsの使い方の説明です。
最終的に生成されるCSSのalign-itemsの設定ができます。
設定できる文字列はcenter、flex-startです。
未設定のデフォルトはcenterです。
フレックスコンテナーの位置を設定するものです。
サンプルの1つ目はcenterにしてるので高さが異なる場合は高さが小さいほうが中央になるように表示されます。
2つ目はflex-startなので高さが小さいほうが最初の方、つまり上辺に寄ります。
const List = MaterialUI.List;
const ListItemButton = MaterialUI.ListItemButton;
ReactDOM.render(
<List>
  <ListItemButton alignItems="center" style={{"border":"1px solid #000"}}>
    <div style={{"width":"50px"}}>これは複数行になる</div>
    <div>(真ん中)</div>
  </ListItemButton>
  <ListItemButton alignItems="flex-start" style={{"border":"1px solid #000"}}>
    <div style={{"width":"50px"}}>これは複数行になる</div>
    <div>(上の方)</div>
  </ListItemButton>
</List>
, document.getElementById('sample') 
);

autoFocus

ListItemButtonのautoFocusの使い方の説明です。
オートフォーカスです。
ページが表示される際にここが選択済み状態になります。
この場合は薄い灰色の背景色になります。
このページを再表示して画面内をどこもクリックせずにスクロールしてこの位置を表示すると薄い灰色になっていることが分かります。
※注意してください。ブール値を渡さなければいけないためautoFocus="true"では正しくありません。
これは文字列のtrueを渡しているだけでブール値のtrueを渡してません。
書き方を省略できます。autoFocusと書くだけでautoFocus={true}と同じ意味になります。
未設定のデフォルトはfalseになります。
const List = MaterialUI.List;
const ListItemButton = MaterialUI.ListItemButton;
ReactDOM.render(
<List>
  <ListItemButton autoFocus={true}>
    <div>オートフォーカス</div>
  </ListItemButton>
</List>
, document.getElementById('sample') 
);

children

ListItemButtonのchildrenの使い方の説明です。
子要素を設定できます。
ノードを設定できるので文字列でなくても構いません。
const List = MaterialUI.List;
const ListItemButton = MaterialUI.ListItemButton;
ReactDOM.render(
<List>
  <ListItemButton children="文字列でチルドレン" />
  <ListItemButton children={<div>DIVでチルドレン</div>} />
</List>
, document.getElementById('sample') 
);

classes

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

component

ListItemButtonのcomponentの使い方の説明です。
生成する際の要素を設定できます。
サンプルの1つ目は生成する際にB要素を設定しているので太字で生成されます。
デフォルトでDIV要素が設定されます。
サンプルではB要素を指定したのでB要素で作られていることが分かります。
デフォルトのListItemButtonはおおもとがDIVで生成されます。
const List = MaterialUI.List;
const ListItemButton = MaterialUI.ListItemButton;
ReactDOM.render(
<List>
  <ListItemButton component="b" >
    <div>ボールドで太字</div>
  </ListItemButton>
  <ListItemButton>
    <div>普通の文字</div>
  </ListItemButton>
</List>
, document.getElementById('sample') 
);

dense

ListItemButtonのdenseの使い方の説明です。
denseは直訳で密集です。
余裕を持った幅で表示するかの設定です。
trueにしたほうは若干上下の幅が少なくなっています。
※注意してください。ブール値を渡さなければいけないためdense="true"では正しくありません。
これは文字列のtrueを渡しているだけでブール値のtrueを渡してません。
書き方を省略できます。denseと書くだけでdense={true}と同じ意味になります。
未設定のデフォルトはfalseになります。
const List = MaterialUI.List;
const ListItemButton = MaterialUI.ListItemButton;
ReactDOM.render(
<List>
  <ListItemButton dense={true} style={{"border":"1px solid #000"}}>
    <div>denseがtrue</div>
  </ListItemButton>
  <ListItemButton dense={false} style={{"border":"1px solid #000"}}>
    <div>denseがfalse</div>
  </ListItemButton>
  <ListItemButton dense style={{"border":"1px solid #000"}}>
    <div>dense(省略形)</div>
  </ListItemButton>
</List>
, document.getElementById('sample') 
);

disabled

ListItemButtonのdisabledの使い方の説明です。
使用・不使用の設定です。
ブール値で設定します。
trueにすると表示が薄い灰色になり、マウスクリックなどの効果がなくなります。
※注意してください。ブール値を渡さなければいけないためdisabled="true"では正しくありません。
これは文字列のtrueを渡しているだけでブール値のtrueを渡してません。
書き方を省略できます。disabledと書くだけでdisabled={true}と同じ意味になります。
未設定のデフォルトはfalseになります。
const List = MaterialUI.List;
const ListItemButton = MaterialUI.ListItemButton;
ReactDOM.render(
<List>
  <ListItemButton disabled={true}>
    <div>disabledがtrue</div>
  </ListItemButton>
  <ListItemButton disabled={false}>
    <div>disabledがfalse</div>
  </ListItemButton>
  <ListItemButton disabled >
    <div>disabled(省略形)</div>
  </ListItemButton>
</List>
, document.getElementById('sample') 
);

disableGutters

ListItemButtonのdisableGuttersの使い方の説明です。
ガターです。ボウリングをするときのガターと同じです。側溝を意味します。(ボウリングでガーターと言ってると恥ずかしい人になります。気を付けましょう。ボーリングと言ってる人も恥ずかしいので気を付けましょう。それは杭で穴を掘って調査するやつです。)
左右の余白の設定です。
ブール値で設定します。
trueにすると左右の余白が無くなります。
※注意してください。ブール値を渡さなければいけないためdisableGutters="true"では正しくありません。
これは文字列のtrueを渡しているだけでブール値のtrueを渡してません。
書き方を省略できます。disableGuttersと書くだけでdisableGutters={true}と同じ意味になります。
未設定のデフォルトはfalseになります。
const List = MaterialUI.List;
const ListItemButton = MaterialUI.ListItemButton;
ReactDOM.render(
<List>
  <ListItemButton disableGutters={true}>
    <div>disableGuttersがtrue</div>
  </ListItemButton>
  <ListItemButton disableGutters={false}>
    <div>disableGuttersがfalse</div>
  </ListItemButton>
  <ListItemButton disableGutters >
    <div>disableGutters(省略形)</div>
  </ListItemButton>
</List>
, document.getElementById('sample') 
);

divider

ListItemButtonのdividerの使い方の説明です。
下に薄い灰色の区切り線を付け加えます。
ブール値で設定します。
trueにすると区切り線が付きます。
※注意してください。ブール値を渡さなければいけないためdivider="true"では正しくありません。
これは文字列のtrueを渡しているだけでブール値のtrueを渡してません。
書き方を省略できます。dividerと書くだけでdivider={true}と同じ意味になります。
未設定のデフォルトはfalseになります。
const List = MaterialUI.List;
const ListItemButton = MaterialUI.ListItemButton;
ReactDOM.render(
<List>
  <ListItemButton divider={true}>
    <div>dividerがtrue。この下に線がある</div>
  </ListItemButton>
  <ListItemButton divider={false}>
    <div>dividerがfalse。この下には線が無い</div>
  </ListItemButton>
  <ListItemButton divider >
    <div>divider(省略形)。この下には線がある</div>
  </ListItemButton>
</List>
, document.getElementById('sample') 
);

focusVisibleClassName

ListItemButtonのfocusVisibleClassNameの使い方の説明です。
キーボードでフォーカスが当たった時に適用するCSSのクラス名を設定できます。
キーボードのみなのでマウスでクリックしても適用されません。
サンプルの「ダミー1(ここをクリック)」をクリックした後に、キーボードのTabキーを押し次にフォーカスを当ててください。focusVisibleClassNameが機能して表示されている文字が大きくなります。
Tabキーでフォーカスを進めたり、Shiftキー+Tabキーでフォーカスを戻したりすると違いを確認できます。
const List = MaterialUI.List;
const ListItemButton = MaterialUI.ListItemButton;
ReactDOM.render(
<List>
  <ListItemButton>
    <div>ダミー1(ここをクリック)</div>
  </ListItemButton>
  <ListItemButton focusVisibleClassName="bigFont">
    <div>focusVisibleClassName</div>
  </ListItemButton>
</List>
, document.getElementById('sample') 
);
<style>
.bigFont {font-size: 200%;}
</style>

selected

ListItemButtonのselectedの使い方の説明です。
選択済み状態にするかの設定です。
ブール値で設定します。
trueにすると選択済み状態になり薄く色が付きます。この色はテーマのprimary.mainです。ですがアルファ値が1ではないのでとても薄い色になっています。
※注意してください。ブール値を渡さなければいけないためselected="true"では正しくありません。
これは文字列のtrueを渡しているだけでブール値のtrueを渡してません。
書き方を省略できます。selectedと書くだけでselected={true}と同じ意味になります。
未設定のデフォルトはfalseになります。
const List = MaterialUI.List;
const ListItemButton = MaterialUI.ListItemButton;
ReactDOM.render(
<List>
  <ListItemButton selected={true}>
    <div>selectedがtrue</div>
  </ListItemButton>
  <ListItemButton selected={false}>
    <div>selectedがfalse</div>
  </ListItemButton>
  <ListItemButton selected >
    <div>selected(省略形)</div>
  </ListItemButton>
</List>
, document.getElementById('sample') 
);

sx

ListItemButtonのsxの使い方の説明です。
他のコンポーネントと共通のプロパティのため別ページにまとめました。
sxの解説に移動してください。
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
戻る

全体目次