エントリーの編集
エントリーの編集は全ユーザーに共通の機能です。
必ずガイドラインを一読の上ご利用ください。
React+Material-UIでスマホのみにタブを表示させる - Qiita
記事へのコメント0件
- 注目コメント
- 新着コメント
このエントリーにコメントしてみましょう。
注目コメント算出アルゴリズムの一部にLINEヤフー株式会社の「建設的コメント順位付けモデルAPI」を使用しています
- バナー広告なし
- ミュート機能あり
- ダークモード搭載
関連記事
React+Material-UIでスマホのみにタブを表示させる - Qiita
はじめに PCとスマホの両方にレスポンシブで対応しないといけないが、スマホのみでタブメニューを表示さ... はじめに PCとスマホの両方にレスポンシブで対応しないといけないが、スマホのみでタブメニューを表示させたい場合にご参考ください。 React(TypeScript), Material-UIで開発しています。 やりたいこと PCではGridを使い縦3列にコンポーネントを配置したい スマホでは、3つのコンポーネントのどれを表示するか選択できるタブを表示させたい スマホでは、タブの選択で動的にコンポーネントを1つずつ表示させたい PCでの表示 スマホでの表示 方針 Material-UIのTabを利用する State変数を配列で宣言し、スマホとPCで設定する初期値を変える Tabの選択で、それぞれの数字を配列に入れる 変数がそれぞれの数字を持っているかいないかで、表示を出し分ける 実装 1.UseStateで宣言 スマホの表示幅を600px未満とし、window.innnerWidthで判定す