ふかしぎのReactさんぷるず

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

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

使用するための下準備

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

Collapseの各プロパティの解説

MUIでのCollapseの扱い方の説明です。
コラプスは下から上、もしくは右から左に向かってじょじょに非表示、上から下に、もしくは左から右に向かってじょじょに表示を切り替えていく機能です。
このサンプルの「onf/off」を押してください。十字が表示・非表示します。
const Collapse = MaterialUI.Collapse;
const createSvgIcon = MaterialUI.createSvgIcon;
const TukuttaIcon = createSvgIcon(<path d="M2 9h20v6h-20M9 2v20h6v-20z" />,'TukuttaIcon');
const Main = () => {
  const [onOff, setonOff] = React.useState(true);
  return (
    <div>
      <Collapse in={onOff}>
        <TukuttaIcon />
      </Collapse>
      <button onClick={()=>setonOff(!onOff)}>on/off</button>
    </div>
  )
};
ReactDOM.render(
<Main />
, document.getElementById('sample')
);

addEndListener

CollapseのaddEndListenerの使い方の説明です。
コラプスの終了後に付け加える関数を設定できます。
のはずですが実際にはコラプスのアニメーションが始まる前に実行されます。
このサンプルはaddEndListenerで「addEndListener実行」というウインドウを出します。
const Collapse = MaterialUI.Collapse;
const createSvgIcon = MaterialUI.createSvgIcon;
const TukuttaIcon = createSvgIcon(<path d="M2 9h20v6h-20M9 2v20h6v-20z" />,'TukuttaIcon');
const Main = () => {
  const [onOff, setonOff] = React.useState(false);
  return (
    <div>
      <Collapse in={onOff} addEndListener={()=>{alert('addEndListener実行');}}>
        <TukuttaIcon />
      </Collapse>
      <button onClick={()=>{setonOff(!onOff)}}>on/off</button>
    </div>
  )
};
ReactDOM.render(
<Main />
, document.getElementById('sample')
);

children

Collapseのchildrenの使い方の説明です。
childrenに表示するノードを設定できます。
const Collapse = MaterialUI.Collapse;
const createSvgIcon = MaterialUI.createSvgIcon;
const TukuttaIcon = createSvgIcon(<path d="M2 9h20v6h-20M9 2v20h6v-20z" />,'TukuttaIcon');
const Main = () => {
  const [onOff, setonOff] = React.useState(true);
  return (
    <div>
      <Collapse in={onOff} children={<TukuttaIcon />}></Collapse>
      <button onClick={()=>setonOff(!onOff)}>on/off</button>
    </div>
  )
};
ReactDOM.render(
<Main />
, document.getElementById('sample')
);

classes

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

collapsedSize

CollapseのcollapsedSizeの使い方の説明です。
どこまで非表示にするかを設定できます。
数値を設定すると非表示にする際のheightをその数字にします。
同時に表示・非表示の状態に関わらずmin-heightにもその数字を設定します。
そのため表示されているものの高さよりも大きい数字にするとその分heightが増えるし、最低(min-height)がその数値になるので非表示にもなりません。
サンプルの1つ目は10を設定したので非表示にした際に高さ10pxまで縮まります。
2つ目は100pxを設定してしまっているのでその分下に余白が出来ていて、なおかつ非表示にしてもその100pxが高さの最低値になるため消えません。
未設定のデフォルトは0pxです。
const Collapse = MaterialUI.Collapse;
const createSvgIcon = MaterialUI.createSvgIcon;
const TukuttaIcon = createSvgIcon(<path d="M2 9h20v6h-20M9 2v20h6v-20z" />,'TukuttaIcon');
const Main = () => {
  const [onOff, setonOff] = React.useState(true);
  return (
    <div>
      <Collapse in={onOff} collapsedSize={10}>
        <TukuttaIcon style={{"width":"4rem","height":"4rem"}} />
      </Collapse>
      <Collapse in={onOff} collapsedSize="100px">
        <TukuttaIcon style={{"width":"4rem","height":"4rem"}} />
      </Collapse>
      <button onClick={()=>setonOff(!onOff)}>on/off</button>
    </div>
  )
};
ReactDOM.render(
<Main />
, document.getElementById('sample')
);

component

Collapseのcomponentの使い方の説明です。
このコラプスのおおもとを囲む要素を指定できます。
未設定のデフォルトはDIV要素で囲まれます。
サンプルは1つ目はARTICLE要素、2つ目はSPAN要素を親の要素名に設定しています。
当たり前の話ですが2つ目のSPANはインライン要素なのでheightが正しく効きません。そのため突然消えたり現れたりします。
const Collapse = MaterialUI.Collapse;
const Main = () => {
  const [onOff, setonOff] = React.useState(true);
  return (
    <div>
      <Collapse in={onOff}  component="article">
        <span>おおもとがARTICLE要素</span>
      </Collapse>
      <Collapse in={onOff}  component="span">
        <span>おおもとがSPAN要素</span>
      </Collapse>
      <button onClick={()=>setonOff(!onOff)}>on/off</button>
    </div>
  )
};
ReactDOM.render(
<Main />
, document.getElementById('sample')
);

easing

Collapseのeasingの使い方の説明です。
enterで表示する際の設定、exitで消える際の設定ができます。
未設定のデフォルトはcubic-bezier(0.4, 0, 0.2, 1)です。
この値はテーマから取得しています。theme.transitions.easing.easeInOutです。
サンプルの1つ目は未設定のデフォルト
サンプルの2つ目は未設定のデフォルトと同じ意味になります。
3つ目は表示する際に最初は遅く、そして最後の方は速くなります。消える際のexitは設定していないので1つ目の標準と同じタイミングで消えます。のはずですがexitを省略するとなぜかexitがenterと同じ値になってしまいます。
4つ目は表示と非表示で最初は速く、そして最後の方で遅くなります。
違いを分かりやすくするためにtimeoutで長めの時間でアニメーションさせています。
const Collapse = MaterialUI.Collapse;
const createSvgIcon = MaterialUI.createSvgIcon;
const TukuttaIcon = createSvgIcon(<path d="M2 9h20v6h-20M9 2v20h6v-20z" />,'TukuttaIcon');
const Main = () => {
  const [onOff, setonOff] = React.useState(false);
  return (
    <div style={{"display":"flex"}}>
      <Collapse in={onOff} timeout={1000}>
        <TukuttaIcon style={{"width":"4rem","height":"4rem"}} />
      </Collapse>
      <Collapse in={onOff} easing={{"enter":"cubic-bezier(0.4, 0, 0.2, 1)","exit":"cubic-bezier(0.4, 0, 0.2, 1)"}} timeout={1000}>
        <TukuttaIcon style={{"width":"4rem","height":"4rem"}} />
      </Collapse>
      <Collapse in={onOff} easing={{"enter":"cubic-bezier(1, 0, 1, 1)"}} timeout={1000}>
        <TukuttaIcon style={{"width":"4rem","height":"4rem"}} />
      </Collapse>
      <Collapse in={onOff} easing={{"enter":"cubic-bezier(0, 1, 1, 1)","exit":"cubic-bezier(0, 1, 1, 1)"}} timeout={1000}>
        <TukuttaIcon style={{"width":"4rem","height":"4rem"}} />
      </Collapse>
      <button onClick={()=>{setonOff(!onOff)}}>on/off</button>
    </div>
  )
};
ReactDOM.render(
<Main />
, document.getElementById('sample')
);

in

Collapseのinの使い方の説明です。
表示するかしないかをブール値で設定します。
trueの場合は表示し、falseの場合は非表示です。
未設定のデフォルトはfalseです。
サンプルではCollapseを3つ定義していますが、2つ目がfalse、3つ目は未設定なので結果として1つ目の1個しか表示されていません。
const Collapse = MaterialUI.Collapse;
const createSvgIcon = MaterialUI.createSvgIcon;
const TukuttaIcon = createSvgIcon(<path d="M2 9h20v6h-20M9 2v20h6v-20z" />,'TukuttaIcon');
const Main = () => {
  return (
    <div>
      <Collapse in={true}>
        <TukuttaIcon/>
      </Collapse>
      <Collapse in={false}>
        <TukuttaIcon/>
      </Collapse>
      <Collapse>
        <TukuttaIcon/>
      </Collapse>
    </div>
  )
};
ReactDOM.render(
<Main />
, document.getElementById('sample')
);

orientation

Collapseのorientationの使い方の説明です。
表示・非表示の方向を設定できます。
設定できる値はhorizontalとverticalです。
未設定のデフォルトはverticalです。
サンプルの1つ目はのhorizontal
サンプルの2つ目はのvertical
サンプルの3つ目は未設定なのでverticalとなり2つ目と同じになります。
const Collapse = MaterialUI.Collapse;
const createSvgIcon = MaterialUI.createSvgIcon;
const TukuttaIcon = createSvgIcon(<path d="M2 9h20v6h-20M9 2v20h6v-20z" />,'TukuttaIcon');
const Main = () => {
  const [onOff, setonOff] = React.useState(false);
  return (
    <div style={{"display":"flex"}}>
      <Collapse orientation="horizontalin={onOff} timeout={1000}>
        <TukuttaIcon style={{"width":"4rem","height":"4rem"}} />
      </Collapse>
      <Collapse orientation="verticalin={onOff} timeout={1000}>
        <TukuttaIcon style={{"width":"4rem","height":"4rem"}} />
      </Collapse>
      <Collapse in={onOff} timeout={1000}>
        <TukuttaIcon style={{"width":"4rem","height":"4rem"}} />
      </Collapse>
      <button onClick={()=>{setonOff(!onOff)}}>on/off</button>
    </div>
  )
};
ReactDOM.render(
<Main />
, document.getElementById('sample')
);

sx

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

timeout

Collapseのtimeoutの使い方の説明です。
数値を設定するとその時間をかけて表示・非表示をします。数値はms(ミリ秒)です。1000ms=1秒です。
文字列でautoと設定すると内部で自動的に設定されます。
さらに細かく時間指定できます。
appearは画面で初めて表示する際の時間です。が機能しません、最初から表示した状態になってしまいます。
enterは非表示から表示へ切り替える時間
exitは表示から非表示へ切り替える時間
数字だけの場合はappear、enter、exitを同じ数字にした設定になります。
サンプルの1つ目は1秒(1000ms)かけて表示・非表示します。
2つ目は1つ目と同じ意味になります。
3つ目は画面を初めて表示した際は1秒、表示する際には2秒、消える際には3秒かけてアニメーションします。
4つ目は画面を初めて表示した際は4秒、表示する際には5秒、消える際には6秒かけてアニメーションします。
5つ目はautoにしているので内部で自動的に設定されます。
const Collapse = MaterialUI.Collapse;
const createSvgIcon = MaterialUI.createSvgIcon;
const TukuttaIcon = createSvgIcon(<path d="M2 9h20v6h-20M9 2v20h6v-20z" />,'TukuttaIcon');
const Main = () => {
  const [onOff, setonOff] = React.useState(true);
  return (
    <div style={{"display":"flex"}}>
      <Collapse in={onOff} timeout={1000}>
        <TukuttaIcon style={{"width":"4rem","height":"4rem"}} />
      </Collapse>
      <Collapse in={onOff} timeout={{"appear":1000,"enter":1000,"exit":1000}}>
        <TukuttaIcon style={{"width":"4rem","height":"4rem"}} />
      </Collapse>
      <Collapse in={onOff} timeout={{"appear":1000,"enter":2000,"exit":3000}}>
        <TukuttaIcon style={{"width":"4rem","height":"4rem"}} />
      </Collapse>
      <Collapse in={onOff} timeout={{"appear":4000,"enter":5000,"exit":6000}}>
        <TukuttaIcon style={{"width":"4rem","height":"4rem"}} />
      </Collapse>
      <Collapse in={onOff} timeout="auto">
        <TukuttaIcon style={{"width":"4rem","height":"4rem"}} />
      </Collapse>
      <button onClick={()=>{setonOff(!onOff)}}>on/off</button>
    </div>
  )
};
ReactDOM.render(
<Main />
, document.getElementById('sample')
);

その他のアニメーション(Transitions)

コラプス(Collapse)、フェード(Fade)、ズーム(Zoom)、グロー(Grow)、スライド(Slide)の5つがあります。
コラプス(Collapse)は、その場で縦方向・横方向から現れます。
フェード(Fade)は、じょじょに透明度を変化しながら現れます。
ズーム(Slide)は、中心からサイズを変えながらじょじょに現れます。
グロー(Zoom)は、中心からサイズと透明度を変えながら現れる。(フェードとズームの組み合わせ)
スライド(Grow)は上・下・左・右から移動しながら現れます。
const Collapse = MaterialUI.Collapse;
const Fade = MaterialUI.Fade;
const Zoom = MaterialUI.Zoom;
const Grow = MaterialUI.Grow;
const Slide = MaterialUI.Slide;
const createSvgIcon = MaterialUI.createSvgIcon;
const TukuttaIcon = createSvgIcon(<path d="M2 9h20v6h-20M9 2v20h6v-20z" />,'TukuttaIcon');
const Main = () => {
  const [onOff, setonOff] = React.useState(true);
  return (
<div>
<div style={{"display":"grid","gridTemplateColumns":"repeat(5, 1fr)"}}>
      <Collapse in={onOff} timeout={2000}>
        <TukuttaIcon style={{"width":"4rem","height":"4rem"}} />
      </Collapse>
      <Fade in={onOff} timeout={2000}>
        <TukuttaIcon style={{"width":"4rem","height":"4rem"}} />
      </Fade>
      <Zoom in={onOff} timeout={2000}>
        <TukuttaIcon style={{"width":"4rem","height":"4rem"}} />
      </Zoom>
      <Grow in={onOff} timeout={2000}>
        <TukuttaIcon style={{"width":"4rem","height":"4rem"}} />
      </Grow>
      <Slide in={onOff} timeout={2000}>
        <TukuttaIcon style={{"width":"4rem","height":"4rem"}} />
      </Slide>
      <div>コラプス(<a href="/react/mui/apiCollapse.php">Collapse</a>)</div>
      <div>フェード(<a href="/react/mui/apiFade.php">Fade</a>)</div>
      <div>ズーム(<a href="/react/mui/apiSlide.php">Slide</a>)</div>
      <div>グロー(<a href="/react/mui/apiZoom.php">Zoom</a>)</div>
      <div>スライド(<a href="/react/mui/apiGrow.php">Grow</a>)</div>
    </div>
    <button onClick={()=>{setonOff(!onOff)}}>on/off</button>
</div>
  )
};
ReactDOM.render(
<Main />
, document.getElementById('sample')
);
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
戻る

全体目次