ImageListItemBar API
API documentation for the React ImageListItemBar component. Learn about the available props and the CSS API.
Import
import ImageListItemBar from '@mui/material/ImageListItemBar';
// or
import { ImageListItemBar } from '@mui/material';
Component name
The nameMuiImageListItemBar
can be used when providing default props or style overrides in the theme.Props
Props of the native component are also available.
Name | Type | Default | Description |
---|---|---|---|
actionIcon | node | An IconButton element to be used as secondary action target (primary action target is the item itself). | |
actionPosition | 'left' | 'right' | 'right' | Position of secondary action IconButton. |
classes | object | Override or extend the styles applied to the component. See CSS API below for more details. | |
position | 'below' | 'bottom' | 'top' | 'bottom' | Position of the title bar. |
subtitle | node | String or element serving as subtitle (support text). | |
sx | Array<func | object | bool> | func | object | The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details. | |
title | node | Title to be displayed. |
The
ref
is forwarded to the root element.CSS
Rule name | Global class | Description |
---|---|---|
root | .MuiImageListItemBar-root | Styles applied to the root element. |
positionBottom | .MuiImageListItemBar-positionBottom | Styles applied to the root element if position="bottom" . |
positionTop | .MuiImageListItemBar-positionTop | Styles applied to the root element if position="top" . |
positionBelow | .MuiImageListItemBar-positionBelow | Styles applied to the root element if position="below" . |
titleWrap | .MuiImageListItemBar-titleWrap | Styles applied to the title and subtitle container element. |
titleWrapBelow | .MuiImageListItemBar-titleWrapBelow | Styles applied to the title and subtitle container element if position="below" . |
titleWrapActionPosLeft | .MuiImageListItemBar-titleWrapActionPosLeft | Styles applied to the container element if actionPosition="left" . |
titleWrapActionPosRight | .MuiImageListItemBar-titleWrapActionPosRight | Styles applied to the container element if actionPosition="right" . |
title | .MuiImageListItemBar-title | Styles applied to the title container element. |
subtitle | .MuiImageListItemBar-subtitle | Styles applied to the subtitle container element. |
actionIcon | .MuiImageListItemBar-actionIcon | Styles applied to the actionIcon if supplied. |
actionIconActionPosLeft | .MuiImageListItemBar-actionIconActionPosLeft | Styles applied to the actionIcon if actionPosition="left" . |
You can override the style of the component using one of these customization options:
- With a global class name.
- With a rule name as part of the component's
styleOverrides
property in a custom theme.