React中的垂直切换按钮组？

Question

有没有办法让 ToggleButtonGroups 垂直而不是水平显示按钮？我试过更改orientation="vertical"，但这似乎没有任何效果。

    import ToggleButtonGroup from "react-bootstrap/ToggleButtonGroup";
    import ToggleButton from "react-bootstrap/ToggleButton";
    function App() {
      return (
        <>
          <h1>Some question ?</h1>
          <ToggleButtonGroup orientation="vertical" type="checkbox">
              <ToggleButton id="tbg-check-1" value={1}>
                Option 1{" "}
              </ToggleButton>{" "}
              <ToggleButton id="tbg-check-2" value={2}>
                Option 2{" "}
              </ToggleButton>{" "}
              <ToggleButton id="tbg-check-3" value={3}>
                Option 3{" "}
              </ToggleButton>{" "}
              </ToggleButtonGroup>
        </>
  );
}

export default App;

Answer 1

注意：您需要检查 package.json 可能您缺少一些导致此问题的库，否则您的做法是正确的

请检查此网址

click here this link contains both horizental and vertical design

import React from 'react';
import { ToggleButtonGroup, ToggleButton } from '@mui/material';

export default function App() {
  return (
    <div>
      <>
        <h1>Vertical ?</h1>
        <ToggleButtonGroup orientation="vertical" type="checkbox">
          <ToggleButton id="tbg-check-1" value={1}>
            Option 1{' '}
          </ToggleButton>{' '}
          <ToggleButton id="tbg-check-2" value={2}>
            Option 2{' '}
          </ToggleButton>{' '}
          <ToggleButton id="tbg-check-3" value={3}>
            Option 3{' '}
          </ToggleButton>{' '}
        </ToggleButtonGroup>
      </>

      <>
        <h1>Horizental?</h1>
        <ToggleButtonGroup orientation="horizental" type="checkbox">
          <ToggleButton id="tbg-check-1" value={1}>
            Option 1{' '}
          </ToggleButton>{' '}
          <ToggleButton id="tbg-check-2" value={2}>
            Option 2{' '}
          </ToggleButton>{' '}
          <ToggleButton id="tbg-check-3" value={3}>
            Option 3{' '}
          </ToggleButton>{' '}
        </ToggleButtonGroup>
      </>
    </div>
  );
}