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] 删除。
我来说两句