React中的垂直切换按钮组？

Posted 2023-03-17

【中文标题】React中的垂直切换按钮组？

【英文标题】：Vertical ToggleButtonGroup in React?

【发布时间】：2021-11-28 12:55:26

【问题描述】：

有没有办法让 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;

【参考方案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>
  );

【讨论】：

我不知道问题出在哪里。运行您的代码，两组按钮都是水平排列的。 Atm 我安装了 react-bootstrap 和 mui/material。我还需要什么其他东西才能按预期运行吗？

好的，安装emotion/react 和emotion/styled 可以启动并运行此代码。但是现在按钮在按下时不会保持突出显示。这是正常行为吗？从上面可以看到，我最初是从 react-bootstrap 导入 ToggleGroup

我没有找到颜色效果或样式，但是是的，您可以在点击时看到按钮效果。