GridListTileBar API
The API documentation of the GridListTileBar React component. Learn more about the props and the CSS customization points.
Import
import GridListTileBar from '@material-ui/core/GridListTileBar';
// or
import { GridListTileBar } from '@material-ui/core';
You can learn more about the difference by reading this guide.
⚠️ The GridListTileBar component was renamed to ImageListTileBar to align with the current Material Design naming.
You should use import { ImageListTileBar } from '@material-ui/core'
or import ImageListTileBar from '@material-ui/core/ImageListTileBar'
.
Component name
The MuiGridListTileBar
name can be used for providing default props or style overrides at the theme level.
Props
Name | Type | Default | Description |
---|---|---|---|
actionIcon | node | An IconButton element to be used as secondary action target (primary action target is the tile 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. | |
subtitle | node | String or element serving as subtitle (support text). | |
title | node | Title to be displayed on tile. | |
titlePosition | 'bottom' | 'top' |
'bottom' | Position of the title bar. |
The ref
is forwarded to the root element.
Any other props supplied will be provided to the root element (native element).
CSS
Rule name | Global class | Description |
---|---|---|
root | .MuiGridListTileBar-root | Styles applied to the root element. |
titlePositionBottom | .MuiGridListTileBar-titlePositionBottom | Styles applied to the root element if titlePosition="bottom" . |
titlePositionTop | .MuiGridListTileBar-titlePositionTop | Styles applied to the root element if titlePosition="top" . |
rootSubtitle | .MuiGridListTileBar-rootSubtitle | Styles applied to the root element if a subtitle is provided. |
titleWrap | .MuiGridListTileBar-titleWrap | Styles applied to the title and subtitle container element. |
titleWrapActionPosLeft | .MuiGridListTileBar-titleWrapActionPosLeft | Styles applied to the container element if actionPosition="left" . |
titleWrapActionPosRight | .MuiGridListTileBar-titleWrapActionPosRight | Styles applied to the container element if actionPosition="right" . |
title | .MuiGridListTileBar-title | Styles applied to the title container element. |
subtitle | .MuiGridListTileBar-subtitle | Styles applied to the subtitle container element. |
actionIcon | .MuiGridListTileBar-actionIcon | Styles applied to the actionIcon if supplied. |
actionIconActionPosLeft | .MuiGridListTileBar-actionIconActionPosLeft | Styles applied to the actionIcon if actionPosition="left" . |
You can override the style of the component thanks to one of these customization points:
- With a rule name of the
classes
object prop. - With a global class name.
- With a theme and an
overrides
property.
If that's not sufficient, you can check the implementation of the component for more detail.