-
-
Notifications
You must be signed in to change notification settings - Fork 32.3k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
16 changed files
with
279 additions
and
34 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
50 changes: 50 additions & 0 deletions
50
docs/src/pages/components/image-list/TitlebarBelowImageList.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,50 @@ | ||
| import * as React from 'react'; | ||
| import { makeStyles } from '@material-ui/core/styles'; | ||
| import ImageList from '@material-ui/core/ImageList'; | ||
| import ImageListItem from '@material-ui/core/ImageListItem'; | ||
| import ImageListItemBar from '@material-ui/core/ImageListItemBar'; | ||
| import itemData from './itemData'; | ||
|
|
||
| const useStyles = makeStyles({ | ||
| root: { | ||
| width: 500, | ||
| height: 450, | ||
| }, | ||
| icon: { | ||
| color: 'rgba(255, 255, 255, 0.54)', | ||
| }, | ||
| }); | ||
|
|
||
| /** | ||
| * The example data is structured as follows: | ||
| * | ||
| * import image from 'path/to/image.jpg'; | ||
| * [etc...] | ||
| * | ||
| * const itemData = [ | ||
| * { | ||
| * img: 'image-path', | ||
| * title: 'text', | ||
| * author: 'name', | ||
| * }, | ||
| * { etc... }, | ||
| * ]; | ||
| */ | ||
| export default function TitlebarBelowImageList() { | ||
| const classes = useStyles(); | ||
|
|
||
| return ( | ||
| <ImageList className={classes.root}> | ||
| {itemData.map((item) => ( | ||
| <ImageListItem key={item.img}> | ||
| <img src={item.img} alt={item.title} /> | ||
| <ImageListItemBar | ||
| title={item.title} | ||
| subtitle={<span>by: {item.author}</span>} | ||
| position="below" | ||
| /> | ||
| </ImageListItem> | ||
| ))} | ||
| </ImageList> | ||
| ); | ||
| } |
50 changes: 50 additions & 0 deletions
50
docs/src/pages/components/image-list/TitlebarBelowImageList.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,50 @@ | ||
| import * as React from 'react'; | ||
| import { makeStyles } from '@material-ui/core/styles'; | ||
| import ImageList from '@material-ui/core/ImageList'; | ||
| import ImageListItem from '@material-ui/core/ImageListItem'; | ||
| import ImageListItemBar from '@material-ui/core/ImageListItemBar'; | ||
| import itemData from './itemData'; | ||
|
|
||
| const useStyles = makeStyles({ | ||
| root: { | ||
| width: 500, | ||
| height: 450, | ||
| }, | ||
| icon: { | ||
| color: 'rgba(255, 255, 255, 0.54)', | ||
| }, | ||
| }); | ||
|
|
||
| /** | ||
| * The example data is structured as follows: | ||
| * | ||
| * import image from 'path/to/image.jpg'; | ||
| * [etc...] | ||
| * | ||
| * const itemData = [ | ||
| * { | ||
| * img: 'image-path', | ||
| * title: 'text', | ||
| * author: 'name', | ||
| * }, | ||
| * { etc... }, | ||
| * ]; | ||
| */ | ||
| export default function TitlebarBelowImageList() { | ||
| const classes = useStyles(); | ||
|
|
||
| return ( | ||
| <ImageList className={classes.root}> | ||
| {itemData.map((item) => ( | ||
| <ImageListItem key={item.img}> | ||
| <img src={item.img} alt={item.title} /> | ||
| <ImageListItemBar | ||
| title={item.title} | ||
| subtitle={<span>by: {item.author}</span>} | ||
| position="below" | ||
| /> | ||
| </ImageListItem> | ||
| ))} | ||
| </ImageList> | ||
| ); | ||
| } |
44 changes: 44 additions & 0 deletions
44
docs/src/pages/components/image-list/TitlebarBelowMasonryImageList.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,44 @@ | ||
| import * as React from 'react'; | ||
| import { makeStyles } from '@material-ui/core/styles'; | ||
| import ImageList from '@material-ui/core/ImageList'; | ||
| import ImageListItem from '@material-ui/core/ImageListItem'; | ||
| import ImageListItemBar from '@material-ui/core/ImageListItemBar'; | ||
| import itemData from './peerItemData'; | ||
|
|
||
| const useStyles = makeStyles({ | ||
| root: { | ||
| width: 500, | ||
| height: 450, | ||
| overflowY: 'scroll', | ||
| }, | ||
| }); | ||
|
|
||
| /** | ||
| * The example data is structured as follows: | ||
| * | ||
| * const itemData = [ | ||
| * { | ||
| * img: 'image-path', | ||
| * title: 'text', | ||
| * author: 'name' | ||
| * }, | ||
| * { etc... }, | ||
| * ]; | ||
| * | ||
| */ | ||
| export default function TitlebarBelowMasonryImageList() { | ||
| const classes = useStyles(); | ||
|
|
||
| return ( | ||
| <div className={classes.root}> | ||
| <ImageList variant="masonry" cols={3} spacing={8}> | ||
| {itemData.map((item) => ( | ||
| <ImageListItem key={item.img}> | ||
| <img src={item.img} alt={item.title} /> | ||
| <ImageListItemBar position="below" title={item.author} /> | ||
| </ImageListItem> | ||
| ))} | ||
| </ImageList> | ||
| </div> | ||
| ); | ||
| } |
44 changes: 44 additions & 0 deletions
44
docs/src/pages/components/image-list/TitlebarBelowMasonryImageList.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,44 @@ | ||
| import * as React from 'react'; | ||
| import { makeStyles } from '@material-ui/core/styles'; | ||
| import ImageList from '@material-ui/core/ImageList'; | ||
| import ImageListItem from '@material-ui/core/ImageListItem'; | ||
| import ImageListItemBar from '@material-ui/core/ImageListItemBar'; | ||
| import itemData from './peerItemData'; | ||
|
|
||
| const useStyles = makeStyles({ | ||
| root: { | ||
| width: 500, | ||
| height: 450, | ||
| overflowY: 'scroll', | ||
| }, | ||
| }); | ||
|
|
||
| /** | ||
| * The example data is structured as follows: | ||
| * | ||
| * const itemData = [ | ||
| * { | ||
| * img: 'image-path', | ||
| * title: 'text', | ||
| * author: 'name' | ||
| * }, | ||
| * { etc... }, | ||
| * ]; | ||
| * | ||
| */ | ||
| export default function TitlebarBelowMasonryImageList() { | ||
| const classes = useStyles(); | ||
|
|
||
| return ( | ||
| <div className={classes.root}> | ||
| <ImageList variant="masonry" cols={3} spacing={8}> | ||
| {itemData.map((item) => ( | ||
| <ImageListItem key={item.img}> | ||
| <img src={item.img} alt={item.title} /> | ||
| <ImageListItemBar position="below" title={item.author} /> | ||
| </ImageListItem> | ||
| ))} | ||
| </ImageList> | ||
| </div> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.