react实现非常好看的toggle按钮和Tooltip

一、效果图如下

二、代码如下

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;