【React】MATERIAL-UIを使ったデザイン作成


Material-uiはReactのなかでも人気のコンポーネントみたいです。

コンポーネント全体で思うことですが、これも少し使うための知識がいるのでReactに慣れてから手を出した方がいい気がする。

今回はフッターメニューを作ってみます。

フッターメニューの作成

スマホゲームなんかでよくある下部に表示されるメニューを作ってみます。

Bootstrapを使いつつCSSで簡単に作ったものはこんな感じでした。

 

UIのBottom Navigationを使います。

まずコンポーネントを使うために必要なものを追加します。

デフォルトサンプルだとメニューが配置した場所に表示されます。

スタイルを変更して一番下に固定されるようにします。

 

メニューボタン(BottomNavigationAction)の色を変える簡単な方法は見つからなかったのですが、以下のように書くことで実現できました。

 

後は変化したときに親クラスで処理を受け取って必要な処理を追加。

 

簡単にネイティブ感のあるメニューを作ることができました。


コメントを残す

メールアドレスが公開されることはありません。