ふかしぎのReactさんぷるず

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

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

使用するための下準備

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

Slideの各プロパティの解説

MUIでのSlideの扱い方の説明です。
スライドは上下左右にスライドさせて表示・非表示を切り替える機能です。
スライドはrefを設定しないとエラーになる場合があります。
このサンプルの「onf/off」を押してください。十字が上方向にスライドします。
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>
      <Slide in={onOff}>
        <TukuttaIcon />
      </Slide >
      <button onClick={()=>setonOff(!onOff)}>on/off</button>
    </div>
  )
};
ReactDOM.render(
<Main />
, document.getElementById('sample')
);

refの設定

SVGではrefを明示的に設定する必要が無かったですが、ものによってはrefの設定が必要になります。
例えばButtonコンポーネントやDIV要素などです。
下のサンプルはrefを設定しています。
const Slide = MaterialUI.Slide;
const Button = MaterialUI.Button;
const TukuttaDiv = React.forwardRef((props, ref) => <div {...props} ref={ref}>作ったDIV(ref)</div>);
const TukuttaButton = React.forwardRef((props, ref) => <Button variant="contained" {...props} ref={ref}>ボタン(ref)</Button>);
const Main = () => {
  const [onOff, setonOff] = React.useState(true);
  return (
    <div style={{"display":"flex"}}>
      <Slide in={onOff}>
        <TukuttaButton />
      </Slide>
      <Slide in={onOff}>
        <TukuttaDiv />
      </Slide>
      <button onClick={()=>setonOff(!onOff)}>on/off</button>
    </div>
  )
};
ReactDOM.render(
<Main />
, document.getElementById('sample')
);
ボタンのrefを設定しない場合はこのようになります。
const TukuttaButton = () => <Button variant="contained">ボタン</Button>;
ですがこれをSlideの子要素に設定するとrefが取得できずにエラーになります。
Warning: Failed prop type: Invalid prop `children` supplied to `ForwardRef(Slide)`. Expected an element that can hold a ref. Did you accidentally use a plain function component for an element instead? For more information see https://mui.com/r/caveat-with-refs-guide
    at Slide (https://unpkg.com/@mui/material@5.4.1/umd/material-ui.development.js:26725:7)
    at Main (<anonymous>:99:99)
ref付きでつくりましょう。
const TukuttaButton = React.forwardRef((props, ref) => <Button variant="contained" {...props} ref={ref}>ボタン(ref)</Button>);

children

Slideのchildrenの使い方の説明です。
childrenに表示するノードを設定できます。
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>
      <Slide in={onOff} children={<TukuttaIcon />}></Slide >
      <button onClick={()=>setonOff(!onOff)}>on/off</button>
    </div>
  )
};
ReactDOM.render(
<Main />
, document.getElementById('sample')
);

addEndListener

SlideのaddEndListenerの使い方の説明です。
コラプスの終了後に付け加える関数を設定できます。
のはずですが実際にはコラプスのアニメーションが始まる前に実行されます。
このサンプルはaddEndListenerで「addEndListener実行」というウインドウを出します。
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(false);
  return (
    <div>
      <Slide in={onOff} addEndListener={()=>{alert('addEndListener実行');}}>
        <TukuttaIcon />
      </Slide >
      <button onClick={()=>{setonOff(!onOff)}}>on/off</button>
    </div>
  )
};
ReactDOM.render(
<Main />
, document.getElementById('sample')
);

appear

Slideのappearの使い方の説明です。
inがtrueの時、つまり最初から表示している際にアニメーションをしてから表示するかの設定です。
inがtrueでappearもtrueだと最初にアニメーションをしてから表示します。
inがtrueでappearがfalseだとアニメーションなしでいきなり表示します。
デフォルトはtrueです。
サンプルの1つ目はtrueなのでこのページを開いた際にアニメーションで表示されます。
2つ目はfalseなのでいきなり表示されます。
この位置でCtrlキー+Rキーや、F5キーなどでブラウザーをリロードすると違いがわかります。
const Slide = MaterialUI.Slide;
const createSvgIcon = MaterialUI.createSvgIcon;
const TukuttaIcon = createSvgIcon(<path d="M2 9h20v6h-20M9 2v20h6v-20z" />,'TukuttaIcon');
const Main = () => {
  return (
    <div>
      <Slide in={true} appear={true}>
        <TukuttaIcon />
      </Slide >
      <Slide in={true} appear={false}>
        <TukuttaIcon />
      </Slide >
    </div>
  )
};
ReactDOM.render(
<Main />
, document.getElementById('sample')
);

container

Slideのcontainerの使い方の説明です。
スライドさせるときにどこを起点とするかを設定できます。
何も設定しないと最上位が起点となります。
containerで起点を変えるとスライドの動きが若干違ってきます。
わかりやすくするためにtimeoutを使いスライド時間を3秒にしています。
サンプルの1つ目はすぐ上のDIV要素を起点としているのでその間でスライドします。
2つ目は何も設定していないので最上位からスライドしてきます。
const Slide = MaterialUI.Slide;
const Box = MaterialUI.Box;
const createSvgIcon = MaterialUI.createSvgIcon;
const TukuttaIcon = createSvgIcon(<path d="M2 9h20v6h-20M9 2v20h6v-20z" />,'TukuttaIcon');
const Main = () => {
  const [onOff, setonOff] = React.useState(false);
  const kitenDivRef = React.useRef(null);
  return (
    <div>
      <div ref={kitenDivRef} style={{"backgroundColor":"#dddddd"}}>このDIVを起点</div>
      <div style={{"display":"flex"}}>
        <Slide in={onOff} container={kitenDivRef.current} timeout={3000}>
          <TukuttaIcon style={{"width":"4rem","height":"4rem"}} />
        </Slide >
        <Slide in={onOff} timeout={3000}>
          <TukuttaIcon style={{"width":"4rem","height":"4rem"}} />
        </Slide >
        <button onClick={()=>{setonOff(!onOff)}}>on/off</button>
      </div>
    </div>
  )
};
ReactDOM.render(
<Main />
, document.getElementById('sample')
);

うまいこと隠していい感じにスライドを見せる

スライドさせるときに一番上からスライドしてくるとかっこ悪いのでうまいこと隠してそれっぽくする方法です。
CSSのoverflow: hiddenを使います。
親要素でoverflowをhiddenにして溢れたものを隠します。
サンプルのoverflowをhiddenに設定したところの背景を灰色にしました。それ以上のスライドは隠れます。
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(false);
  const kitenDivRef = React.useRef(null);
  return (
    <div style={{"overflow":"hidden","backgroundColor":"#dddddd"}}>
      <div ref={kitenDivRef}>このDIVを起点</div>
      <div style={{"display":"flex"}}>
        <Slide in={onOff} container={kitenDivRef.current} >
          <TukuttaIcon style={{"width":"4rem","height":"4rem"}} />
        </Slide >
        <Slide in={onOff} >
          <TukuttaIcon style={{"width":"4rem","height":"4rem"}} />
        </Slide >
        <button onClick={()=>{setonOff(!onOff)}}>on/off</button>
      </div>
    </div>
  )
};
ReactDOM.render(
<Main />
, document.getElementById('sample')
);

direction

Slideのdirectionの使い方の説明です。
スライドする方向を設定できます。
設定できるのはup、down、left、rightです。
未設定のデフォルトはdonwです。
upは上方向に現れ、下方向に消えていきます。
downは下方向に現れ、上方向に消えていきます。
leftは左方向に現れ、右方向に消えていきます。
rightは右方向に現れ、左方向に消えていきます。
サンプルは1段目がright、downの順に設定しています。
2段目がup、leftの順に設定しています。
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(false);
  return (
    <div>
      <div style={{"display":"grid","gridTemplateColumns":"1fr 1fr"}}>
        <Slide in={onOff} direction="right">
          <TukuttaIcon style={{"width":"4rem","height":"4rem"}} />
        </Slide >
        <Slide in={onOff} direction="down">
          <TukuttaIcon style={{"width":"4rem","height":"4rem"}} />
        </Slide >
        <Slide in={onOff} direction="up">
          <TukuttaIcon style={{"width":"4rem","height":"4rem"}} />
        </Slide >
        <Slide in={onOff} direction="left" >
          <TukuttaIcon style={{"width":"4rem","height":"4rem"}} />
        </Slide >
      </div>
      <button onClick={()=>{setonOff(!onOff)}}>on/off</button>
    </div>
  )
};
ReactDOM.render(
<Main />
, document.getElementById('sample')
);

easing

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

in

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

timeout

Slideのtimeoutの使い方の説明です。
数値を設定するとその時間をかけて表示・非表示をします。数値はms(ミリ秒)です。1000ms=1秒です。
さらに細かく時間指定できます。
appearは画面で初めて表示する際の時間です。
enterは非表示から表示へ切り替える時間
exitは表示から非表示へ切り替える時間
数字だけの場合はappear、enter、exitを同じ数字にした設定になります。
未設定のデフォルトはテーマの値が設定されます。
enterはtheme.transitions.duration.enteringScreen(=225)
exitはtheme.transitions.duration.leavingScreen (=195)
サンプルの1つ目は1秒(1000ms)かけて表示・非表示します。
2つ目は1つ目と同じ意味になります。
3つ目は画面を初めて表示した際は1秒、表示する際には2秒、消える際には3秒かけてアニメーションします。
4つ目は画面を初めて表示した際は4秒、表示する際には5秒、消える際には6秒かけてアニメーションします。
5つ目は未設定のデフォルトです。
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 style={{"display":"flex"}}>
      <Slide in={onOff} timeout={1000}>
        <TukuttaIcon style={{"width":"4rem","height":"4rem"}} />
      </Slide >
      <Slide in={onOff} timeout={{"appear":1000,"enter":1000,"exit":1000}}>
        <TukuttaIcon style={{"width":"4rem","height":"4rem"}} />
      </Slide >
      <Slide in={onOff} timeout={{"appear":1000,"enter":2000,"exit":3000}}>
        <TukuttaIcon style={{"width":"4rem","height":"4rem"}} />
      </Slide >
      <Slide in={onOff} timeout={{"appear":4000,"enter":5000,"exit":6000}}>
        <TukuttaIcon style={{"width":"4rem","height":"4rem"}} />
      </Slide >
      <Slide in={onOff}>
        <TukuttaIcon style={{"width":"4rem","height":"4rem"}} />
      </Slide >
      <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
戻る

全体目次