%PDF-
%PDF-
Mini Shell
Mini Shell
(this["webpackJsonpfuse-react-app"]=this["webpackJsonpfuse-react-app"]||[]).push([[82],{1130:function(e,t,n){"use strict";n.d(t,"a",(function(){return N}));var a=n(118),i=n(1100),r=n(1109),s=n(1090),c=n(1117),o=n(1119),m=n(5),l=n(0),d=n(1024),j=n(551),p=n(1087),h=n(1099),u=n(11),b=n(370),x=n(371),f=n(1131),v=n.n(f),O=n(1);const y=Object(d.a)({productionPrefix:"iframe-"});class g extends l.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(b.a)({...Object(j.a)(),plugins:[...Object(j.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(O.jsxs)(O.Fragment,{children:[Object(O.jsx)("style",{dangerouslySetInnerHTML:{__html:"\n html {\n font-size: 62.5%;\n font-family: Poppins, Roboto, Helvetica Neue, Arial, sans-serif;\n }\n "}}),Object(O.jsx)("noscript",{id:"jss-demo-insertion-point"})]})}render(){const{children:e,classes:t,theme:n}=this.props;return Object(O.jsx)(v.a,{head:this.renderHead(),ref:this.handleRef,className:Object(m.a)(t.root,"shadow"),contentDidMount:this.onContentDidMount,contentDidUpdate:this.onContentDidUpdate,children:this.state.ready?Object(O.jsx)(p.b,{jss:this.state.jss,generateClassName:y,sheetsManager:this.state.sheetsManager,children:Object(O.jsx)(h.a,{theme:n,children:Object(l.cloneElement)(e,{container:this.state.container})})}):null})}}var I=Object(u.a)((e=>({root:{backgroundColor:e.palette.background.default,flexGrow:1,height:400,border:"none"}})),{withTheme:!0})(g);function L(e){const[t,n]=Object(l.useState)(e.currentTabIndex),{component:d,raw:j,iframe:p,className:h}=e;return Object(O.jsxs)(r.a,{className:Object(m.a)(h,"shadow"),children:[Object(O.jsx)(i.a,{position:"static",color:"default",className:"shadow-0",children:Object(O.jsxs)(o.a,{classes:{root:"border-b-1",flexContainer:"justify-end"},value:t,onChange:function(e,t){n(t)},children:[d&&Object(O.jsx)(c.a,{classes:{root:"min-w-64"},icon:Object(O.jsx)(s.a,{children:"remove_red_eye"})}),j&&Object(O.jsx)(c.a,{classes:{root:"min-w-64"},icon:Object(O.jsx)(s.a,{children:"code"})})]})}),Object(O.jsxs)("div",{className:"flex justify-center max-w-full",children:[Object(O.jsx)("div",{className:0===t?"flex flex-1 max-w-full":"hidden",children:d&&(p?Object(O.jsx)(I,{children:Object(O.jsx)(d,{})}):Object(O.jsx)("div",{className:"p-24 flex flex-1 justify-center max-w-full",children:Object(O.jsx)(d,{})}))}),Object(O.jsx)("div",{className:1===t?"flex flex-1":"hidden",children:j&&Object(O.jsx)("div",{className:"flex flex-1",children:Object(O.jsx)(a.a,{component:"pre",className:"language-javascript w-full",children:j.default})})})]})]})}L.defaultProps={currentTabIndex:0};var N=L},1942:function(e,t,n){"use strict";n.r(t),n.d(t,"default",(function(){return l}));n(0);var a=n(1072),i=n(1033),r=n(1034),s=n(1103),c=n(1108),o=n(1);const m=Object(a.a)((e=>({root:{width:"100%",maxWidth:360,backgroundColor:e.palette.background.paper}})));function l(){const e=m();return Object(o.jsxs)(i.a,{component:"nav",className:e.root,"aria-label":"mailbox folders",children:[Object(o.jsx)(r.a,{button:!0,children:Object(o.jsx)(s.a,{primary:"Inbox"})}),Object(o.jsx)(c.a,{}),Object(o.jsx)(r.a,{button:!0,divider:!0,children:Object(o.jsx)(s.a,{primary:"Drafts"})}),Object(o.jsx)(r.a,{button:!0,children:Object(o.jsx)(s.a,{primary:"Trash"})}),Object(o.jsx)(c.a,{light:!0}),Object(o.jsx)(r.a,{button:!0,children:Object(o.jsx)(s.a,{primary:"Spam"})})]})}},1943:function(e,t,n){"use strict";n.r(t),t.default="import React from 'react';\nimport { makeStyles } from '@material-ui/core/styles';\nimport List from '@material-ui/core/List';\nimport ListItem from '@material-ui/core/ListItem';\nimport ListItemText from '@material-ui/core/ListItemText';\nimport Divider from '@material-ui/core/Divider';\n\nconst useStyles = makeStyles((theme) => ({\n root: {\n width: '100%',\n maxWidth: 360,\n backgroundColor: theme.palette.background.paper,\n },\n}));\n\nexport default function ListDividers() {\n const classes = useStyles();\n\n return (\n <List component=\"nav\" className={classes.root} aria-label=\"mailbox folders\">\n <ListItem button>\n <ListItemText primary=\"Inbox\" />\n </ListItem>\n <Divider />\n <ListItem button divider>\n <ListItemText primary=\"Drafts\" />\n </ListItem>\n <ListItem button>\n <ListItemText primary=\"Trash\" />\n </ListItem>\n <Divider light />\n <ListItem button>\n <ListItemText primary=\"Spam\" />\n </ListItem>\n </List>\n );\n}\n"},1944:function(e,t,n){"use strict";n.r(t),n.d(t,"default",(function(){return f}));n(0);var a=n(1072),i=n(1033),r=n(1034),s=n(1103),c=n(1343),o=n(1124),m=n(1352),l=n.n(m),d=n(1353),j=n.n(d),p=n(1296),h=n.n(p),u=n(1108),b=n(1);const x=Object(a.a)((e=>({root:{width:"100%",maxWidth:360,backgroundColor:e.palette.background.paper}})));function f(){const e=x();return Object(b.jsxs)(i.a,{className:e.root,children:[Object(b.jsxs)(r.a,{children:[Object(b.jsx)(c.a,{children:Object(b.jsx)(o.a,{children:Object(b.jsx)(l.a,{})})}),Object(b.jsx)(s.a,{primary:"Photos",secondary:"Jan 9, 2014"})]}),Object(b.jsx)(u.a,{variant:"inset",component:"li"}),Object(b.jsxs)(r.a,{children:[Object(b.jsx)(c.a,{children:Object(b.jsx)(o.a,{children:Object(b.jsx)(j.a,{})})}),Object(b.jsx)(s.a,{primary:"Work",secondary:"Jan 7, 2014"})]}),Object(b.jsx)(u.a,{variant:"inset",component:"li"}),Object(b.jsxs)(r.a,{children:[Object(b.jsx)(c.a,{children:Object(b.jsx)(o.a,{children:Object(b.jsx)(h.a,{})})}),Object(b.jsx)(s.a,{primary:"Vacation",secondary:"July 20, 2014"})]})]})}},1945:function(e,t,n){"use strict";n.r(t),t.default="import React from 'react';\nimport { makeStyles } from '@material-ui/core/styles';\nimport List from '@material-ui/core/List';\nimport ListItem from '@material-ui/core/ListItem';\nimport ListItemText from '@material-ui/core/ListItemText';\nimport ListItemAvatar from '@material-ui/core/ListItemAvatar';\nimport Avatar from '@material-ui/core/Avatar';\nimport ImageIcon from '@material-ui/icons/Image';\nimport WorkIcon from '@material-ui/icons/Work';\nimport BeachAccessIcon from '@material-ui/icons/BeachAccess';\nimport Divider from '@material-ui/core/Divider';\n\nconst useStyles = makeStyles((theme) => ({\n root: {\n width: '100%',\n maxWidth: 360,\n backgroundColor: theme.palette.background.paper,\n },\n}));\n\nexport default function InsetDividers() {\n const classes = useStyles();\n\n return (\n <List className={classes.root}>\n <ListItem>\n <ListItemAvatar>\n <Avatar>\n <ImageIcon />\n </Avatar>\n </ListItemAvatar>\n <ListItemText primary=\"Photos\" secondary=\"Jan 9, 2014\" />\n </ListItem>\n <Divider variant=\"inset\" component=\"li\" />\n <ListItem>\n <ListItemAvatar>\n <Avatar>\n <WorkIcon />\n </Avatar>\n </ListItemAvatar>\n <ListItemText primary=\"Work\" secondary=\"Jan 7, 2014\" />\n </ListItem>\n <Divider variant=\"inset\" component=\"li\" />\n <ListItem>\n <ListItemAvatar>\n <Avatar>\n <BeachAccessIcon />\n </Avatar>\n </ListItemAvatar>\n <ListItemText primary=\"Vacation\" secondary=\"July 20, 2014\" />\n </ListItem>\n </List>\n );\n}\n"},1946:function(e,t,n){"use strict";n.r(t),n.d(t,"default",(function(){return u}));n(0);var a=n(1072),i=n(1033),r=n(1034),s=n(1343),c=n(1103),o=n(1124),m=n(1296),l=n.n(m),d=n(1108),j=n(194),p=n(1);const h=Object(a.a)((e=>({root:{width:"100%",maxWidth:360,backgroundColor:e.palette.background.paper},dividerFullWidth:{margin:"5px 0 0 ".concat(e.spacing(2),"px")},dividerInset:{margin:"5px 0 0 ".concat(e.spacing(9),"px")}})));function u(){const e=h();return Object(p.jsxs)(i.a,{className:e.root,children:[Object(p.jsx)(r.a,{children:Object(p.jsx)(c.a,{primary:"Photos",secondary:"Jan 9, 2014"})}),Object(p.jsx)(d.a,{component:"li"}),Object(p.jsx)("li",{children:Object(p.jsx)(j.a,{className:e.dividerFullWidth,color:"textSecondary",display:"block",variant:"caption",children:"Divider"})}),Object(p.jsx)(r.a,{children:Object(p.jsx)(c.a,{primary:"Work",secondary:"Jan 7, 2014"})}),Object(p.jsx)(d.a,{component:"li",variant:"inset"}),Object(p.jsx)("li",{children:Object(p.jsx)(j.a,{className:e.dividerInset,color:"textSecondary",display:"block",variant:"caption",children:"Leisure"})}),Object(p.jsxs)(r.a,{children:[Object(p.jsx)(s.a,{children:Object(p.jsx)(o.a,{children:Object(p.jsx)(l.a,{})})}),Object(p.jsx)(c.a,{primary:"Vacation",secondary:"July 20, 2014"})]})]})}},1947:function(e,t,n){"use strict";n.r(t),t.default='import React from \'react\';\nimport { makeStyles } from \'@material-ui/core/styles\';\nimport List from \'@material-ui/core/List\';\nimport ListItem from \'@material-ui/core/ListItem\';\nimport ListItemAvatar from \'@material-ui/core/ListItemAvatar\';\nimport ListItemText from \'@material-ui/core/ListItemText\';\nimport Avatar from \'@material-ui/core/Avatar\';\nimport BeachAccessIcon from \'@material-ui/icons/BeachAccess\';\nimport Divider from \'@material-ui/core/Divider\';\nimport Typography from \'@material-ui/core/Typography\';\n\nconst useStyles = makeStyles((theme) => ({\n root: {\n width: \'100%\',\n maxWidth: 360,\n backgroundColor: theme.palette.background.paper,\n },\n dividerFullWidth: {\n margin: `5px 0 0 ${theme.spacing(2)}px`,\n },\n dividerInset: {\n margin: `5px 0 0 ${theme.spacing(9)}px`,\n },\n}));\n\nexport default function SubheaderDividers() {\n const classes = useStyles();\n\n return (\n <List className={classes.root}>\n <ListItem>\n <ListItemText primary="Photos" secondary="Jan 9, 2014" />\n </ListItem>\n <Divider component="li" />\n <li>\n <Typography\n className={classes.dividerFullWidth}\n color="textSecondary"\n display="block"\n variant="caption"\n >\n Divider\n </Typography>\n </li>\n <ListItem>\n <ListItemText primary="Work" secondary="Jan 7, 2014" />\n </ListItem>\n <Divider component="li" variant="inset" />\n <li>\n <Typography\n className={classes.dividerInset}\n color="textSecondary"\n display="block"\n variant="caption"\n >\n Leisure\n </Typography>\n </li>\n <ListItem>\n <ListItemAvatar>\n <Avatar>\n <BeachAccessIcon />\n </Avatar>\n </ListItemAvatar>\n <ListItemText primary="Vacation" secondary="July 20, 2014" />\n </ListItem>\n </List>\n );\n}\n'},1948:function(e,t,n){"use strict";n.r(t),n.d(t,"default",(function(){return d}));n(0);var a=n(1072),i=n(1192),r=n(1098),s=n(1172),c=n(1108),o=n(194),m=n(1);const l=Object(a.a)((e=>({root:{width:"100%",maxWidth:360,backgroundColor:e.palette.background.paper},chip:{margin:e.spacing(.5)},section1:{margin:e.spacing(3,2)},section2:{margin:e.spacing(2)},section3:{margin:e.spacing(3,1,1)}})));function d(){const e=l();return Object(m.jsxs)("div",{className:e.root,children:[Object(m.jsxs)("div",{className:e.section1,children:[Object(m.jsxs)(s.a,{container:!0,alignItems:"center",children:[Object(m.jsx)(s.a,{item:!0,xs:!0,children:Object(m.jsx)(o.a,{gutterBottom:!0,variant:"h4",children:"Toothbrush"})}),Object(m.jsx)(s.a,{item:!0,children:Object(m.jsx)(o.a,{gutterBottom:!0,variant:"h6",children:"$4.50"})})]}),Object(m.jsx)(o.a,{color:"textSecondary",variant:"body2",children:"Pinstriped cornflower blue cotton blouse takes you on a walk to the park or just down the hall."})]}),Object(m.jsx)(c.a,{variant:"middle"}),Object(m.jsxs)("div",{className:e.section2,children:[Object(m.jsx)(o.a,{gutterBottom:!0,variant:"body1",children:"Select type"}),Object(m.jsxs)("div",{children:[Object(m.jsx)(i.a,{className:e.chip,label:"Extra Soft"}),Object(m.jsx)(i.a,{className:e.chip,color:"primary",label:"Soft"}),Object(m.jsx)(i.a,{className:e.chip,label:"Medium"}),Object(m.jsx)(i.a,{className:e.chip,label:"Hard"})]})]}),Object(m.jsx)("div",{className:e.section3,children:Object(m.jsx)(r.a,{color:"primary",children:"Add to cart"})})]})}},1949:function(e,t,n){"use strict";n.r(t),t.default='import React from \'react\';\nimport { makeStyles } from \'@material-ui/core/styles\';\nimport Chip from \'@material-ui/core/Chip\';\nimport Button from \'@material-ui/core/Button\';\nimport Grid from \'@material-ui/core/Grid\';\nimport Divider from \'@material-ui/core/Divider\';\nimport Typography from \'@material-ui/core/Typography\';\n\nconst useStyles = makeStyles((theme) => ({\n root: {\n width: \'100%\',\n maxWidth: 360,\n backgroundColor: theme.palette.background.paper,\n },\n chip: {\n margin: theme.spacing(0.5),\n },\n section1: {\n margin: theme.spacing(3, 2),\n },\n section2: {\n margin: theme.spacing(2),\n },\n section3: {\n margin: theme.spacing(3, 1, 1),\n },\n}));\n\nexport default function MiddleDividers() {\n const classes = useStyles();\n\n return (\n <div className={classes.root}>\n <div className={classes.section1}>\n <Grid container alignItems="center">\n <Grid item xs>\n <Typography gutterBottom variant="h4">\n Toothbrush\n </Typography>\n </Grid>\n <Grid item>\n <Typography gutterBottom variant="h6">\n $4.50\n </Typography>\n </Grid>\n </Grid>\n <Typography color="textSecondary" variant="body2">\n Pinstriped cornflower blue cotton blouse takes you on a walk to the park or just down the\n hall.\n </Typography>\n </div>\n <Divider variant="middle" />\n <div className={classes.section2}>\n <Typography gutterBottom variant="body1">\n Select type\n </Typography>\n <div>\n <Chip className={classes.chip} label="Extra Soft" />\n <Chip className={classes.chip} color="primary" label="Soft" />\n <Chip className={classes.chip} label="Medium" />\n <Chip className={classes.chip} label="Hard" />\n </div>\n </div>\n <div className={classes.section3}>\n <Button color="primary">Add to cart</Button>\n </div>\n </div>\n );\n}\n'},1950:function(e,t,n){"use strict";n.r(t),n.d(t,"default",(function(){return O}));n(0);var a=n(1072),i=n(1951),r=n.n(i),s=n(1952),c=n.n(s),o=n(1953),m=n.n(o),l=n(1954),d=n.n(l),j=n(1955),p=n.n(j),h=n(1956),u=n.n(h),b=n(1172),x=n(1108),f=n(1);const v=Object(a.a)((e=>({root:{width:"fit-content",border:"1px solid ".concat(e.palette.divider),borderRadius:e.shape.borderRadius,backgroundColor:e.palette.background.paper,color:e.palette.text.secondary,"& svg":{margin:e.spacing(1.5)},"& hr":{margin:e.spacing(0,.5)}}})));function O(){const e=v();return Object(f.jsx)("div",{children:Object(f.jsxs)(b.a,{container:!0,alignItems:"center",className:e.root,children:[Object(f.jsx)(r.a,{}),Object(f.jsx)(c.a,{}),Object(f.jsx)(m.a,{}),Object(f.jsx)(x.a,{orientation:"vertical",flexItem:!0}),Object(f.jsx)(d.a,{}),Object(f.jsx)(p.a,{}),Object(f.jsx)(u.a,{})]})})}},1957:function(e,t,n){"use strict";n.r(t),t.default="import React from 'react';\nimport { makeStyles } from '@material-ui/core/styles';\nimport FormatAlignLeftIcon from '@material-ui/icons/FormatAlignLeft';\nimport FormatAlignCenterIcon from '@material-ui/icons/FormatAlignCenter';\nimport FormatAlignRightIcon from '@material-ui/icons/FormatAlignRight';\nimport FormatBoldIcon from '@material-ui/icons/FormatBold';\nimport FormatItalicIcon from '@material-ui/icons/FormatItalic';\nimport FormatUnderlinedIcon from '@material-ui/icons/FormatUnderlined';\nimport Grid from '@material-ui/core/Grid';\nimport Divider from '@material-ui/core/Divider';\n\nconst useStyles = makeStyles((theme) => ({\n root: {\n width: 'fit-content',\n border: `1px solid ${theme.palette.divider}`,\n borderRadius: theme.shape.borderRadius,\n backgroundColor: theme.palette.background.paper,\n color: theme.palette.text.secondary,\n '& svg': {\n margin: theme.spacing(1.5),\n },\n '& hr': {\n margin: theme.spacing(0, 0.5),\n },\n },\n}));\n\nexport default function VerticalDividers() {\n const classes = useStyles();\n\n return (\n <div>\n <Grid container alignItems=\"center\" className={classes.root}>\n <FormatAlignLeftIcon />\n <FormatAlignCenterIcon />\n <FormatAlignRightIcon />\n <Divider orientation=\"vertical\" flexItem />\n <FormatBoldIcon />\n <FormatItalicIcon />\n <FormatUnderlinedIcon />\n </Grid>\n </div>\n );\n}\n"},2580:function(e,t,n){"use strict";n.r(t);var a=n(1130),i=n(1098),r=n(1090),s=n(194),c=n(1072),o=n(1);const m=Object(c.a)((e=>({layoutRoot:{"& .description":{marginBottom:16}}})));t.default=function(e){return m(),Object(o.jsxs)(o.Fragment,{children:[Object(o.jsx)("div",{className:"flex flex-1 flex-grow-0 items-center justify-end",children:Object(o.jsxs)(i.a,{className:"normal-case",variant:"outlined",component:"a",href:"https://material-ui.com/components/dividers",target:"_blank",role:"button",children:[Object(o.jsx)(r.a,{children:"link"}),Object(o.jsx)("span",{className:"mx-4",children:"Reference"})]})}),Object(o.jsx)(s.a,{className:"text-44 mt-32 mb-8",component:"h1",children:"Divider"}),Object(o.jsx)(s.a,{className:"description",children:"A divider is a thin line that groups content in lists and layouts."}),Object(o.jsxs)(s.a,{className:"mb-16",component:"div",children:[Object(o.jsx)("a",{href:"https://material.io/design/components/dividers.html",children:"Dividers"})," separate content into clear groups."]}),Object(o.jsx)(s.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"List Dividers"}),Object(o.jsxs)(s.a,{className:"mb-16",component:"div",children:["The divider renders as an ",Object(o.jsx)("code",{children:"<hr>"})," by default. You can save rendering this DOM element by using the ",Object(o.jsx)("code",{children:"divider"})," property on the ",Object(o.jsx)("code",{children:"ListItem"})," component."]}),Object(o.jsx)(s.a,{className:"mb-16",component:"div",children:Object(o.jsx)(a.a,{className:"my-24",iframe:!1,component:n(1942).default,raw:n(1943)})}),Object(o.jsx)(s.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"HTML5 Specification"}),Object(o.jsxs)(s.a,{className:"mb-16",component:"div",children:["In a list, you should ensure the ",Object(o.jsx)("code",{children:"Divider"})," is rendered as an"," ",Object(o.jsx)("code",{children:"<li>"})," to match the HTML5 specification. The examples below show two ways of achieving this."]}),Object(o.jsx)(s.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Inset Dividers"}),Object(o.jsx)(s.a,{className:"mb-16",component:"div",children:Object(o.jsx)(a.a,{className:"my-24",iframe:!1,component:n(1944).default,raw:n(1945)})}),Object(o.jsx)(s.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Subheader Dividers"}),Object(o.jsx)(s.a,{className:"mb-16",component:"div",children:Object(o.jsx)(a.a,{className:"my-24",iframe:!1,component:n(1946).default,raw:n(1947)})}),Object(o.jsx)(s.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Middle Dividers"}),Object(o.jsx)(s.a,{className:"mb-16",component:"div",children:Object(o.jsx)(a.a,{className:"my-24",iframe:!1,component:n(1948).default,raw:n(1949)})}),Object(o.jsx)(s.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Vertical Dividers"}),Object(o.jsxs)(s.a,{className:"mb-16",component:"div",children:["You can also render a divider vertically using the ",Object(o.jsx)("code",{children:"orientation"})," prop. Note the use of the ",Object(o.jsx)("code",{children:"flexItem"})," prop to accommodate for the flex container."]}),Object(o.jsx)(s.a,{className:"mb-16",component:"div",children:Object(o.jsx)(a.a,{className:"my-24",iframe:!1,component:n(1950).default,raw:n(1957)})})]})}}}]);
Zerion Mini Shell 1.0