%PDF-
%PDF-
Mini Shell
Mini Shell
(this["webpackJsonpfuse-react-app"]=this["webpackJsonpfuse-react-app"]||[]).push([[79],{1130:function(e,t,n){"use strict";n.d(t,"a",(function(){return T}));var o=n(118),r=n(1100),a=n(1109),i=n(1090),c=n(1117),s=n(1119),l=n(5),u=n(0),m=n(1024),d=n(551),p=n(1087),j=n(1099),b=n(11),h=n(370),x=n(371),f=n(1131),O=n.n(f),B=n(1);const y=Object(m.a)({productionPrefix:"iframe-"});class g extends u.Component{constructor(){super(...arguments),this.state={ready:!1},this.handleRef=e=>{this.contentDocument=e?e.node.contentDocument:null},this.onContentDidMount=()=>{this.setState({ready:!0,jss:Object(h.a)({...Object(d.a)(),plugins:[...Object(d.a)().plugins,Object(x.a)()],insertionPoint:this.contentDocument.querySelector("#jss-demo-insertion-point")}),sheetsManager:new Map,container:this.contentDocument.body})},this.onContentDidUpdate=()=>{this.contentDocument.body.dir=this.props.theme.direction},this.renderHead=()=>Object(B.jsxs)(B.Fragment,{children:[Object(B.jsx)("style",{dangerouslySetInnerHTML:{__html:"\n html {\n font-size: 62.5%;\n font-family: Poppins, Roboto, Helvetica Neue, Arial, sans-serif;\n }\n "}}),Object(B.jsx)("noscript",{id:"jss-demo-insertion-point"})]})}render(){const{children:e,classes:t,theme:n}=this.props;return Object(B.jsx)(O.a,{head:this.renderHead(),ref:this.handleRef,className:Object(l.a)(t.root,"shadow"),contentDidMount:this.onContentDidMount,contentDidUpdate:this.onContentDidUpdate,children:this.state.ready?Object(B.jsx)(p.b,{jss:this.state.jss,generateClassName:y,sheetsManager:this.state.sheetsManager,children:Object(B.jsx)(j.a,{theme:n,children:Object(u.cloneElement)(e,{container:this.state.container})})}):null})}}var v=Object(b.a)((e=>({root:{backgroundColor:e.palette.background.default,flexGrow:1,height:400,border:"none"}})),{withTheme:!0})(g);function w(e){const[t,n]=Object(u.useState)(e.currentTabIndex),{component:m,raw:d,iframe:p,className:j}=e;return Object(B.jsxs)(a.a,{className:Object(l.a)(j,"shadow"),children:[Object(B.jsx)(r.a,{position:"static",color:"default",className:"shadow-0",children:Object(B.jsxs)(s.a,{classes:{root:"border-b-1",flexContainer:"justify-end"},value:t,onChange:function(e,t){n(t)},children:[m&&Object(B.jsx)(c.a,{classes:{root:"min-w-64"},icon:Object(B.jsx)(i.a,{children:"remove_red_eye"})}),d&&Object(B.jsx)(c.a,{classes:{root:"min-w-64"},icon:Object(B.jsx)(i.a,{children:"code"})})]})}),Object(B.jsxs)("div",{className:"flex justify-center max-w-full",children:[Object(B.jsx)("div",{className:0===t?"flex flex-1 max-w-full":"hidden",children:m&&(p?Object(B.jsx)(v,{children:Object(B.jsx)(m,{})}):Object(B.jsx)("div",{className:"p-24 flex flex-1 justify-center max-w-full",children:Object(B.jsx)(m,{})}))}),Object(B.jsx)("div",{className:1===t?"flex flex-1":"hidden",children:d&&Object(B.jsx)("div",{className:"flex flex-1",children:Object(B.jsx)(o.a,{component:"pre",className:"language-javascript w-full",children:d.default})})})]})]})}w.defaultProps={currentTabIndex:0};var T=w},1825:function(e,t,n){"use strict";n.r(t),n.d(t,"default",(function(){return s}));n(0);var o=n(1098),r=n(1790),a=n(1072),i=n(1);const c=Object(a.a)((e=>({root:{display:"flex",flexDirection:"column",alignItems:"center","& > *":{margin:e.spacing(1)}}})));function s(){const e=c();return Object(i.jsxs)("div",{className:e.root,children:[Object(i.jsxs)(r.a,{color:"primary","aria-label":"outlined primary button group",children:[Object(i.jsx)(o.a,{children:"One"}),Object(i.jsx)(o.a,{children:"Two"}),Object(i.jsx)(o.a,{children:"Three"})]}),Object(i.jsxs)(r.a,{variant:"contained",color:"primary","aria-label":"contained primary button group",children:[Object(i.jsx)(o.a,{children:"One"}),Object(i.jsx)(o.a,{children:"Two"}),Object(i.jsx)(o.a,{children:"Three"})]}),Object(i.jsxs)(r.a,{variant:"text",color:"primary","aria-label":"text primary button group",children:[Object(i.jsx)(o.a,{children:"One"}),Object(i.jsx)(o.a,{children:"Two"}),Object(i.jsx)(o.a,{children:"Three"})]})]})}},1826:function(e,t,n){"use strict";n.r(t),t.default="import React from 'react';\nimport Button from '@material-ui/core/Button';\nimport ButtonGroup from '@material-ui/core/ButtonGroup';\nimport { makeStyles } from '@material-ui/core/styles';\n\nconst useStyles = makeStyles((theme) => ({\n root: {\n display: 'flex',\n flexDirection: 'column',\n alignItems: 'center',\n '& > *': {\n margin: theme.spacing(1),\n },\n },\n}));\n\nexport default function BasicButtonGroup() {\n const classes = useStyles();\n\n return (\n <div className={classes.root}>\n <ButtonGroup color=\"primary\" aria-label=\"outlined primary button group\">\n <Button>One</Button>\n <Button>Two</Button>\n <Button>Three</Button>\n </ButtonGroup>\n <ButtonGroup variant=\"contained\" color=\"primary\" aria-label=\"contained primary button group\">\n <Button>One</Button>\n <Button>Two</Button>\n <Button>Three</Button>\n </ButtonGroup>\n <ButtonGroup variant=\"text\" color=\"primary\" aria-label=\"text primary button group\">\n <Button>One</Button>\n <Button>Two</Button>\n <Button>Three</Button>\n </ButtonGroup>\n </div>\n );\n}\n"},1827:function(e,t,n){"use strict";n.r(t),n.d(t,"default",(function(){return s}));n(0);var o=n(1098),r=n(1790),a=n(1072),i=n(1);const c=Object(a.a)((e=>({root:{display:"flex",flexDirection:"column",alignItems:"center","& > *":{margin:e.spacing(1)}}})));function s(){const e=c();return Object(i.jsxs)("div",{className:e.root,children:[Object(i.jsxs)(r.a,{size:"small","aria-label":"small outlined button group",children:[Object(i.jsx)(o.a,{children:"One"}),Object(i.jsx)(o.a,{children:"Two"}),Object(i.jsx)(o.a,{children:"Three"})]}),Object(i.jsxs)(r.a,{color:"secondary","aria-label":"outlined secondary button group",children:[Object(i.jsx)(o.a,{children:"One"}),Object(i.jsx)(o.a,{children:"Two"}),Object(i.jsx)(o.a,{children:"Three"})]}),Object(i.jsxs)(r.a,{size:"large",color:"primary","aria-label":"large outlined primary button group",children:[Object(i.jsx)(o.a,{children:"One"}),Object(i.jsx)(o.a,{children:"Two"}),Object(i.jsx)(o.a,{children:"Three"})]})]})}},1828:function(e,t,n){"use strict";n.r(t),t.default="import React from 'react';\nimport Button from '@material-ui/core/Button';\nimport ButtonGroup from '@material-ui/core/ButtonGroup';\nimport { makeStyles } from '@material-ui/core/styles';\n\nconst useStyles = makeStyles((theme) => ({\n root: {\n display: 'flex',\n flexDirection: 'column',\n alignItems: 'center',\n '& > *': {\n margin: theme.spacing(1),\n },\n },\n}));\n\nexport default function GroupSizesColors() {\n const classes = useStyles();\n\n return (\n <div className={classes.root}>\n <ButtonGroup size=\"small\" aria-label=\"small outlined button group\">\n <Button>One</Button>\n <Button>Two</Button>\n <Button>Three</Button>\n </ButtonGroup>\n <ButtonGroup color=\"secondary\" aria-label=\"outlined secondary button group\">\n <Button>One</Button>\n <Button>Two</Button>\n <Button>Three</Button>\n </ButtonGroup>\n <ButtonGroup size=\"large\" color=\"primary\" aria-label=\"large outlined primary button group\">\n <Button>One</Button>\n <Button>Two</Button>\n <Button>Three</Button>\n </ButtonGroup>\n </div>\n );\n}\n"},1829:function(e,t,n){"use strict";n.r(t),n.d(t,"default",(function(){return s}));n(0);var o=n(1098),r=n(1790),a=n(1072),i=n(1);const c=Object(a.a)((e=>({root:{display:"flex","& > *":{margin:e.spacing(1)}}})));function s(){const e=c();return Object(i.jsxs)("div",{className:e.root,children:[Object(i.jsxs)(r.a,{orientation:"vertical",color:"primary","aria-label":"vertical outlined primary button group",children:[Object(i.jsx)(o.a,{children:"One"}),Object(i.jsx)(o.a,{children:"Two"}),Object(i.jsx)(o.a,{children:"Three"})]}),Object(i.jsxs)(r.a,{orientation:"vertical",color:"primary","aria-label":"vertical contained primary button group",variant:"contained",children:[Object(i.jsx)(o.a,{children:"One"}),Object(i.jsx)(o.a,{children:"Two"}),Object(i.jsx)(o.a,{children:"Three"})]}),Object(i.jsxs)(r.a,{orientation:"vertical",color:"primary","aria-label":"vertical contained primary button group",variant:"text",children:[Object(i.jsx)(o.a,{children:"One"}),Object(i.jsx)(o.a,{children:"Two"}),Object(i.jsx)(o.a,{children:"Three"})]})]})}},1830:function(e,t,n){"use strict";n.r(t),t.default='import React from \'react\';\nimport Button from \'@material-ui/core/Button\';\nimport ButtonGroup from \'@material-ui/core/ButtonGroup\';\nimport { makeStyles } from \'@material-ui/core/styles\';\n\nconst useStyles = makeStyles((theme) => ({\n root: {\n display: \'flex\',\n \'& > *\': {\n margin: theme.spacing(1),\n },\n },\n}));\n\nexport default function GroupOrientation() {\n const classes = useStyles();\n\n return (\n <div className={classes.root}>\n <ButtonGroup\n orientation="vertical"\n color="primary"\n aria-label="vertical outlined primary button group"\n >\n <Button>One</Button>\n <Button>Two</Button>\n <Button>Three</Button>\n </ButtonGroup>\n <ButtonGroup\n orientation="vertical"\n color="primary"\n aria-label="vertical contained primary button group"\n variant="contained"\n >\n <Button>One</Button>\n <Button>Two</Button>\n <Button>Three</Button>\n </ButtonGroup>\n <ButtonGroup\n orientation="vertical"\n color="primary"\n aria-label="vertical contained primary button group"\n variant="text"\n >\n <Button>One</Button>\n <Button>Two</Button>\n <Button>Three</Button>\n </ButtonGroup>\n </div>\n );\n}\n'},1831:function(e,t,n){"use strict";n.r(t),n.d(t,"default",(function(){return f}));var o=n(0),r=n.n(o),a=n(1172),i=n(1098),c=n(1790),s=n(1832),l=n.n(s),u=n(1026),m=n(368),d=n(193),p=n(1041),j=n(1092),b=n(1032),h=n(1);const x=["Create a merge commit","Squash and merge","Rebase and merge"];function f(){const[e,t]=r.a.useState(!1),n=r.a.useRef(null),[o,s]=r.a.useState(1),f=e=>{n.current&&n.current.contains(e.target)||t(!1)};return Object(h.jsx)(a.a,{container:!0,direction:"column",alignItems:"center",children:Object(h.jsxs)(a.a,{item:!0,xs:12,children:[Object(h.jsxs)(c.a,{variant:"contained",color:"primary",ref:n,"aria-label":"split button",children:[Object(h.jsx)(i.a,{onClick:()=>{console.info("You clicked ".concat(x[o]))},children:x[o]}),Object(h.jsx)(i.a,{color:"primary",size:"small","aria-controls":e?"split-button-menu":void 0,"aria-expanded":e?"true":void 0,"aria-label":"select merge strategy","aria-haspopup":"menu",onClick:()=>{t((e=>!e))},children:Object(h.jsx)(l.a,{})})]}),Object(h.jsx)(p.a,{open:e,anchorEl:n.current,role:void 0,transition:!0,disablePortal:!0,children:e=>{let{TransitionProps:n,placement:r}=e;return Object(h.jsx)(m.a,{...n,style:{transformOrigin:"bottom"===r?"center top":"center bottom"},children:Object(h.jsx)(d.a,{children:Object(h.jsx)(u.a,{onClickAway:f,children:Object(h.jsx)(b.a,{id:"split-button-menu",children:x.map(((e,n)=>Object(h.jsx)(j.a,{disabled:2===n,selected:n===o,onClick:e=>((e,n)=>{s(n),t(!1)})(0,n),children:e},e)))})})})})}})]})})}},1833:function(e,t,n){"use strict";n.r(t),t.default="import React from 'react';\nimport Grid from '@material-ui/core/Grid';\nimport Button from '@material-ui/core/Button';\nimport ButtonGroup from '@material-ui/core/ButtonGroup';\nimport ArrowDropDownIcon from '@material-ui/icons/ArrowDropDown';\nimport ClickAwayListener from '@material-ui/core/ClickAwayListener';\nimport Grow from '@material-ui/core/Grow';\nimport Paper from '@material-ui/core/Paper';\nimport Popper from '@material-ui/core/Popper';\nimport MenuItem from '@material-ui/core/MenuItem';\nimport MenuList from '@material-ui/core/MenuList';\n\nconst options = ['Create a merge commit', 'Squash and merge', 'Rebase and merge'];\n\nexport default function SplitButton() {\n const [open, setOpen] = React.useState(false);\n const anchorRef = React.useRef(null);\n const [selectedIndex, setSelectedIndex] = React.useState(1);\n\n const handleClick = () => {\n console.info(`You clicked ${options[selectedIndex]}`);\n };\n\n const handleMenuItemClick = (event, index) => {\n setSelectedIndex(index);\n setOpen(false);\n };\n\n const handleToggle = () => {\n setOpen((prevOpen) => !prevOpen);\n };\n\n const handleClose = (event) => {\n if (anchorRef.current && anchorRef.current.contains(event.target)) {\n return;\n }\n\n setOpen(false);\n };\n\n return (\n <Grid container direction=\"column\" alignItems=\"center\">\n <Grid item xs={12}>\n <ButtonGroup variant=\"contained\" color=\"primary\" ref={anchorRef} aria-label=\"split button\">\n <Button onClick={handleClick}>{options[selectedIndex]}</Button>\n <Button\n color=\"primary\"\n size=\"small\"\n aria-controls={open ? 'split-button-menu' : undefined}\n aria-expanded={open ? 'true' : undefined}\n aria-label=\"select merge strategy\"\n aria-haspopup=\"menu\"\n onClick={handleToggle}\n >\n <ArrowDropDownIcon />\n </Button>\n </ButtonGroup>\n <Popper open={open} anchorEl={anchorRef.current} role={undefined} transition disablePortal>\n {({ TransitionProps, placement }) => (\n <Grow\n {...TransitionProps}\n style={{\n transformOrigin: placement === 'bottom' ? 'center top' : 'center bottom',\n }}\n >\n <Paper>\n <ClickAwayListener onClickAway={handleClose}>\n <MenuList id=\"split-button-menu\">\n {options.map((option, index) => (\n <MenuItem\n key={option}\n disabled={index === 2}\n selected={index === selectedIndex}\n onClick={(event) => handleMenuItemClick(event, index)}\n >\n {option}\n </MenuItem>\n ))}\n </MenuList>\n </ClickAwayListener>\n </Paper>\n </Grow>\n )}\n </Popper>\n </Grid>\n </Grid>\n );\n}\n"},1834:function(e,t,n){"use strict";n.r(t),n.d(t,"default",(function(){return i}));n(0);var o=n(1790),r=n(1098),a=n(1);function i(){return Object(a.jsxs)(o.a,{disableElevation:!0,variant:"contained",color:"primary",children:[Object(a.jsx)(r.a,{children:"One"}),Object(a.jsx)(r.a,{children:"Two"})]})}},1835:function(e,t,n){"use strict";n.r(t),t.default="import React from 'react';\nimport ButtonGroup from '@material-ui/core/ButtonGroup';\nimport Button from '@material-ui/core/Button';\n\nexport default function DisableElevation() {\n return (\n <ButtonGroup disableElevation variant=\"contained\" color=\"primary\">\n <Button>One</Button>\n <Button>Two</Button>\n </ButtonGroup>\n );\n}\n"},2569:function(e,t,n){"use strict";n.r(t);var o=n(1130),r=n(1098),a=n(1090),i=n(194),c=n(1072),s=n(1);const l=Object(c.a)((e=>({layoutRoot:{"& .description":{marginBottom:16}}})));t.default=function(e){return l(),Object(s.jsxs)(s.Fragment,{children:[Object(s.jsx)("div",{className:"flex flex-1 flex-grow-0 items-center justify-end",children:Object(s.jsxs)(r.a,{className:"normal-case",variant:"outlined",component:"a",href:"https://material-ui.com/components/button-group",target:"_blank",role:"button",children:[Object(s.jsx)(a.a,{children:"link"}),Object(s.jsx)("span",{className:"mx-4",children:"Reference"})]})}),Object(s.jsx)(i.a,{className:"text-44 mt-32 mb-8",component:"h1",children:"Button group"}),Object(s.jsx)(i.a,{className:"description",children:"The ButtonGroup component can be used to group related buttons."}),Object(s.jsx)(i.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Basic button group"}),Object(s.jsx)(i.a,{className:"mb-16",component:"div",children:Object(s.jsx)(o.a,{className:"my-24",iframe:!1,component:n(1825).default,raw:n(1826)})}),Object(s.jsx)(i.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Sizes and colors"}),Object(s.jsx)(i.a,{className:"mb-16",component:"div",children:Object(s.jsx)(o.a,{className:"my-24",iframe:!1,component:n(1827).default,raw:n(1828)})}),Object(s.jsx)(i.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Vertical group"}),Object(s.jsx)(i.a,{className:"mb-16",component:"div",children:Object(s.jsx)(o.a,{className:"my-24",iframe:!1,component:n(1829).default,raw:n(1830)})}),Object(s.jsx)(i.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Split button"}),Object(s.jsxs)(i.a,{className:"mb-16",component:"div",children:[Object(s.jsx)("code",{children:"ButtonGroup"})," can also be used to create a split button. The dropdown can change the button action (as in this example), or be used to immediately trigger a related action."]}),Object(s.jsx)(i.a,{className:"mb-16",component:"div",children:Object(s.jsx)(o.a,{className:"my-24",iframe:!1,component:n(1831).default,raw:n(1833)})}),Object(s.jsx)(i.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Disabled elevation"}),Object(s.jsxs)(i.a,{className:"mb-16",component:"div",children:["You can remove the elevation with the ",Object(s.jsx)("code",{children:"disableElevation"})," prop."]}),Object(s.jsx)(i.a,{className:"mb-16",component:"div",children:Object(s.jsx)(o.a,{className:"my-24",iframe:!1,component:n(1834).default,raw:n(1835)})})]})}}}]);
Zerion Mini Shell 1.0