Как мне заставить входные радиоэлементы выровняться по горизонтали в react [material-ui]?

Радиогруппа всегда отображается вертикально в material-ui. Есть ли способ выровнять их по горизонтали? например все радиокнопки в одну горизонтальную линию.


reactjs material-ui css
person jay.m    schedule 12.11.2015    source источник

Ответы (6)


arrow_upward
83
arrow_downward

Просто используйте свойство row:

<RadioGroup row><Radio /><Radio /></RadioGroup>

RadioGroup наследуется от _ 4_, поэтому свойства компонента FormGroup также доступны.

Другой пример с ярлыками:

<RadioGroup aria-label="anonymous" name="anonymous" value={false} row>
  <FormControlLabel value="true" control={<Radio />} label="Yes" />
  <FormControlLabel value="false" control={<Radio />} label="No" />
</RadioGroup>
person HydraHatRack    schedule 12.01.2019
comment
Выбранный в данный момент ответ работает и получил мою поддержку. Однако я думаю, что этот ответ следует выбрать, потому что он лучше согласуется с документацией пользовательского интерфейса материала о том, как горизонтально выровнять (создать строку) группу входных данных дочерней формы. - person Arthur Weborg; 25.01.2019
comment
Мне нравится этот ответ! - person Agent K; 22.03.2021

arrow_upward
24
arrow_downward

Чтобы отобразить переключатели в ряд:

<RadioButtonGroup style={{ display: 'flex' }}>

Чтобы сбросить размер в соответствии с содержимым:

<RadioButton style={{ width: 'auto' }} />
person lambdakris    schedule 20.01.2016
comment
Не работает, если ваши переключатели заключены в FormControlLabel. С другой стороны, решение @HydraHatRack действительно работает. - person Ian Bale; 01.03.2019

arrow_upward
8
arrow_downward

Просто добавьте свойство row = {true} в элемент управления RadioGroup.

 <RadioGroup
      aria-label="Location"
      name="location"
      className={classes.group}
      value={location}
      onChange={handleChange}
      row={true}
      >
         <FormControlLabel value="company" control={<Radio />} label="Company" />
         <FormControlLabel value="home" control={<Radio />} label="Home" />
         <FormControlLabel value="other" control={<Radio />} label="Other" />
 </RadioGroup>
person NuOne    schedule 07.05.2019
comment
По сути, это то же самое, что и мой ответ выше. ‹RadioGroup row /› просто использует сокращение JSX для логических свойств. - person HydraHatRack; 16.05.2019
comment
Оно работает! Спасибо. - person Agent K; 22.03.2021

arrow_upward
5
arrow_downward

Для тех, кто все еще борется, используйте этот стиль:

const styles = theme => ({
    group: {
        width: 'auto',
        height: 'auto',
        display: 'flex',
        flexWrap: 'nowrap',
        flexDirection: 'row',
    }
});

class MyComponent extends React.Component {

    render() {
        const { classes } = this.props;

        <RadioGroup className={classes.group} ...>
    }

};

export default withStyles(styles)(MyComponent);
person Borzh    schedule 04.09.2018
comment
Спасибо! Работал как шарм! - person Peter Catalin; 30.09.2018
comment
Излишне сложный и хрупкий, когда вы можете использовать _ 1_ свойство. - person Dan Dascalescu; 24.05.2020

arrow_upward
2
arrow_downward

Вам просто нужно упомянуть row в <RadioGroup>. Вы можете написать свой код так:

      <FormControl component="fieldset">
        <FormLabel >Lable</FormLabel>
        <RadioGroup aria-label="overall_sal" name="Overall SAL" value={value} onChange={handleChange} row>
          <FormControlLabel value="low" control={<Radio />} label="Low" />
        </RadioGroup>
      </FormControl>
person Jay    schedule 17.02.2021
comment
Работает как идеальный Джей! - person Agent K; 22.03.2021

arrow_upward
0
arrow_downward

Я пока не могу комментировать, но чтобы добавить к тому, что сказал @lambdakris: вам также может потребоваться добавить flexDirection: 'row'. Самый простой способ внести эти изменения вместо использования встроенных стилей - это добавить ваш CSS к объекту стилей и классу, который уже использует material-ui.

const styled = theme => ({
 formControl: {
                margin: theme.spacing.unit * 3,
                width: "100%", //parent of radio group
              },
       group: {
               flexDirection: 'row',
               justifyContent: 'space-around',
               }
             });
...........
<RadioButtonGroup className={classes.group}>
person noxasaxon    schedule 29.05.2018
comment
Не нужно усложнять флекс. Используйте свойство строки. - person Dan Dascalescu; 24.05.2020