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

旧城等待， 2022-04-04 03:22 601阅读 0赞

一、效果图如下

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70 1][]

二、代码如下

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_markusenglund.github.io_react-switch]

[https://www.npmjs.com/package/react-tooltip][https_www.npmjs.com_package_react-tooltip]

四、toogle的另外一种样式

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70 2][]

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;

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20181214163806817.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70 1]: /images/20220404/08f241b03aad4f1da0671c23e03ed0e7.png
[https_markusenglund.github.io_react-switch]: https://markusenglund.github.io/react-switch/
[https_www.npmjs.com_package_react-tooltip]: https://www.npmjs.com/package/react-tooltip
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70 2]: /images/20220404/5087624c4fbf4e5386331e80104cdfb9.png