ふかしぎのReactさんぷるず

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

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

使用するための下準備

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

Listの各プロパティの解説

MUIでのListの扱い方の説明です。
リストを作ります。
リストの内容はListItemButtonコンポーネントで作ればリッククやマウスオーバーしたときにいい感じに色が変わるのでこれを使用するのが一般的です。
アバターやアイコンを使用する場合はその子要素にさらにListItemAvatarコンポーネントListItemIconコンポーネントを使用します。
const List = MaterialUI.List;
const ListItem = MaterialUI.ListItem;
const ListItemButton = MaterialUI.ListItemButton;
const ListItemAvatar = MaterialUI.ListItemAvatar;
const ListItemIcon = MaterialUI.ListItemIcon;
const ListItemText = MaterialUI.ListItemText;
const Avatar = MaterialUI.Avatar;
const createSvgIcon = MaterialUI.createSvgIcon;
const TukuttaIcon = createSvgIcon(<path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4-8 5-8-5V6l8 5 8-5v2z" />,'Mail');
ReactDOM.render(
<List>
  <ListItemButton>
    <ListItemAvatar>
      <Avatar alt="サンプルアバター" src="./fukasigi_logo.png" />
    </ListItemAvatar>
  </ListItemButton>
  <ListItemButton>
    <ListItemIcon>
      <TukuttaIcon />
    </ListItemIcon>
  </ListItemButton>
</List>
, document.getElementById('sample')
);

children

Listのchildrenの使い方の説明です。
リストを表示する対象の要素を指定できます。
サンプルではSPAN要素で赤文字の「赤い見出し」を作って指定しています。
const List = MaterialUI.List;
const TukuttaSpan = <span style={{"color":"red"}}>赤い見出し</span>;
ReactDOM.render(
  <List children={TukuttaSpan} />
, document.getElementById('sample') 
);

classes

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

component

Listのcomponentの使い方の説明です。
※注意してください。componentとは別にcomponentsという複数形のプロパティも存在します。
バッジを表示するおおもとの要素を指定できます。
通常はおおもとはUL要素で生成されます。
デフォルトのListはおおもとがSPANで生成されます。
サンプルではB要素を指定したのでB要素で作られていることが分かります。
ListのおおもとがB要素で生成されます
const List = MaterialUI.List;
ReactDOM.render(
<div>
  <List>通常</List>
  <List component="b">B要素で作る</List>
</div>
, document.getElementById('sample')
);

dense

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

disablePadding

ListのdisablePaddingの使い方の説明です。
上下の余白を削除する設定です。
ブール値で設定します。
trueにすると上下の余白が無くなります。
※注意してください。ブール値を渡さなければいけないためdisablePadding="true"では正しくありません。
これは文字列のtrueを渡しているだけでブール値のtrueを渡してません。
書き方を省略できます。disablePaddingと書くだけでdisablePadding={true}と同じ意味になります。
未設定のデフォルトはfalseになります。
denseと違い、この設定は子要素のコンポーネントに効果が伝わりません。
const List = MaterialUI.List;
const ListItem = MaterialUI.ListItem;
ReactDOM.render(
<div>
  <List disablePadding={true} style={{"border":"1px solid #000"}}>
    <ListItem style={{"border":"1px solid #f00"}}>項目 disablePaddingがtrue</ListItem>
  </List>
  <List style={{"border":"1px solid #000","marginTop":"1rem"}}>
    <ListItem style={{"border":"1px solid #f00"}}>項目 未設定のデフォルト</ListItem>
  </List>
  <List disablePadding={true} style={{"border":"1px solid #000","marginTop":"1rem"}}>
    <ListItem disablePadding={true} style={{"border":"1px solid #f00"}}>項目 disablePaddingがtrueで子要素のListItemもdisablePaddingがtrueの場合</ListItem>
  </List>
</div>
, document.getElementById('sample') 
);

subheader

Listのsubheaderの使い方の説明です。
見出しを設定します。通常はListSubheaderコンポーネントを設定します。
サンプルの1つ目と2つめは同じ意味になります。
サンプルの3つ目はあえてDIV要素で見出しを作っています。
const List = MaterialUI.List;
const ListItem = MaterialUI.ListItem;
const ListSubheader = MaterialUI.ListSubheader;
ReactDOM.render(
<div>
  <List subheader={<ListSubheader>見出し1</ListSubheader>}>
    <ListItem>項目1</ListItem>
  </List>
  <List>
    <ListSubheader>見出し2</ListSubheader>
    <ListItem>項目2</ListItem>
  </List>
  <List subheader={<div>見出し3div</div>}>
    <ListItem>項目3</ListItem>
  </List>
</div>
, document.getElementById('sample') 
);

sx

Listの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
戻る

全体目次