[英]How to make Material-UI Radio buttons float: left
https://codesandbox.io/s/9zxzj0r664 https://codesandbox.io/s/9zxzj0r664
^ In the demo above you can see the working code, anyways having a hard time just trying to align the radio buttons horizontally. ^在上面的演示中,您可以看到有效的代码,无论如何还是很难将水平单选按钮对齐。
Is there an easy way to do this in Material-UI? 在Material-UI中有一种简单的方法可以做到这一点吗? Or do I have to style my own Radio buttons, which I could have done in 5 minutes lol.
还是我必须设置我自己的单选按钮的样式,这本来可以在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 https://codesandbox.io/s/n03mo5nz2m
The RadioGroup
elements contain the radio buttons. RadioGroup
元素包含单选按钮。 If you'd like to render them in a row, the easiest way is probably to use a flexbox row. 如果要连续渲染它们,最简单的方法可能是使用flexbox行。
You can see what I've done in the above codesandbox, but it's as simple as adding to the group
style: 您可以在上述codesandbox中看到我所做的事情,但这就像添加到
group
样式中一样简单:
flexDirection: 'row',
This works because Material-UI already uses flexbox styling for the group. 之所以可行,是因为Material-UI已经为该组使用了flexbox样式。 That's also the reason it doesn't work to add
float: 'left'
there. 这也是无法在其中添加
float: 'left'
的原因float: 'left'
在此处。
You could also set display: 'inline-block'
on the group: 您还可以在组上设置
display: 'inline-block'
:
display: 'inline-block'
And that'll also achieve row styling, but with fewer control options. 这样也可以实现行样式,但是控件选项更少。
I don't think that has one "native" way to do this in material UI, you have to do this on you own. 我不认为在材料UI中有一种“本机”方式来执行此操作,您必须自己执行此操作。 it's a better aproach in fact.
实际上,这是一个更好的方法。
https://codesandbox.io/s/yp84vnzpq1 https://codesandbox.io/s/yp84vnzpq1
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 => ({
formControl: {
display: "flex",
float: "left",
margin: theme.spacing.unit * 3
},
group: {
float: "left",
flexDirection: "row",
margin: `${theme.spacing.unit}px 0`
}
});
class RadioButtonsGroup extends React.Component {
state = {
value: "male 1"
};
handleChange = event => {
this.setState({ value: event.target.value });
};
render() {
const { classes } = this.props;
return (
<div className={classes.root}>
<RadioGroup
aria-label="gender"
name="gender1"
className={classes.group}
value={this.state.value}
onChange={this.handleChange}
>
<FormControlLabel value="male 1" control={<Radio />} label="Male 1" />
<FormControlLabel value="male 2" control={<Radio />} label="Male 2" />
<FormControlLabel value="male 3" control={<Radio />} label="Male 3" />
</RadioGroup>
</div>
);
}
}
RadioButtonsGroup.propTypes = {
classes: PropTypes.object.isRequired
};
export default withStyles(styles)(RadioButtonsGroup);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.