如何使Material-UI单选按钮浮动:向左

里昂·加班

https://codesandbox.io/s/9zxzj0r664

在此处输入图片说明

^在上面的演示中,您可以看到工作代码,反正很难尝试仅将单选按钮水平对齐。

在Material-UI中有一种简单的方法吗?还是我必须设置自己的“单选”按钮的样式,这本可以在5分钟内完成,哈哈。

import React from "react";
import PropTypes from "prop-types";
import { withStyles } from "@material-ui/core/styles";
import Radio from "@material-ui/core/Radio";
import RadioGroup from "@material-ui/core/RadioGroup";
import FormHelperText from "@material-ui/core/FormHelperText";
import FormControlLabel from "@material-ui/core/FormControlLabel";
import FormControl from "@material-ui/core/FormControl";
import FormLabel from "@material-ui/core/FormLabel";

const styles = theme => ({
  root: {
    display: "flex"
  },
  formControl: {
    float: "left",
    margin: theme.spacing.unit * 3
  },
  group: {
    margin: `${theme.spacing.unit}px 0`
  }
});

class RadioButtonsGroup extends React.Component {
  state = {
    value: "female"
  };

  handleChange = event => {
    this.setState({ value: event.target.value });
  };

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

    return (
      <div className={classes.root}>
        <FormControl
          component="fieldset"
          required
          className={classes.formControl}
        >
          <FormLabel component="legend">Gender</FormLabel>
          <RadioGroup
            aria-label="gender"
            name="gender1"
            className={classes.group}
            value={this.state.value}
            onChange={this.handleChange}
          >
            <FormControlLabel
              value="female"
              control={<Radio />}
              label="Female"
            />
            <FormControlLabel value="male" control={<Radio />} label="Male" />
            <FormControlLabel value="other" control={<Radio />} label="Other" />
            <FormControlLabel
              value="disabled"
              disabled
              control={<Radio />}
              label="(Disabled option)"
            />
          </RadioGroup>
        </FormControl>
        <FormControl
          component="fieldset"
          required
          error
          className={classes.formControl}
        >
          <FormLabel component="legend">Gender</FormLabel>
          <RadioGroup
            aria-label="gender"
            name="gender2"
            className={classes.group}
            value={this.state.value}
            onChange={this.handleChange}
          >
            <FormControlLabel
              value="male"
              control={<Radio color="primary" />}
              label="Male"
            />
            <FormControlLabel
              value="female"
              control={<Radio color="primary" />}
              label="Female"
            />
            <FormControlLabel
              value="other"
              control={<Radio color="primary" />}
              label="Other"
            />
            <FormControlLabel
              value="disabled"
              disabled
              control={<Radio />}
              label="(Disabled option)"
            />
          </RadioGroup>
          <FormHelperText>You can display an error</FormHelperText>
        </FormControl>
      </div>
    );
  }
}

RadioButtonsGroup.propTypes = {
  classes: PropTypes.object.isRequired
};

export default withStyles(styles)(RadioButtonsGroup);
拉吉特

https://codesandbox.io/s/n03mo5nz2m

RadioGroup元素包含单选按钮。如果要连续渲染它们,最简单的方法可能是使用flexbox行。

您可以在上述codesandbox中看到我所做的事情,但这就像添加group样式一样简单

flexDirection: 'row',

之所以可行,是因为Material-UI已经为该组使用了flexbox样式。这也是无法在其中添加内容的原因float: 'left'

您也可以display: 'inline-block'在组上设置

display: 'inline-block'

这也将实现行样式,但是控件选项更少。

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

Material-UI如何响应

如何部署AppBar Material UI?

如何更改Material-ui单选按钮的选中颜色?

如何基于Material UI中的断点更改按钮道具

如何基于另一个单选按钮输入将单选按钮插入闪亮的UI?

如何更新Material-UI按钮的焦点样式?

在Material UI中使用样式化的组件应用单选按钮颜色?

无法使Material UI单选按钮与Formik一起使用

带svg圆的Material-UI单选按钮

如何通过单击按钮伪造对Material-ui TextField的关注?

如何使用Material UI的阴影?

Material ui单选按钮选择reactjs中的上一个按钮值

React-Material-UI单选按钮组在单击时不会填充按钮

如何更改Material-UI按钮的tabIndex?

Kendo UI Grid-如何保存当前单选按钮状态

如何设置在Chrome中向左浮动的TD?

ReactJS + Redux-Material-UI:如何使<Toolbar />浮动?

如何在React Material-UI中以编程方式设置单选按钮选择

如何在Material-UI中设置按钮样式

如何在material-ui中的两个组件之间集成一个浮动动作按钮?

如何在导航上更改按钮(material-ui)的颜色?

Angular Material ui 单选按钮获得价值

React Material UI 单选按钮看起来乱七八糟

如何检测 Material 单选按钮或组何时失去焦点?

如何更改单选按钮材料-ui 上的颜色

如何使用按钮清除 material-ui 搜索输入

如何通过单选按钮实现动态 UI 渲染?

如何在 Material UI 中将按钮附加到 TextField

如何禁用 Material-ui 按钮上的长按效果?