一、效果图如下
二、代码如下
import React, { Component } from "react";
import "./App.css";
import ReactTooltip from 'react-tooltip'
import Switch from "react-switch";
class App extends Component {
constructor(props) {
super(props);
this.state = { checked: false };
this.handleChange = this.handleChange.bind(this);
}
handleChange(checked) {
this.setState({ checked });
}
render() {
return (
<div>
{/* Tooltip */}
<span data-tip="span-ReactTooltip">学习Tooltip</span>
<p data-tip="hello world">鼠标移动上去看到Tooltip</p>
<ReactTooltip place='right' type='success' />
{/* 下面是toggle */}
<div className="example">
<h2>Simple usage</h2>
<label htmlFor="icon-switch">
<span>Switch with custom icons</span>
<Switch
checked={this.state.checked}
onChange={this.handleChange}
uncheckedIcon={
<div
style={{
display: "flex",
justifyContent: "center",
alignItems: "center",
height: "100%",
fontSize: 15,
color: "orange",
paddingRight: 2
}}
>
Off
</div>
}
checkedIcon={
<svg viewBox="0 0 10 10" height="100%" width="100%" fill="aqua">
<circle r={3} cx={5} cy={5} />
</svg>
}
className="react-switch"
id="icon-switch"
/>
</label>
<p>The switch is <span>{this.state.checked ? 'on' : 'off'}</span>.</p>
</div>
</div>
);
}
}
export default App;
三、参考网址
https://markusenglund.github.io/react-switch/
https://www.npmjs.com/package/react-tooltip
四、toogle的另外一种样式
import React, { Component } from "react";
import "./App.css";
import Switch from "react-switch";
class App extends Component {
constructor(props) {
super(props);
this.state = { checked: false };
this.handleChange = this.handleChange.bind(this);
}
handleChange(checked) {
this.setState({ checked });
}
render() {
return (
<div>
<div className="example">
<h2>Simple usage</h2>
<label htmlFor="normal-switch">
<span>Switch with custom icons</span>
<Switch
checked={this.state.checked}
onChange={this.handleChange}
className="react-switch"
id="icon-switch"
onColor="#86d3ff"//给按钮的整个圆矩形设置颜色
offColor="#08f"
onHandleColor="#2693e6"//移动开关的圆点设置颜色
offHandleColor="#0ff"
handleDiameter={30}
uncheckedIcon={false}
checkedIcon={false}
boxShadow="0px 1px 5px rgba(0, 0, 0, 0.6)"
activeBoxShadow="0px 0px 1px 10px rgba(0, 0, 0, 0.2)"
height={20}
width={48}
/>
</label>
<p>The switch is <span>{this.state.checked ? 'on' : 'off'}</span>.</p>
</div>
</div>
);
}
}
export default App;