Блог

Главная - Вопросы по программированию - Вертикальная группа переключателей в React?

Вертикальная группа переключателей в React?

#reactjs #button #layout #react-bootstrap

Вопрос:

Есть ли способ заставить группы переключателей отображать кнопки вертикально, а не горизонтально? Я пытался изменить 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, возможно, вам не хватает какой-то библиотеки, которая вызывает это, в противном случае вы делаете это правильно

Пожалуйста, проверьте этот URL-адрес

нажмите здесь эта ссылка содержит как горизонтальный, так и вертикальный дизайн

 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>
  );
}

Комментарии:

1. Я понятия не имею, в чем проблема. При выполнении вашего кода оба набора кнопок расположены горизонтально. Банкомат У меня установлен react-bootstrap и mui/material. Есть ли что-нибудь еще, что мне нужно, чтобы все работало так, как ожидалось?

2. Хорошо, установка emotion/react и emotion/styled запускает и запускает этот код. Но теперь кнопки не остаются подсвеченными при нажатии. Это нормальное поведение? Первоначально я импортировал ToggleGroup из react-bootstrap, как вы можете видеть выше

3. Я не нашел цветового эффекта или стиля, но да, эффект кнопки, который вы можете увидеть при нажатии.

Метки: