diff --git a/docs/src/app/components/pages/components/GridList/ExampleComplex.js b/docs/src/app/components/pages/components/GridList/ExampleComplex.js index 858b9f4e68efaf..2e9985bc4f90ae 100644 --- a/docs/src/app/components/pages/components/GridList/ExampleComplex.js +++ b/docs/src/app/components/pages/components/GridList/ExampleComplex.js @@ -13,7 +13,6 @@ const styles = { width: 500, height: 450, overflowY: 'auto', - marginBottom: 24, }, }; @@ -62,6 +61,10 @@ const tilesData = [ }, ]; +/** + * This example demonstrates "featured" tiles, using the `rows` and `cols` props to adjust the size of the tile. + * The tiles have a customised title, positioned at the top and with a custom gradient `titleBackground`. + */ const GridListExampleComplex = () => (
(
December diff --git a/docs/src/app/components/pages/components/GridList/ExampleSingleLine.js b/docs/src/app/components/pages/components/GridList/ExampleSingleLine.js new file mode 100644 index 00000000000000..9c7fc25623e0c7 --- /dev/null +++ b/docs/src/app/components/pages/components/GridList/ExampleSingleLine.js @@ -0,0 +1,81 @@ +import React from 'react'; +import {GridList, GridTile} from 'material-ui/GridList'; +import IconButton from 'material-ui/IconButton'; +import StarBorder from 'material-ui/svg-icons/toggle/star-border'; + +const styles = { + root: { + display: 'flex', + flexWrap: 'wrap', + justifyContent: 'space-around', + }, + gridList: { + display: 'flex', + flexWrap: 'nowrap', + overflowX: 'auto', + }, +}; + +const tilesData = [ + { + img: 'images/grid-list/00-52-29-429_640.jpg', + title: 'Breakfast', + author: 'jill111', + }, + { + img: 'images/grid-list/burger-827309_640.jpg', + title: 'Tasty burger', + author: 'pashminu', + }, + { + img: 'images/grid-list/camera-813814_640.jpg', + title: 'Camera', + author: 'Danson67', + }, + { + img: 'images/grid-list/morning-819362_640.jpg', + title: 'Morning', + author: 'fancycrave1', + }, + { + img: 'images/grid-list/hats-829509_640.jpg', + title: 'Hats', + author: 'Hans', + }, + { + img: 'images/grid-list/honey-823614_640.jpg', + title: 'Honey', + author: 'fancycravel', + }, + { + img: 'images/grid-list/vegetables-790022_640.jpg', + title: 'Vegetables', + author: 'jill111', + }, + { + img: 'images/grid-list/water-plant-821293_640.jpg', + title: 'Water plant', + author: 'BkrmadtyaKarki', + }, +]; + +/** + * This example demonstrates the horizontal scrollable single-line grid list of images. + */ +const GridListExampleSingleLine = () => ( +
+ + {tilesData.map((tile) => ( + } + > + + + ))} + +
+); + +export default GridListExampleSingleLine; diff --git a/docs/src/app/components/pages/components/GridList/Page.js b/docs/src/app/components/pages/components/GridList/Page.js index 0506a65f712189..1483f84377d3fd 100644 --- a/docs/src/app/components/pages/components/GridList/Page.js +++ b/docs/src/app/components/pages/components/GridList/Page.js @@ -10,33 +10,33 @@ import gridListExampleSimpleCode from '!raw!./ExampleSimple'; import GridListExampleSimple from './ExampleSimple'; import gridListExampleComplexCode from '!raw!./ExampleComplex'; import GridListExampleComplex from './ExampleComplex'; +import gridListExampleSingleLineCode from '!raw!./ExampleSingleLine'; +import GridListExampleSingleLine from './ExampleSingleLine'; import gridListCode from '!raw!material-ui/GridList/GridList'; import gridTileCode from '!raw!material-ui/GridList/GridTile'; -const descriptions = { - simple: 'A simple example of a scrollable `GridList` containing a [Subheader](/#/components/subheader).', - complex: 'This example demonstrates "featured" tiles, using the `rows` and `cols` props to adjust the size of the ' + - 'tile. The tiles have a customised title, positioned at the top and with a custom gradient `titleBackground`.', -}; - const GridListPage = () => (
`Grid List - ${previousTitle}`} /> <MarkdownElement text={gridListReadmeText} /> <CodeExample title="Simple example" - description={descriptions.simple} code={gridListExampleSimpleCode} > <GridListExampleSimple /> </CodeExample> <CodeExample title="Complex example" - description={descriptions.complex} code={gridListExampleComplexCode} > <GridListExampleComplex /> </CodeExample> + <CodeExample + title="One line example" + code={gridListExampleSingleLineCode} + > + <GridListExampleSingleLine /> + </CodeExample> <PropTypeDescription header="### GridList Properties" code={gridListCode} /> <PropTypeDescription header="### GridTile Properties" code={gridTileCode} /> </div>