react-toggle-component/docs/component---srcdocs-components-toggle-toggle-mdx-bd8df1307efa34d15e59.js

A React UI Component to display an awesome Toggle Button control

(window.webpackJsonp=window.webpackJsonp||[]).push([[4],{OCol:function(e,o,t){"use strict";t.r(o),t.d(o,"_frontmatter",(function(){return b})),t.d(o,"default",(function(){return i}));t("5hJT"),t("W1QL"),t("K/PF"),t("t91x"),t("75LO"),t("PJhk");var l=t("SAVP"),a=t("TjRS"),n=t("ZFoC"),g=t("HUpa");t("aD51");function r(){return(r=Object.assign||function(e){for(var o=1;o<arguments.length;o++){var t=arguments[o];for(var l in t)Object.prototype.hasOwnProperty.call(t,l)&&(e[l]=t[l])}return e}).apply(this,arguments)}var b={};void 0!==b&&b&&b===Object(b)&&Object.isExtensible(b)&&!b.hasOwnProperty("__filemeta")&&Object.defineProperty(b,"__filemeta",{configurable:!0,value:{name:"_frontmatter",filename:"srcdocs/components/Toggle/toggle.mdx"}});var c={_frontmatter:b},p=a.a;function i(e){var o=e.components,t=function(e,o){if(null==e)return{};var t,l,a={},n=Object.keys(e);for(l=0;l<n.length;l++)t=n[l],o.indexOf(t)>=0||(a[t]=e[t]);return a}(e,["components"]);return Object(l.b)(p,r({},c,t,{components:o,mdxType:"MDXLayout"}),Object(l.b)("h1",{id:"toggle"},"Toggle"),Object(l.b)("p",null,"The Toggle component is an useful replacement to the standar input checkbox component.\nAnyway, remember that the toggle component is an extension of the input checkbox. So, you can use it inside a form as well.\nIn fact, remember to use the props ",Object(l.b)("inlineCode",{parentName:"p"},"name")," when you're using multiple toggle component in your view."),Object(l.b)("h2",{id:"basic-usage"},"Basic usage"),Object(l.b)("p",null,"You can wrap the Toggle component with ",Object(l.b)("inlineCode",{parentName:"p"},"label")),Object(l.b)(n.c,{__position:0,__code:'<label htmlFor="toggle-1">\n  Left label\n  <Toggle name="toggle-1" />\n</label>',__scope:{props:t,DefaultLayout:a.a,Playground:n.c,Props:n.d,Toggle:g.a},mdxType:"Playground"},Object(l.b)("label",{htmlFor:"toggle-1"},"Left label",Object(l.b)(g.a,{name:"toggle-1",mdxType:"Toggle"}))),Object(l.b)(n.c,{__position:1,__code:'<label htmlFor="toggle-2">\n  <Toggle name="toggle-2" />\n  Right label\n</label>',__scope:{props:t,DefaultLayout:a.a,Playground:n.c,Props:n.d,Toggle:g.a},mdxType:"Playground"},Object(l.b)("label",{htmlFor:"toggle-2"},Object(l.b)(g.a,{name:"toggle-2",mdxType:"Toggle"}),"Right label")),Object(l.b)("p",null,"Or set any ",Object(l.b)("inlineCode",{parentName:"p"},"label")," outside"),Object(l.b)(n.c,{__position:2,__code:'<label htmlFor="toggle-1a">Left label outside</label>\n<Toggle name="toggle-1a" />',__scope:{props:t,DefaultLayout:a.a,Playground:n.c,Props:n.d,Toggle:g.a},mdxType:"Playground"},Object(l.b)("label",{htmlFor:"toggle-1a"},"Left label outside"),Object(l.b)(g.a,{name:"toggle-1a",mdxType:"Toggle"})),Object(l.b)(n.c,{__position:3,__code:'<Toggle name="toggle-2a" />\n<label htmlFor="toggle-2a">Right label outside</label>',__scope:{props:t,DefaultLayout:a.a,Playground:n.c,Props:n.d,Toggle:g.a},mdxType:"Playground"},Object(l.b)(g.a,{name:"toggle-2a",mdxType:"Toggle"}),Object(l.b)("label",{htmlFor:"toggle-2a"},"Right label outside")),Object(l.b)("h3",{id:"disable"},"Disable"),Object(l.b)(n.c,{__position:4,__code:'<label htmlFor="toggle-3">\n  Disabled\n  <Toggle name="toggle-3" disabled />\n</label>',__scope:{props:t,DefaultLayout:a.a,Playground:n.c,Props:n.d,Toggle:g.a},mdxType:"Playground"},Object(l.b)("label",{htmlFor:"toggle-3"},"Disabled",Object(l.b)(g.a,{name:"toggle-3",disabled:!0,mdxType:"Toggle"}))),Object(l.b)("h3",{id:"appearance"},"Appearance"),Object(l.b)(n.c,{__position:5,__code:'<label htmlFor="toggle-4">\n  <Toggle\n    leftBackgroundColor="tomato"\n    rightBackgroundColor="green"\n    borderColor="tomato"\n    knobColor="white"\n    name="toggle-4"\n    onToggle={e => console.log(\'onToggle\', e.target.checked)}\n  />\n  Appearance\n</label>',__scope:{props:t,DefaultLayout:a.a,Playground:n.c,Props:n.d,Toggle:g.a},mdxType:"Playground"},Object(l.b)("label",{htmlFor:"toggle-4"},Object(l.b)(g.a,{leftBackgroundColor:"tomato",rightBackgroundColor:"green",borderColor:"tomato",knobColor:"white",name:"toggle-4",onToggle:function(e){return console.log("onToggle",e.target.checked)},mdxType:"Toggle"}),"Appearance")),Object(l.b)("h2",{id:"props"},"Props"),Object(l.b)(n.d,{of:g.a,mdxType:"Props"}))}i&&i===Object(i)&&Object.isExtensible(i)&&!i.hasOwnProperty("__filemeta")&&Object.defineProperty(i,"__filemeta",{configurable:!0,value:{name:"MDXContent",filename:"srcdocs/components/Toggle/toggle.mdx"}}),i.isMDXComponent=!0}}]);
//# sourceMappingURL=component---srcdocs-components-toggle-toggle-mdx-bd8df1307efa34d15e59.js.map