Material-UIのボトムナビゲーションに「追加ボタン」追加してみる。

10779 ワード
next.js React material-ui React テキストリンク

概要

Next.js でボトムナビゲーションを実装した時のソースコードの紹介です。
Reactを使っている場合は、router.push("./create");を画面遷移処理に変更すれば良いと思います。

Material-Ui の
Bottom Navigation というコンポーネントを使います。

目標

下記の赤枠ようなUIを作成することを目標とします。

実際に実装したもの

「ボタンが３つしかないか！」と突っ込みが入りそうですが、割愛します。
書いたコードがこちらになります。

ほぼ公式サイトのソースコードをコピー＆ペーストして
「追加ボタン」を
position: "fixed",
bottom: 70,
right: 30,
で記載するだけでした。
ClassにBootstrapを使っていますが、この説明も割愛します。いつかGithubにコードを載せます。

ソースコード

BottomNavigation.jsx
import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import BottomNavigation from "@material-ui/core/BottomNavigation";
import BottomNavigationAction from "@material-ui/core/BottomNavigationAction";
import { useRouter } from "next/router";
import HomeIcon from "@material-ui/icons/Home";
import PersonIcon from "@material-ui/icons/Person";
import QuestionAnswerIcon from "@material-ui/icons/QuestionAnswer";
import AddIcon from "@material-ui/icons/Add";
import Button from "@material-ui/core/Button";

const useStyles = makeStyles({
  root: {
    width: 500,
  },
});

export default function SimpleBottomNavigation(props) {
  const router = useRouter();
  const classes = useStyles();
  const [value, setValue] = React.useState(router.pathname.slice(1) || "./"); // アクセス時のURLを解析して、適切なナビゲーションボタンをアクティブにする。

  return (
    <>
      <Button
        style={{
          borderRadius: 50,
          minWidth: 50,
          width: 50,
          height: 50,
          position: "fixed",
          bottom: 70,
          right: 30,
        }}
        className="z-depth-1 p-2 d-flex justify-content-center align-items-center"
        onClick={async () => {
          router.push("./create");
        }}
      >
        <AddIcon style={{ fontSize: 28 }} className="text-primary" />
      </Button>
      <BottomNavigation
        value={value}
        onChange={async (event, newValue) => {
          setValue(newValue);
          router.push(newValue);
        }}
        showLabels
        className={(classes.root, "fixed-bottom z-depth-1")}
      >
        <BottomNavigationAction value="./" label="ホーム" icon={<HomeIcon />} />
        <BottomNavigationAction
          value="settings"
          label="設定"
          icon={<PersonIcon />}
        />
        <BottomNavigationAction
          value="help"
          label="Help"
          icon={<QuestionAnswerIcon />}
        />
      </BottomNavigation>
    </>
  );
}

以上です！いかがでしたか？

Muiを使うとUIの実装が簡単になりますね！！