ToggleButtonGroup Material Ui - 如何排列 2 x 2 2 行 2 列

Question

如果我在切换按钮中使用网格，则 OnChange 事件不起作用

使用网格或堆栈事件效果很好

如何排列 2 x 2 按钮

我在 Material ui 网站上看不到任何关于此的示例

有人可以帮忙吗

    const [testTime, setTestTime] = useState<string | null>('1');

    const handleTestTime = (event: React.MouseEvent<HTMLElement>, newTime: string | null) => {
      console.log(newTime);
      setTestTime(newTime);    
    };

     <Box>
      <Typography variant="body2">
        Toggle Button
      </Typography>
      <ToggleButtonGroup 
        value={testTime}
        exclusive 
        onChange={handleTestTime}>
        <Grid container spacing={1}>
          <Grid item xs={6}>
            <ToggleButton value="earlymorning">
              <Stack direction={{ xs: 'column' }}>
                <Typography variant="body2">Early Morning</Typography>
              </Stack>
            </ToggleButton>
          </Grid>
          <Grid item xs={6}>
            <ToggleButton value="morning">
              <Stack direction={{ xs: 'column' }}>
                <Typography variant="body2">Morning</Typography>
              </Stack>
            </ToggleButton>
          </Grid>
          <Grid item xs={6}>
            <ToggleButton value="afternoon">
              <Stack direction={{ xs: 'column' }}>
                <Typography variant="body2">Afternoon</Typography>
              </Stack>
            </ToggleButton>
          </Grid>
          <Grid item xs={6}>
            <ToggleButton value="evening">
              <Stack direction={{ xs: 'column' }}>
                <Typography variant="body2">Evening</Typography>
              </Stack>
            </ToggleButton>
          </Grid>
        </Grid>
      </ToggleButtonGroup>
    </Box>

Answer 1

切换按钮不是设计成换行的。但是，您可以将它们包裹起来：

<ToggleButtonGroup
sx={{ flexWrap: "wrap"}}
...>

这是一个例子：

https://codesandbox.io/s/happy-https-366fsv?file=/demo.tsx:775-798

但是，您会发现间距有点偏离，列中断的项目上的边框也是如此。如果有人有一个聪明的方法让这个看起来也不错，我会很高兴的-

Answer 2

您可以将切换按钮分成 2 个单独的

ToggleButtonGroup

，它们共享相同的状态（也就是说，如果您希望选择是独占的）。

使用一点 CSS，它们将看起来像一个切换按钮组。

<Stack>
  <ToggleButtonGroup
    orientation="horizontal"
    value={view}
    exclusive
    onChange={handleChange}
  >
    <ToggleButton
      value="list"
      aria-label="list"
      sx={{ borderBottomLeftRadius: 0 }}
    >
      <ViewListIcon />
    </ToggleButton>
    <ToggleButton value="module" aria-label="module">
      <ViewModuleIcon />
    </ToggleButton>
    <ToggleButton
      value="quilt"
      aria-label="quilt"
      sx={{ borderBottomRightRadius: 0 }}
    >
      <ViewQuiltIcon />
    </ToggleButton>
  </ToggleButtonGroup>
  <ToggleButtonGroup
    orientation="horizontal"
    value={view}
    exclusive
    onChange={handleChange}
  >
    <ToggleButton
      value="list1"
      aria-label="list"
      sx={{ borderTopLeftRadius: 0 }}
    >
      <ViewListIcon />
    </ToggleButton>
    <ToggleButton value="module1" aria-label="module">
      <ViewModuleIcon />
    </ToggleButton>
    <ToggleButton
      value="quilt1"
      aria-label="quilt"
      sx={{ borderTopRightRadius: 0 }}
    >
      <ViewQuiltIcon />
    </ToggleButton>
  </ToggleButtonGroup>
</Stack>

如果要删除中间的双边框，可以通过确定所选切换的位置并相应调整边框宽度来实现：

• 如果第一行没有选择或选择：在第二行

  sx={{ "& *": { borderTopWidth: 0 } }}

   上设置 

  ToggleButtonGroup
• 如果选择在第二行：在第一行

  sx={{ "& *": { borderBottomWidth: 0 } }}

   上设置 

  ToggleButtonGroup

这是为了正确渲染所选切换的中间边框。