React MUI ImageListItemBar API
Last Updated :
15 Sep, 2022
MUI or Material-UI is a UI library providing predefined robust and customizable components for React for easier web development. The MUI design is based on top of Material Design by Google.
In this article, we will discuss the React MUI ImageListItemBar API. The ImageList displays a collection of images in a structured grid format. ImageListItemBar allows to the placement of an overlay over the images containing some caption. The ImageListItemBar enables to place an overlay over the panel where we can place the action button, title, and subtitle. The API provides a lot of functionality and we will learn to implement them.
Import ImageListItemBar API:
import ImageListItemBar from '@mui/material/ImageListItemBar';
// or
import { ImageListItemBar } from '@mui/material';
Props List: Here is the list of different props used with this component. We can access them and modify them according to our needs.
- actionIcon: It is used to set an icon button on the component which can be used as a secondary action.
- actionPosition: It is used to set the position of the actionIcon. The default value is right.
- classes: Override the existing styles or add new styles to the component.
- position: It is used to set the position of the title bar. The default position is the bottom.
- subtitle: It is used to add a subtitle to the title bar.
- title: It is used to set the title to be displayed.
CSS Rules:
- root: It is the styles applied to the root element.
- positionBottom: It is the styles applied to the root element if the position is bottom.
- positionTop: It is the style applied to the root element if the position is top.
- positionBelow: It is the styles applied to the root element if the position is below.
- titleWrap: It is the styles applied to the title and subtitle container element.
- titleWrapBelow: It is the styles applied to the title and subtitle container element if the position is below.
- titleWrapActionPosLeft: It is the styles applied to the container element if actionPosition is left.
- titleWrapActionPosRight: It is the styles applied to the container element if actionPosition is right.
- title: It is the styles applied to the title container element.
- subtitle: It is the style applied to the subtitle container element.
- actionIcon: It is the styles applied to the actionIcon if supplied.
- actionIconActionPosLeft: It is the styles applied to the actionIcon if actionPositionleft.
Syntax: Create an ImageListItem with ImageListItemBar:
<ImageListItem>
<img
src="#"
loading="lazy"
/>
<ImageListItemBar title='title' />
</ImageListItem>
Installing and Creating React app and adding the MUI dependencies:
Step 1: Create a react project using the following command.
npx create-react-app gfg_tutorial
Step 2: Get into the project directory
cd gfg_tutorial
Step 3: Install the MUI dependencies as follows:
npm install @mui/material @emotion/react
npm install @emotion/styled @mui/lab @mui/icons-material
Project Structure: The project Structure should look like the below:
Step 4: Run the project as follows:
npm start
Example 1: In the following example, we have ImageListItemBar in ImageListItems.
App.js
import "./App.css";
import * as React from "react";
import ImageList from "@mui/material/ImageList";
import ImageListItem from "@mui/material/ImageListItem";
import ImageListItemBar from "@mui/material/ImageListItemBar";
function srcset(image, size, rows = 1, cols = 1) {
return {
src: `${image}?w=${size * cols}
&h=${size * rows}&fit=crop&auto=format`,
srcSet: `${image}?w=${size * cols}&h=${size * rows
}&fit=crop&auto=format&dpr=2 2x`,
};
}
function App() {
return (
<div className="App">
<div
className="head"
style={{
width: "fit-content",
margin: "auto",
}}
>
<h1
style={{
color: "green",
}}
>
GeeksforGeeks
</h1>
<strong>React MUI ImageListItemBar API</strong>
</div>
<br />
<ImageList
sx={{ width: 900, height: 300, margin: "auto" }}
cols={4}
variant="quilted"
rowHeight={140}
>
<ImageListItem cols={1} rows={1}>
<img
{...srcset(
121,
1,
1
)}
loading="lazy"
/>
<ImageListItemBar
title="GeeksforGeeks"
subtitle="A computer science portal for geeks."
/>
</ImageListItem>
<ImageListItem cols={1} rows={1}>
<img
{...srcset(
121,
1,
1
)}
loading="lazy"
/>
<ImageListItemBar
title="GeeksforGeeks"
subtitle="A computer science portal for geeks."
/>
</ImageListItem>
<ImageListItem cols={1} rows={1}>
<img
{...srcset(
121,
1,
1
)}
loading="lazy"
/>
<ImageListItemBar
title="GeeksforGeeks Logo"
subtitle="A computer science portal for geeks."
/>
</ImageListItem>
<ImageListItem cols={3} rows={1}>
<img
{...srcset(
121,
3,
1
)}
loading="lazy"
/>
<ImageListItemBar
title="GeeksforGeeks New Logo"
subtitle="A computer science portal for geeks."
/>
</ImageListItem>
<ImageListItem cols={1} rows={1}>
<img
{...srcset(
121,
1,
1
)}
loading="lazy"
/>
<ImageListItemBar
title="GeeksforGeeks"
subtitle="A computer science portal for geeks."
/>
</ImageListItem>
</ImageList>
</div>
);
}
export default App;
|
Output:
Example 2: In the following example, we have a like button on the title bars.
App.js
import "./App.css";
import * as React from "react";
import ImageList from "@mui/material/ImageList";
import ImageListItem from "@mui/material/ImageListItem";
import ImageListItemBar from "@mui/material/ImageListItemBar";
import { ThumbsUpDown, ThumbsUpDownRounded } from "@mui/icons-material";
import ThumbUpIcon from "@mui/icons-material/ThumbUp";
import { IconButton } from "@mui/material";
function srcset(image, size, rows = 1, cols = 1) {
return {
src: `${image}?w=${size * cols}
&h=${size * rows}&fit=crop&auto=format`,
srcSet: `${image}?w=${size * cols}&h=${size * rows
}&fit=crop&auto=format&dpr=2 2x`,
};
}
function App() {
return (
<div className="App">
<div
className="head"
style={{
width: "fit-content",
margin: "auto",
}}
>
<h1
style={{
color: "green",
}}
>
GeeksforGeeks
</h1>
<strong>React MUI ImageListItemBar API</strong>
</div>
<br />
<ImageList
sx={{ width: 900, height: 300, margin: "auto" }}
cols={4}
variant="quilted"
rowHeight={140}
>
<ImageListItem cols={1} rows={1}>
<img
{...srcset(
121,
1,
1
)}
loading="lazy"
/>
<ImageListItemBar
title="GeeksforGeeks"
subtitle="A computer science portal for geeks."
actionIcon={
<IconButton sx={{ color: "lightgreen" }}>
<ThumbUpIcon />
</IconButton>
}
/>
</ImageListItem>
<ImageListItem cols={1} rows={1}>
<img
{...srcset(
121,
1,
1
)}
loading="lazy"
/>
<ImageListItemBar
title="GeeksforGeeks"
subtitle="A computer science portal for geeks."
actionIcon={
<IconButton sx={{ color: "lightgreen" }}>
<ThumbUpIcon />
</IconButton>
}
/>
</ImageListItem>
<ImageListItem cols={1} rows={1}>
<img
{...srcset(
121,
1,
1
)}
loading="lazy"
/>
<ImageListItemBar
title="GeeksforGeeks Logo"
subtitle="A computer science portal for geeks."
actionIcon={
<IconButton sx={{ color: "lightgreen" }}>
<ThumbUpIcon />
</IconButton>
}
/>
</ImageListItem>
<ImageListItem cols={3} rows={1}>
<img
{...srcset(
121,
3,
1
)}
loading="lazy"
/>
<ImageListItemBar
title="GeeksforGeeks New Logo"
subtitle="A computer science portal for geeks."
actionIcon={
<IconButton sx={{ color: "lightgreen" }}>
<ThumbUpIcon />
</IconButton>
}
/>
</ImageListItem>
<ImageListItem cols={1} rows={1}>
<img
{...srcset(
121,
1,
1
)}
loading="lazy"
/>
<ImageListItemBar
title="GeeksforGeeks"
subtitle="A computer science portal for geeks."
actionIcon={
<IconButton sx={{ color: "lightgreen" }}>
<ThumbUpIcon />
</IconButton>
}
/>
</ImageListItem>
</ImageList>
</div>
);
}
export default App;
|
Output:
Reference: https://mui.com/material-ui/api/image-list-item-bar/
Share your thoughts in the comments
Please Login to comment...