react-toggle-component
Version:
A React UI Component to display an awesome Toggle Button control
2 lines • 8.33 kB
JavaScript
(window.webpackJsonp=window.webpackJsonp||[]).push([[6],{"+jwX":function(e,o,n){"use strict";n.r(o),n.d(o,"_frontmatter",(function(){return l})),n.d(o,"default",(function(){return i}));n("5hJT"),n("W1QL"),n("K/PF"),n("t91x"),n("75LO"),n("PJhk");var t=n("SAVP"),a=n("TjRS"),r=n("ZFoC"),p=n("HUpa"),g=n("sr9g");n("aD51");function b(){return(b=Object.assign||function(e){for(var o=1;o<arguments.length;o++){var n=arguments[o];for(var t in n)Object.prototype.hasOwnProperty.call(n,t)&&(e[t]=n[t])}return e}).apply(this,arguments)}var l={};void 0!==l&&l&&l===Object(l)&&Object.isExtensible(l)&&!l.hasOwnProperty("__filemeta")&&Object.defineProperty(l,"__filemeta",{configurable:!0,value:{name:"_frontmatter",filename:"srcdocs/theming.mdx"}});var d={_frontmatter:l},c=a.a;function i(e){var o=e.components,n=function(e,o){if(null==e)return{};var n,t,a={},r=Object.keys(e);for(t=0;t<r.length;t++)n=r[t],o.indexOf(n)>=0||(a[n]=e[n]);return a}(e,["components"]);return Object(t.b)(c,b({},d,n,{components:o,mdxType:"MDXLayout"}),Object(t.b)("h1",{id:"theming"},"Theming"),Object(t.b)("p",null,"This new version allow to change the whole toggle appearance. Now you'll be able to change every single color and size, for each single toggle component of for the whole user interface."),Object(t.b)("h2",{id:"how-change-the-toggle-appearance"},"How change the toggle appearance"),Object(t.b)("p",null,"You may change the toggle appearance in two way: by using the new props for each single instance of your toggle component, or by using a theme provider."),Object(t.b)("h2",{id:"new-appearance-props"},"New appearance props"),Object(t.b)("p",null,"You may use the new props to change the appearance for a single instance of component"),Object(t.b)(r.c,{__position:0,__code:'<p>Change the background</p>\n<Toggle name="t-1" backgroundColor="rgba(0,0,0,1)" />',__scope:{props:n,DefaultLayout:a.a,Playground:r.c,Props:r.d,Toggle:p.b,ReactToggleThemeProvider:g.a},mdxType:"Playground"},Object(t.b)("p",null,"Change the background"),Object(t.b)(p.b,{name:"t-1",backgroundColor:"rgba(0,0,0,1)",mdxType:"Toggle"})),Object(t.b)(r.c,{__position:1,__code:'<p>Change the background when on</p>\n<Toggle name="t-2" rightBackgroundColor="tomato" />',__scope:{props:n,DefaultLayout:a.a,Playground:r.c,Props:r.d,Toggle:p.b,ReactToggleThemeProvider:g.a},mdxType:"Playground"},Object(t.b)("p",null,"Change the background when on"),Object(t.b)(p.b,{name:"t-2",rightBackgroundColor:"tomato",mdxType:"Toggle"})),Object(t.b)("p",null,"Now you can also change others appearance properties"),Object(t.b)(r.c,{__position:2,__code:'<p>Change the shape</p>\n<Toggle name="t-3" radius="3px" radiusBackground="2px" knobRadius="2px" />',__scope:{props:n,DefaultLayout:a.a,Playground:r.c,Props:r.d,Toggle:p.b,ReactToggleThemeProvider:g.a},mdxType:"Playground"},Object(t.b)("p",null,"Change the shape"),Object(t.b)(p.b,{name:"t-3",radius:"3px",radiusBackground:"2px",knobRadius:"2px",mdxType:"Toggle"})),Object(t.b)(r.c,{__position:3,__code:'<p>Change the width size</p>\n<Toggle name="t-4" width="128px" />',__scope:{props:n,DefaultLayout:a.a,Playground:r.c,Props:r.d,Toggle:p.b,ReactToggleThemeProvider:g.a},mdxType:"Playground"},Object(t.b)("p",null,"Change the width size"),Object(t.b)(p.b,{name:"t-4",width:"128px",mdxType:"Toggle"})),Object(t.b)(r.c,{__position:4,__code:'<p>Change the height size</p>\n<Toggle name="t-4h" height="48px" />',__scope:{props:n,DefaultLayout:a.a,Playground:r.c,Props:r.d,Toggle:p.b,ReactToggleThemeProvider:g.a},mdxType:"Playground"},Object(t.b)("p",null,"Change the height size"),Object(t.b)(p.b,{name:"t-4h",height:"48px",mdxType:"Toggle"})),Object(t.b)(r.c,{__position:5,__code:'<p>Change the knob size</p>\n<Toggle name="t-5" knobWidth="8px" knobHeight="8px" />\n<Toggle\n name="t-6"\n radius="3px"\n radiusBackground="2px"\n knobRadius="2px"\n width="128px"\n knobWidth="50px"\n/>',__scope:{props:n,DefaultLayout:a.a,Playground:r.c,Props:r.d,Toggle:p.b,ReactToggleThemeProvider:g.a},mdxType:"Playground"},Object(t.b)("p",null,"Change the knob size"),Object(t.b)(p.b,{name:"t-5",knobWidth:"8px",knobHeight:"8px",mdxType:"Toggle"}),Object(t.b)(p.b,{name:"t-6",radius:"3px",radiusBackground:"2px",knobRadius:"2px",width:"128px",knobWidth:"50px",mdxType:"Toggle"})),Object(t.b)("p",null,"You can also change the size and the border"),Object(t.b)(r.c,{__position:6,__code:'<p>Change the border size</p>\n<Toggle name="t-7" borderWidth="1px" />\n<Toggle name="t-8" borderWidth="3px" />\n<Toggle name="t-9" borderWidth="5px" />\n<Toggle name="t-10" borderWidth="5px" knobWidth="8px" knobHeight="8px" />',__scope:{props:n,DefaultLayout:a.a,Playground:r.c,Props:r.d,Toggle:p.b,ReactToggleThemeProvider:g.a},mdxType:"Playground"},Object(t.b)("p",null,"Change the border size"),Object(t.b)(p.b,{name:"t-7",borderWidth:"1px",mdxType:"Toggle"}),Object(t.b)(p.b,{name:"t-8",borderWidth:"3px",mdxType:"Toggle"}),Object(t.b)(p.b,{name:"t-9",borderWidth:"5px",mdxType:"Toggle"}),Object(t.b)(p.b,{name:"t-10",borderWidth:"5px",knobWidth:"8px",knobHeight:"8px",mdxType:"Toggle"})),Object(t.b)("p",null,"Of course, you can set the knob gap"),Object(t.b)(r.c,{__position:7,__code:'<p>Change the border size</p>\n<Toggle name="t-11" borderWidth="1px" knobGap="8px" />\n<Toggle name="t-12" borderWidth="3px" knobGap="8px" />\n<Toggle name="t-13" borderWidth="5px" knobGap="8px" />\n<Toggle\n name="t-14"\n borderWidth="5px"\n knobWidth="8px"\n knobHeight="8px"\n knobGap="8px"\n/>',__scope:{props:n,DefaultLayout:a.a,Playground:r.c,Props:r.d,Toggle:p.b,ReactToggleThemeProvider:g.a},mdxType:"Playground"},Object(t.b)("p",null,"Change the border size"),Object(t.b)(p.b,{name:"t-11",borderWidth:"1px",knobGap:"8px",mdxType:"Toggle"}),Object(t.b)(p.b,{name:"t-12",borderWidth:"3px",knobGap:"8px",mdxType:"Toggle"}),Object(t.b)(p.b,{name:"t-13",borderWidth:"5px",knobGap:"8px",mdxType:"Toggle"}),Object(t.b)(p.b,{name:"t-14",borderWidth:"5px",knobWidth:"8px",knobHeight:"8px",knobGap:"8px",mdxType:"Toggle"})),Object(t.b)("h2",{id:"theme-provider"},"Theme Provider"),Object(t.b)("p",null,"Instead of change every single props, you might use the ",Object(t.b)("inlineCode",{parentName:"p"},"ReactToggleThemeProvider")),Object(t.b)("pre",null,Object(t.b)("code",b({parentName:"pre"},{className:"language-jsx"}),'import {ReactToggleThemeProvider} from "react-toggle-component";\n')),Object(t.b)("p",null,"The current default theme is the following"),Object(t.b)("pre",null,Object(t.b)("code",b({parentName:"pre"},{className:"language-jsx"}),'export default {\n version: "1.0.0",\n width: "48px",\n height: "24px",\n\n borderWidth: "2px",\n borderColor: "#aaa",\n leftBorderColor: "#aaa",\n rightBorderColor: "#3887b7",\n\n leftBackgroundColor : "#fff",\n rightBackgroundColor : "#fff",\n backgroundColorDisabled : "#eee",\n\n radius : "256px",\n radiusBackground : "256px",\n knobRadius : "100%",\n\n knobWidth : "16px",\n knobHeight : "16px",\n knobGap: "4px",\n\n knobColor: "#aaa",\n leftKnobColor: "#aaa",\n rightKnobColor: "#3887b7",\n};\n')),Object(t.b)(r.c,{__position:8,__code:'<ReactToggleThemeProvider theme={{ leftBackgroundColor: \'tomato\' }}>\n <div>\n <p>All toggle children will use the same theme</p>\n <Toggle name="t-p1" />\n <Toggle name="t-p2" />\n <Toggle name="t-p3" />\n <Toggle name="t-p4" />\n </div>\n</ReactToggleThemeProvider>',__scope:{props:n,DefaultLayout:a.a,Playground:r.c,Props:r.d,Toggle:p.b,ReactToggleThemeProvider:g.a},mdxType:"Playground"},Object(t.b)(g.a,{theme:{leftBackgroundColor:"tomato"},mdxType:"ReactToggleThemeProvider"},Object(t.b)("div",null,Object(t.b)("p",null,"All toggle children will use the same theme"),Object(t.b)(p.b,{name:"t-p1",mdxType:"Toggle"}),Object(t.b)(p.b,{name:"t-p2",mdxType:"Toggle"}),Object(t.b)(p.b,{name:"t-p3",mdxType:"Toggle"}),Object(t.b)(p.b,{name:"t-p4",mdxType:"Toggle"})))),Object(t.b)("p",null,"As you can see from the above example, you don't need to write your own custome theme with all properties, you may override one or more properties."))}i&&i===Object(i)&&Object.isExtensible(i)&&!i.hasOwnProperty("__filemeta")&&Object.defineProperty(i,"__filemeta",{configurable:!0,value:{name:"MDXContent",filename:"srcdocs/theming.mdx"}}),i.isMDXComponent=!0}}]);
//# sourceMappingURL=component---srcdocs-theming-mdx-c292665b7998848ec7ec.js.map