ふかしぎのReactさんぷるず

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

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

使用するための下準備

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

ListSubheaderの各プロパティの解説

MUIでのListSubheaderの扱い方の説明です。
リストを作ったときの見出しを設定します。
const List = MaterialUI.List;
const ListSubheader = MaterialUI.ListSubheader;
const ListItemButton = MaterialUI.ListItemButton;
ReactDOM.render(
<List>
  <ListSubheader>見出し</ListSubheader>
  <ListItemButton>項目</ListItemButton>
</List>
, document.getElementById('sample')
);

children

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

classes

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

color

ListSubheaderのcolorの使い方の説明です。
表示する色を設定できます。
使用できるのは文字列でdefault、inherit、primaryです。
未設定のデフォルトはdefaultです。デフォルトは薄い灰色になります。
inheritは親要素の色を継承します。
primaryはテーマのprimaryです。デフォルトでは薄い青色になります。
const List = MaterialUI.List;
const ListSubheader = MaterialUI.ListSubheader;
const ListItemButton = MaterialUI.ListItemButton;
ReactDOM.render(
<div>
<List>
  <ListSubheader color="default">見出しdefault</ListSubheader>
  <ListItemButton>項目</ListItemButton>
</List>
<List>
  <ListSubheader color="inherit">見出しinherit</ListSubheader>
  <ListItemButton>項目</ListItemButton>
</List>
<List>
  <ListSubheader color="primary">見出しprimary</ListSubheader>
  <ListItemButton>項目</ListItemButton>
</List>
</div>
, document.getElementById('sample')
);

component

ListSubheaderのcomponentの使い方の説明です。
生成する際の要素を設定できます。
サンプルの1つ目は生成する際にI要素を設定しているので斜字で生成されます。
未設定のデフォルトはLI要素で作られます。
ListSubheaderのcomponentで生成されたHTML
const List = MaterialUI.List;
const ListSubheader = MaterialUI.ListSubheader;
const ListItemButton = MaterialUI.ListItemButton;
ReactDOM.render(
<List>
  <ListSubheader component="i">見出しcomponent</ListSubheader>
  <ListItemButton>項目</ListItemButton>
</List>
, document.getElementById('sample')
);

disableGutters

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

disableSticky

ListSubheaderのdisableStickyの使い方の説明です。
スクロールできる状態の時にListSubheaderは自動的に上部に固定(ピン留め)されます。
その上部固定を解除する設定です。
ブール値で設定します。
trueにすると上部固定が解除されます。
※注意してください。ブール値を渡さなければいけないためdisableSticky="true"では正しくありません。
これは文字列のtrueを渡しているだけでブール値のtrueを渡してません。
書き方を省略できます。disableStickyと書くだけでdisableSticky={true}と同じ意味になります。
未設定のデフォルトはfalseです。
サンプルの1つ目は未設定なので見出しが上部に固定されます。スクロールバーを下に移動させても常に「見出し上部固定」が表示されています。
2つ目は固定を解除したのでスクロールバーを下に移動させると見出しが見えなくなります。
const List = MaterialUI.List;
const ListSubheader = MaterialUI.ListSubheader;
const ListItemButton = MaterialUI.ListItemButton;
ReactDOM.render(
<div>
  <div style={{"overflow":"auto","height":"100px","width":"50%","border":"1px solid black"}}>
  <List>
    <ListSubheader>見出し上部固定</ListSubheader>
    <ListItemButton>項目1</ListItemButton>
    <ListItemButton>項目2</ListItemButton>
    <ListItemButton>項目3</ListItemButton>
    <ListItemButton>項目4</ListItemButton>
  </List>
  </div>
  <div style={{"overflow":"auto","height":"100px","width":"50%","border":"1px solid black"}}>
  <List>
    <ListSubheader disableSticky={true}>見出し上部固定無しdisableSticky</ListSubheader>
    <ListItemButton>項目1</ListItemButton>
    <ListItemButton>項目2</ListItemButton>
    <ListItemButton>項目3</ListItemButton>
    <ListItemButton>項目4</ListItemButton>
  </List>
  </div>
</div>
, document.getElementById('sample')
);

inset

ListSubheaderのinsetの使い方の説明です。
インデントをするかの設定です。
trueにすると有効になり文字が少し右側に移動します。
これはアイコンやアバターが無い項目とあるの項目をそろえる場合に使います。
※注意してください。ブール値を渡さなければいけないためinset="true"では正しくありません。
これは文字列のtrueを渡しているだけでブール値のtrueを渡してません。
書き方を省略できます。insetと書くだけでinset={true}と同じ意味になります。
未設定のデフォルトはfalseになります。
const List = MaterialUI.List;
const ListSubheader = MaterialUI.ListSubheader;
const ListItemText = MaterialUI.ListItemText;
const ListItemButton = MaterialUI.ListItemButton;
const ListItemAvatar  = MaterialUI.ListItemAvatar;
const Avatar = MaterialUI.Avatar;
const ListItemIcon = MaterialUI.ListItemIcon;
const createSvgIcon = MaterialUI.createSvgIcon;
const TukuttaIcon = createSvgIcon(<path d="M2 9h20v6h-20M9 2v20h6v-20z" />,'TukuttaIcon');
ReactDOM.render(
<List>
  <ListSubheader inset={true}>見出しinset(揃う)</ListSubheader>
  <ListItemButton>
    <ListItemAvatar><Avatar src="./fukasigi_logo.png" /></ListItemAvatar>
    <ListItemText>アバターあり(揃う)</ListItemText>
  </ListItemButton>
  <ListItemButton>
    <ListItemIcon><TukuttaIcon /></ListItemIcon>
    <ListItemText>アイコンあり(揃う)</ListItemText>
  </ListItemButton>
  <ListSubheader>見出し(アイコン、アバター無し)</ListSubheader>
  <ListItemButton>項目(アイコン、アバター無し)</ListItemButton>
</List>
, document.getElementById('sample')
);

sx

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

全体目次