基于ReactJS实现的一款自定义切换开关控件

React Toggle Component

react, switch, button

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

第三方库
作品简介 1078
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

'use strict';

var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function(obj) {
    return typeof obj;
} : function(obj) {
    return obj && typeof Symbol === "function" && obj.constructor === Symbol ? "symbol" : typeof obj;
};

function _classCallCheck(instance, Constructor) {
    if (!(instance instanceof Constructor)) {
        throw new TypeError("Cannot call a class as a function");
    }
}

function _possibleConstructorReturn(self, call) {
    if (!self) {
        throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
    }
    return call && (typeof call === "object" || typeof call === "function") ? call : self;
}

/*
		A customizeable React toggle component.  All parameters are optional.
		@parameters: onToggle - A function to call anytime the component is toggled
								 activeLabel - The label to display on the active side
								 deactiveLabel - The label to display on the deactive side
								 activeColor - The color to make the toggle when active
								 deactiveColor - The color to make the toggle when deactive
								 borderMatch - Whether to match border color with activeColor and deactiveColor
*/

/*!
  Copyright (c) 2016 Jed Watson.
  Licensed under the MIT License (MIT), see
  http://jedwatson.github.io/classnames
*/
/* global define */

(function() {
    'use strict';

var hasOwn = {}.hasOwnProperty;

function classNames() {
        var classes = [];

for (var i = 0; i < arguments.length; i++) {
            var arg = arguments[i];
            if (!arg) continue;

var argType = typeof arg === 'undefined' ? 'undefined' : _typeof(arg);

if (argType === 'string' || argType === 'number') {
                classes.push(arg);
            } else if (Array.isArray(arg)) {
                classes.push(classNames.apply(null, arg));
            } else if (argType === 'object') {
                for (var key in arg) {
                    if (hasOwn.call(arg, key) && arg[key]) {
                        classes.push(key);
                    }
                }
            }
        }

return classes.join(' ');
    }

if (typeof module !== 'undefined' && module.exports) {
        module.exports = classNames;
    } else if (typeof define === 'function' && _typeof(define.amd) === 'object' && define.amd) {
        // register as 'classnames', consistent with npm package name
        define('classnames', [], function() {
            return classNames;
        });
    } else {
        window.classNames = classNames;
    }
})();

/* App Start */

var _React = React;
var Component = _React.Component;

var Toggle = function(_Component) {
    _inherits(Toggle, _Component);

function Toggle(props) {
        _classCallCheck(this, Toggle);

var _this = _possibleConstructorReturn(this, _Component.call(this, props));

_this.state = {
            toggle: false
        };
        _this.toggleState = _this.toggleState.bind(_this);
        _this.insideStyles = _this.insideStyles.bind(_this);
        _this.toggleStyles = _this.toggleStyles.bind(_this);
        return _this;
    }

Toggle.prototype.getInitialState = function getInitialState() {
        return {
            state: false
        };
    };

Toggle.prototype.toggleState = function toggleState() {
        this.setState({
            toggle: !this.state.toggle
        });
        if (this.props.onToggle) {
            this.props.onToggle(!this.state.toggle ? this.props.activeLabel || !this.state.toggle : this.props.deactiveLabel || !this.state.toggle);
        }
    };

Toggle.prototype.insideStyles = function insideStyles() {
        return {
            background: this.state.toggle ? typeof this.props.activeColor !== "undefined" ? this.props.activeColor : "" : typeof this.props.deactiveColor !== "undefined" ? this.props.deactiveColor : ""
        };
    };

Toggle.prototype.toggleStyles = function toggleStyles() {
        if (!_typeof(this.props.borderMatch) !== "undefined" && this.props.borderMatch) {
            return {
                border: this.state.toggle ? typeof this.props.activeColor !== "undefined" ? "solid 1px " + this.props.activeColor : "" : typeof this.props.deactiveColor !== "undefined" ? "solid 1px " + this.props.deactiveColor : ""
            };
        }
    };

Toggle.prototype.render = function render() {
        return React.createElement(
            'div', {
                className: 'toggleHolder'
            },
            React.createElement(
                'h3',
                null,
                this.props.heading
            ),
            React.createElement(
                'div', {
                    className: 'toggleWrapper',
                    onClick: this.toggleState
                },
                React.createElement(
                    'div', {
                        className: classNames("toggleLabel", {
                            active: !this.state.toggle
                        })
                    },
                    React.createElement(
                        'p',
                        null,
                        this.props.deactiveLabel || ""
                    )
                ),
                React.createElement(
                    'div', {
                        className: classNames("toggle", {
                            active: this.state.toggle
                        }, {
                            deactive: !this.state.toggle
                        }),
                        style: this.toggleStyles()
                    },
                    React.createElement('div', {
                        className: 'inside',
                        style: this.insideStyles()
                    })
                ),
                React.createElement(
                    'div', {
                        className: classNames("toggleLabel", {
                            active: this.state.toggle
                        })
                    },
                    React.createElement(
                        'p',
                        null,
                        this.props.activeLabel || ""
                    )
                )
            )
        );
    };

return Toggle;
}(Component);

var App = function(_Component2) {
    _inherits(App, _Component2);

function App(props) {
        _classCallCheck(this, App);

var _this2 = _possibleConstructorReturn(this, _Component2.call(this, props));

_this2.toggle = _this2.toggle.bind(_this2);
        return _this2;
    }

App.prototype.toggle = function toggle(val) {
        alert(val);
    };

App.prototype.render = function render() {
        return React.createElement(
            'div', {
                className: 'Toggles'
            },
            React.createElement(Toggle, {
                heading: "Custom Labels",
                activeLabel: "Yes",
                deactiveLabel: "No"
            }),
            React.createElement(Toggle, null),
            React.createElement(Toggle, {
                heading: "Custom Colors",
                activeColor: "#17cae6",
                deactiveColor: "#d72ee6",
                borderMatch: true
            }),
            React.createElement(Toggle, {
                activeColor: "#f7ff71",
                deactiveColor: "#ff71cb",
                borderMatch: false
            }),
            React.createElement(Toggle, {
                heading: "Custom Toggle Callback",
                onToggle: this.toggle
            }),
            React.createElement(Toggle, {
                onToggle: this.toggle,
                activeLabel: "Steak",
                deactiveLabel: "Chicken",
                activeColor: "#17cae6",
                deactiveColor: "#17cae6"
            })
        );
    };

return App;
}(Component);

ReactDOM.render(React.createElement(App, null), document.getElementById('app'));

编译

CSS

body {
    background: #f4f5f7;
    font-family: helvetica, arial;
}
.Toggles {
    margin-top: 50px;
}
.toggleHolder {
    text-align: center;
}
.toggleHolder h3,
.toggleHolder p {
    text-align: center;
    margin: 5px;
    color: rgba(0, 0, 0, .8)
}
.toggleWrapper {
    width: 100%;
}
.toggleWrapper .toggleLabel {
    width: 50px;
    display: inline-block;
}
.toggleWrapper .toggleLabel p {
    color: rgba(0, 0, 0, .5);
    overflow: hidden;
    transition: all .3s ease-in-out;
}
.toggleWrapper .toggleLabel.active p {
    color: rgba(0, 0, 0, .8)
}
.toggle {
    display: inline-block;
    width: 50px;
    height: 25px;
    border-radius: 100px;
    position: relative;
    margin: auto;
    overflow: hidden;
    border: solid 1px rgba(0, 0, 0, .3);
    transition: all .3s ease-in-out;
    cursor: pointer;
}
.toggle.active {
    border: solid 1px #00cf67;
}
.toggle .inside {
    width: 75%;
    height: 100%;
    border-radius: 100px;
    background: rgba(0, 0, 0, .3);
    position: absolute;
    left: -25%;
    transition: all .3s ease-in-out;
}
.toggle.active .inside {
    left: 50%;
    background: #00cf67;
}

HTML

React Toggle Component

react, switch, button

编辑器支持Emmet

快捷键

React Toggle Component

react, switch, button

使用ReactJS实现的一款图片轮播界面组件

基于WebGL和ReactMotion实现的一款3D条形图表插件（在线演示）

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：