本文介绍了将文本添加到Switch formcontrol并使用材质ui进行切换的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在使用Material UI的Switch组件,并且想在其中添加文本.另外,我需要使其呈正方形.
I am using Material UI's Switch component and I want to add text inside it. Also I need to make it square in shape.
如何在 Switch 组件中添加文本.选择时应显示为开,默认情况下应显示为关.我正在Reactjs表单的Formcontrol中使用Material UI的Switch.
How to I add text inside the Switch component. It should say on when selected and off when default. I am using Material UI's Switch inside Formcontrol in reactjs form.
<FormControlLabel label="Private ? " labelPlacement="start" control={ <Switch checked={this.state.checked} onChange={this.handleChange} color='primary' /> } /> 推荐答案下面是一个如何根据Switch的状态以及方形Switch的样式更改文本的示例:
Here is an example of how to change the text based on the state of the Switch as well as the styles for a square Switch:
import React from "react"; import FormControlLabel from "@material-ui/core/FormControlLabel"; import Switch from "@material-ui/core/Switch"; import { withStyles } from "@material-ui/core/styles"; const styles = { // use "icon" instead of "thumb" in v3 thumb: { borderRadius: 0 } }; class SwitchLabels extends React.Component { state = { checked: true }; handleChange = event => { this.setState({ checked: event.target.checked }); }; render() { return ( <FormControlLabel control={ <Switch classes={this.props.classes} checked={this.state.checked} onChange={this.handleChange} value="checked" color="primary" /> } labelPlacement="start" label={this.state.checked ? "On" : "Off"} /> ); } } export default withStyles(styles)(SwitchLabels);
更多推荐
将文本添加到Switch formcontrol并使用材质ui进行切换
发布评论