モケラ

Tech Sheets

mokelab

MUI の Button Group を縦に表示する

最終更新日:2024-08-08

Button Groupコンポーネントは、orientation プロパティを vertical に指定することで、Buttonコンポーネントを縦に並べることができます。

import Button from "@mui/material/Button";
import ButtonGroup from "@mui/material/ButtonGroup";

const buttons = [
  <Button key="one">One</Button>,
  <Button key="two">Two</Button>,
  <Button key="three">Three</Button>,
];

export default function GroupOrientation() {
  return <ButtonGroup orientation="vertical">{buttons}</ButtonGroup>; // `orientation` プロパティを `vertical` に指定する
}

一覧に戻る