%PDF-
%PDF-
Mini Shell
Mini Shell
(this["webpackJsonpfuse-react-app"]=this["webpackJsonpfuse-react-app"]||[]).push([[86],{1130:function(e,t,a){"use strict";a.d(t,"a",(function(){return v}));var n=a(118),i=a(1100),s=a(1109),o=a(1090),r=a(1117),c=a(1119),m=a(5),l=a(0),d=a(1024),g=a(551),u=a(1087),h=a(1099),p=a(11),j=a(370),b=a(371),f=a(1131),x=a.n(f),I=a(1);const O=Object(d.a)({productionPrefix:"iframe-"});class y 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(j.a)({...Object(g.a)(),plugins:[...Object(g.a)().plugins,Object(b.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(I.jsxs)(I.Fragment,{children:[Object(I.jsx)("style",{dangerouslySetInnerHTML:{__html:"\n html {\n font-size: 62.5%;\n font-family: Poppins, Roboto, Helvetica Neue, Arial, sans-serif;\n }\n "}}),Object(I.jsx)("noscript",{id:"jss-demo-insertion-point"})]})}render(){const{children:e,classes:t,theme:a}=this.props;return Object(I.jsx)(x.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(I.jsx)(u.b,{jss:this.state.jss,generateClassName:O,sheetsManager:this.state.sheetsManager,children:Object(I.jsx)(h.a,{theme:a,children:Object(l.cloneElement)(e,{container:this.state.container})})}):null})}}var L=Object(p.a)((e=>({root:{backgroundColor:e.palette.background.default,flexGrow:1,height:400,border:"none"}})),{withTheme:!0})(y);function w(e){const[t,a]=Object(l.useState)(e.currentTabIndex),{component:d,raw:g,iframe:u,className:h}=e;return Object(I.jsxs)(s.a,{className:Object(m.a)(h,"shadow"),children:[Object(I.jsx)(i.a,{position:"static",color:"default",className:"shadow-0",children:Object(I.jsxs)(c.a,{classes:{root:"border-b-1",flexContainer:"justify-end"},value:t,onChange:function(e,t){a(t)},children:[d&&Object(I.jsx)(r.a,{classes:{root:"min-w-64"},icon:Object(I.jsx)(o.a,{children:"remove_red_eye"})}),g&&Object(I.jsx)(r.a,{classes:{root:"min-w-64"},icon:Object(I.jsx)(o.a,{children:"code"})})]})}),Object(I.jsxs)("div",{className:"flex justify-center max-w-full",children:[Object(I.jsx)("div",{className:0===t?"flex flex-1 max-w-full":"hidden",children:d&&(u?Object(I.jsx)(L,{children:Object(I.jsx)(d,{})}):Object(I.jsx)("div",{className:"p-24 flex flex-1 justify-center max-w-full",children:Object(I.jsx)(d,{})}))}),Object(I.jsx)("div",{className:1===t?"flex flex-1":"hidden",children:g&&Object(I.jsx)("div",{className:"flex flex-1",children:Object(I.jsx)(n.a,{component:"pre",className:"language-javascript w-full",children:g.default})})})]})]})}w.defaultProps={currentTabIndex:0};var v=w},1297:function(e,t,a){"use strict";t.a=[{img:"/material-ui-static/images/image-list/breakfast.jpg",title:"Breakfast",author:"jill111",cols:2,featured:!0},{img:"/material-ui-static/images/image-list/burgers.jpg",title:"Tasty burger",author:"director90"},{img:"/material-ui-static/images/image-list/camera.jpg",title:"Camera",author:"Danson67"},{img:"/material-ui-static/images/image-list/morning.jpg",title:"Morning",author:"fancycrave1",featured:!0},{img:"/material-ui-static/images/image-list/hats.jpg",title:"Hats",author:"Hans"},{img:"/material-ui-static/images/image-list/honey.jpg",title:"Honey",author:"fancycravel"},{img:"/material-ui-static/images/image-list/vegetables.jpg",title:"Vegetables",author:"jill111",cols:2},{img:"/material-ui-static/images/image-list/plant.jpg",title:"Water plant",author:"BkrmadtyaKarki"},{img:"/material-ui-static/images/image-list/mushroom.jpg",title:"Mushrooms",author:"PublicDomainPictures"},{img:"/material-ui-static/images/image-list/olive.jpg",title:"Olive oil",author:"congerdesign"},{img:"/material-ui-static/images/image-list/star.jpg",title:"Sea star",cols:2,author:"821292"},{img:"/material-ui-static/images/image-list/bike.jpg",title:"Bike",author:"danfador"}]},2008:function(e,t,a){"use strict";a.r(t),a.d(t,"default",(function(){return m}));a(0);var n=a(1072),i=a(2009),s=a(2010),o=a(1297),r=a(1);const c=Object(n.a)((e=>({root:{display:"flex",flexWrap:"wrap",justifyContent:"space-around",overflow:"hidden",backgroundColor:e.palette.background.paper},imageList:{width:500,height:450}})));function m(){const e=c();return Object(r.jsx)("div",{className:e.root,children:Object(r.jsx)(i.a,{rowHeight:160,className:e.imageList,cols:3,children:o.a.map((e=>Object(r.jsx)(s.a,{cols:e.cols||1,children:Object(r.jsx)("img",{src:e.img,alt:e.title})},e.img)))})})}},2011:function(e,t,a){"use strict";a.r(t),t.default="import React from 'react';\nimport { makeStyles } from '@material-ui/core/styles';\nimport ImageList from '@material-ui/core/ImageList';\nimport ImageListItem from '@material-ui/core/ImageListItem';\nimport itemData from './itemData';\n\nconst useStyles = makeStyles((theme) => ({\n root: {\n display: 'flex',\n flexWrap: 'wrap',\n justifyContent: 'space-around',\n overflow: 'hidden',\n backgroundColor: theme.palette.background.paper,\n },\n imageList: {\n width: 500,\n height: 450,\n },\n}));\n\n/**\n * The example data is structured as follows:\n *\n * import image from 'path/to/image.jpg';\n * [etc...]\n *\n * const itemData = [\n * {\n * img: image,\n * title: 'Image',\n * author: 'author',\n * cols: 2,\n * },\n * {\n * [etc...]\n * },\n * ];\n */\nexport default function BasicImageList() {\n const classes = useStyles();\n\n return (\n <div className={classes.root}>\n <ImageList rowHeight={160} className={classes.imageList} cols={3}>\n {itemData.map((item) => (\n <ImageListItem key={item.img} cols={item.cols || 1}>\n <img src={item.img} alt={item.title} />\n </ImageListItem>\n ))}\n </ImageList>\n </div>\n );\n}\n"},2012:function(e,t,a){"use strict";a.r(t),a.d(t,"default",(function(){return h}));a(0);var n=a(1072),i=a(2009),s=a(2010),o=a(2013),r=a(1107),c=a(1028),m=a(2014),l=a.n(m),d=a(1297),g=a(1);const u=Object(n.a)((e=>({root:{display:"flex",flexWrap:"wrap",justifyContent:"space-around",overflow:"hidden",backgroundColor:e.palette.background.paper},imageList:{width:500,height:450},icon:{color:"rgba(255, 255, 255, 0.54)"}})));function h(){const e=u();return Object(g.jsx)("div",{className:e.root,children:Object(g.jsxs)(i.a,{rowHeight:180,className:e.imageList,children:[Object(g.jsx)(s.a,{cols:2,style:{height:"auto"},children:Object(g.jsx)(r.a,{component:"div",children:"December"})},"Subheader"),d.a.map((t=>Object(g.jsxs)(s.a,{children:[Object(g.jsx)("img",{src:t.img,alt:t.title}),Object(g.jsx)(o.a,{title:t.title,subtitle:Object(g.jsxs)("span",{children:["by: ",t.author]}),actionIcon:Object(g.jsx)(c.a,{"aria-label":"info about ".concat(t.title),className:e.icon,children:Object(g.jsx)(l.a,{})})})]},t.img)))]})})}},2015:function(e,t,a){"use strict";a.r(t),t.default="import React from 'react';\nimport { makeStyles } from '@material-ui/core/styles';\nimport ImageList from '@material-ui/core/ImageList';\nimport ImageListItem from '@material-ui/core/ImageListItem';\nimport ImageListItemBar from '@material-ui/core/ImageListItemBar';\nimport ListSubheader from '@material-ui/core/ListSubheader';\nimport IconButton from '@material-ui/core/IconButton';\nimport InfoIcon from '@material-ui/icons/Info';\nimport itemData from './itemData';\n\nconst useStyles = makeStyles((theme) => ({\n root: {\n display: 'flex',\n flexWrap: 'wrap',\n justifyContent: 'space-around',\n overflow: 'hidden',\n backgroundColor: theme.palette.background.paper,\n },\n imageList: {\n width: 500,\n height: 450,\n },\n icon: {\n color: 'rgba(255, 255, 255, 0.54)',\n },\n}));\n\n/**\n * The example data is structured as follows:\n *\n * import image from 'path/to/image.jpg';\n * [etc...]\n *\n * const itemData = [\n * {\n * img: image,\n * title: 'Image',\n * author: 'author',\n * },\n * {\n * [etc...]\n * },\n * ];\n */\nexport default function TitlebarImageList() {\n const classes = useStyles();\n\n return (\n <div className={classes.root}>\n <ImageList rowHeight={180} className={classes.imageList}>\n <ImageListItem key=\"Subheader\" cols={2} style={{ height: 'auto' }}>\n <ListSubheader component=\"div\">December</ListSubheader>\n </ImageListItem>\n {itemData.map((item) => (\n <ImageListItem key={item.img}>\n <img src={item.img} alt={item.title} />\n <ImageListItemBar\n title={item.title}\n subtitle={<span>by: {item.author}</span>}\n actionIcon={\n <IconButton aria-label={`info about ${item.title}`} className={classes.icon}>\n <InfoIcon />\n </IconButton>\n }\n />\n </ImageListItem>\n ))}\n </ImageList>\n </div>\n );\n}\n"},2016:function(e,t,a){"use strict";a.r(t),a.d(t,"default",(function(){return u}));a(0);var n=a(1072),i=a(2009),s=a(2010),o=a(2013),r=a(1028),c=a(1298),m=a.n(c),l=a(1297),d=a(1);const g=Object(n.a)((e=>({root:{display:"flex",flexWrap:"wrap",justifyContent:"space-around",overflow:"hidden",backgroundColor:e.palette.background.paper},imageList:{flexWrap:"nowrap",transform:"translateZ(0)"},title:{color:e.palette.primary.light},titleBar:{background:"linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.3) 70%, rgba(0,0,0,0) 100%)"}})));function u(){const e=g();return Object(d.jsx)("div",{className:e.root,children:Object(d.jsx)(i.a,{className:e.imageList,cols:2.5,children:l.a.map((t=>Object(d.jsxs)(s.a,{children:[Object(d.jsx)("img",{src:t.img,alt:t.title}),Object(d.jsx)(o.a,{title:t.title,classes:{root:e.titleBar,title:e.title},actionIcon:Object(d.jsx)(r.a,{"aria-label":"star ".concat(t.title),children:Object(d.jsx)(m.a,{className:e.title})})})]},t.img)))})})}},2017:function(e,t,a){"use strict";a.r(t),t.default="import React from 'react';\nimport { makeStyles } from '@material-ui/core/styles';\nimport ImageList from '@material-ui/core/ImageList';\nimport ImageListItem from '@material-ui/core/ImageListItem';\nimport ImageListItemBar from '@material-ui/core/ImageListItemBar';\nimport IconButton from '@material-ui/core/IconButton';\nimport StarBorderIcon from '@material-ui/icons/StarBorder';\nimport itemData from './itemData';\n\nconst useStyles = makeStyles((theme) => ({\n root: {\n display: 'flex',\n flexWrap: 'wrap',\n justifyContent: 'space-around',\n overflow: 'hidden',\n backgroundColor: theme.palette.background.paper,\n },\n imageList: {\n flexWrap: 'nowrap',\n // Promote the list into his own layer on Chrome. This cost memory but helps keeping high FPS.\n transform: 'translateZ(0)',\n },\n title: {\n color: theme.palette.primary.light,\n },\n titleBar: {\n background:\n 'linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.3) 70%, rgba(0,0,0,0) 100%)',\n },\n}));\n\n/**\n * The example data is structured as follows:\n *\n * import image from 'path/to/image.jpg';\n * [etc...]\n *\n * const itemData = [\n * {\n * img: image,\n * title: 'Image',\n * author: 'author',\n * },\n * {\n * [etc...]\n * },\n * ];\n */\nexport default function SingleLineImageList() {\n const classes = useStyles();\n\n return (\n <div className={classes.root}>\n <ImageList className={classes.imageList} cols={2.5}>\n {itemData.map((item) => (\n <ImageListItem key={item.img}>\n <img src={item.img} alt={item.title} />\n <ImageListItemBar\n title={item.title}\n classes={{\n root: classes.titleBar,\n title: classes.title,\n }}\n actionIcon={\n <IconButton aria-label={`star ${item.title}`}>\n <StarBorderIcon className={classes.title} />\n </IconButton>\n }\n />\n </ImageListItem>\n ))}\n </ImageList>\n </div>\n );\n}\n"},2018:function(e,t,a){"use strict";a.r(t),a.d(t,"default",(function(){return u}));a(0);var n=a(1072),i=a(2009),s=a(2010),o=a(2013),r=a(1028),c=a(1298),m=a.n(c),l=a(1297),d=a(1);const g=Object(n.a)((e=>({root:{display:"flex",flexWrap:"wrap",justifyContent:"space-around",overflow:"hidden",backgroundColor:e.palette.background.paper},imageList:{width:500,height:450,transform:"translateZ(0)"},titleBar:{background:"linear-gradient(to bottom, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.3) 70%, rgba(0,0,0,0) 100%)"},icon:{color:"white"}})));function u(){const e=g();return Object(d.jsx)("div",{className:e.root,children:Object(d.jsx)(i.a,{rowHeight:200,gap:1,className:e.imageList,children:l.a.map((t=>Object(d.jsxs)(s.a,{cols:t.featured?2:1,rows:t.featured?2:1,children:[Object(d.jsx)("img",{src:t.img,alt:t.title}),Object(d.jsx)(o.a,{title:t.title,position:"top",actionIcon:Object(d.jsx)(r.a,{"aria-label":"star ".concat(t.title),className:e.icon,children:Object(d.jsx)(m.a,{})}),actionPosition:"left",className:e.titleBar})]},t.img)))})})}},2019:function(e,t,a){"use strict";a.r(t),t.default="import React from 'react';\nimport { makeStyles } from '@material-ui/core/styles';\nimport ImageList from '@material-ui/core/ImageList';\nimport ImageListItem from '@material-ui/core/ImageListItem';\nimport ImageListItemBar from '@material-ui/core/ImageListItemBar';\nimport IconButton from '@material-ui/core/IconButton';\nimport StarBorderIcon from '@material-ui/icons/StarBorder';\nimport itemData from './itemData';\n\nconst useStyles = makeStyles((theme) => ({\n root: {\n display: 'flex',\n flexWrap: 'wrap',\n justifyContent: 'space-around',\n overflow: 'hidden',\n backgroundColor: theme.palette.background.paper,\n },\n imageList: {\n width: 500,\n height: 450,\n // Promote the list into its own layer in Chrome. This cost memory, but helps keep FPS high.\n transform: 'translateZ(0)',\n },\n titleBar: {\n background:\n 'linear-gradient(to bottom, rgba(0,0,0,0.7) 0%, ' +\n 'rgba(0,0,0,0.3) 70%, rgba(0,0,0,0) 100%)',\n },\n icon: {\n color: 'white',\n },\n}));\n\n/**\n * The example data is structured as follows:\n *\n * import image from 'path/to/image.jpg';\n * [etc...]\n *\n * const itemData = [\n * {\n * img: image,\n * title: 'Image',\n * author: 'author',\n * featured: true,\n * },\n * {\n * [etc...]\n * },\n * ];\n */\nexport default function AdvancedImageList() {\n const classes = useStyles();\n\n return (\n <div className={classes.root}>\n <ImageList rowHeight={200} gap={1} className={classes.imageList}>\n {itemData.map((item) => (\n <ImageListItem key={item.img} cols={item.featured ? 2 : 1} rows={item.featured ? 2 : 1}>\n <img src={item.img} alt={item.title} />\n <ImageListItemBar\n title={item.title}\n position=\"top\"\n actionIcon={\n <IconButton aria-label={`star ${item.title}`} className={classes.icon}>\n <StarBorderIcon />\n </IconButton>\n }\n actionPosition=\"left\"\n className={classes.titleBar}\n />\n </ImageListItem>\n ))}\n </ImageList>\n </div>\n );\n}\n"},2585:function(e,t,a){"use strict";a.r(t);var n=a(1130),i=a(1098),s=a(1090),o=a(194),r=a(1072),c=a(1);const m=Object(r.a)((e=>({layoutRoot:{"& .description":{marginBottom:16}}})));t.default=function(e){return m(),Object(c.jsxs)(c.Fragment,{children:[Object(c.jsx)("div",{className:"flex flex-1 flex-grow-0 items-center justify-end",children:Object(c.jsxs)(i.a,{className:"normal-case",variant:"outlined",component:"a",href:"https://material-ui.com/components/image-list",target:"_blank",role:"button",children:[Object(c.jsx)(s.a,{children:"link"}),Object(c.jsx)("span",{className:"mx-4",children:"Reference"})]})}),Object(c.jsx)(o.a,{className:"text-44 mt-32 mb-8",component:"h1",children:"Image list"}),Object(c.jsx)(o.a,{className:"description",children:"Image lists display a collection of images in an organized image."}),Object(c.jsx)(o.a,{className:"mb-16",component:"div",children:"Image lists represent a collection of items in a repeated pattern. They help improve the visual comprehension of the content they hold."}),Object(c.jsx)(o.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Basic image list"}),Object(c.jsxs)(o.a,{className:"mb-16",component:"div",children:["A simple example of a scrollable image ",Object(c.jsx)("code",{children:"ImageList"}),"."]}),Object(c.jsx)(o.a,{className:"mb-16",component:"div",children:Object(c.jsx)(n.a,{className:"my-24",iframe:!1,component:a(2008).default,raw:a(2011)})}),Object(c.jsx)(o.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Image list with titlebars"}),Object(c.jsxs)(o.a,{className:"mb-16",component:"div",children:["This example demonstrates the use of the ",Object(c.jsx)("code",{children:"ImageListItemBar"})," to add an overlay to each ",Object(c.jsx)("code",{children:"ImageListItem"}),". The overlay can accommodate a ",Object(c.jsx)("code",{children:"title"}),","," ",Object(c.jsx)("code",{children:"subtitle"})," and secondary action - in this example an ",Object(c.jsx)("code",{children:"IconButton"}),"."]}),Object(c.jsx)(o.a,{className:"mb-16",component:"div",children:Object(c.jsx)(n.a,{className:"my-24",iframe:!1,component:a(2012).default,raw:a(2015)})}),Object(c.jsx)(o.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Single line image list"}),Object(c.jsx)(o.a,{className:"mb-16",component:"div",children:"This example demonstrates a horizontal scrollable single-line image list of images. Horizontally scrolling image lists are discouraged because the scrolling interferes with typical reading patterns, affecting comprehension. One notable exception is a horizontally-scrolling, single-line image list of images, such as a gallery."}),Object(c.jsx)(o.a,{className:"mb-16",component:"div",children:Object(c.jsx)(n.a,{className:"my-24",iframe:!1,component:a(2016).default,raw:a(2017)})}),Object(c.jsx)(o.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Advanced image list"}),Object(c.jsxs)(o.a,{className:"mb-16",component:"div",children:['This example demonstrates "featured" items, using the ',Object(c.jsx)("code",{children:"rows"})," and"," ",Object(c.jsx)("code",{children:"cols"})," props to adjust the size of the item, and the ",Object(c.jsx)("code",{children:"gap"})," prop to adjust the spacing. The items have a customized titlebar, positioned at the top, and with a custom gradient ",Object(c.jsx)("code",{children:"titleBackground"}),". The secondary action ",Object(c.jsx)("code",{children:"IconButton"})," ","is positioned on the left."]}),Object(c.jsx)(o.a,{className:"mb-16",component:"div",children:Object(c.jsx)(n.a,{className:"my-24",iframe:!1,component:a(2018).default,raw:a(2019)})})]})}}}]);
Zerion Mini Shell 1.0