I have an ant-design checkbox
My code is :
<Checkbox checked={this.state.D} onChange={(e)=> this.setState({ D: e.target.checked})}>D</Checkbox>
<Checkbox checked={this.state.L} onChange={(e)=> this.setState({ L: e.target.checked})}>L</Checkbox>
<Checkbox checked={this.state.M} onChange={(e)=> this.setState({ M: e.target.checked})}>M</Checkbox>
<Checkbox checked={this.state.M1} onChange={(e)=> this.setState({ M1: e.target.checked})}>M</Checkbox>
<Checkbox checked={this.state.J} onChange={(e)=> this.setState({ J: e.target.checked})}>J</Checkbox>
when I run it, I get :
But, I want it with text inside like that:
How can I render it ?
Adding text inside of Checkbox
in antd
is equivalent to Radio.Group .
<Radio.Group defaultValue="a" size="large">
<Radio.Button value="a">Hangzhou</Radio.Button>
<Radio.Button value="b">Shanghai</Radio.Button>
<Radio.Button value="c">Beijing</Radio.Button>
<Radio.Button value="d">Chengdu</Radio.Button>
</Radio.Group>;
If you want to use "Round Buttons" as in your example, you should make your own component using <Button shape="circle"/>
and manage it's clicked state.
Note: how to make such component is out of the scope of this question, although it is pretty basic.
Demo:
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.