ListItemText
Overview
ListItemText is a single item that contains the individual content, and it will allow placing text in the ListItem with its properties.
Please refer to this for more information: https://mui.com/material-ui/api/list-item-text/.
Import
import { ListItem, ListItemButton, ListItemText } from '@mui/material';
The above source will be imported automatically after dragging and dropping the Basic Component to the UI Preview Panel.
Property
Property:
Name | Default | Description |
Id-name | Placeholder: <id-name> | The Id-name of the created component. |
State | State: Normal | The State of the created Component. |
Margin and Padding | Size Unit: Px | The component Margin and Padding with many selectable Size Units. |
Size | Size Unit: Px | The component Size includes Width and Height with many selectable Size Units. |
Layout | Position: None Size Unit: Px | The component Layout includes Position and Top - Right - Bottom - Left with many selectable Size Units. |
General | Inset: False Opacity: 100% | The component General includes Inset, Opacity, and Background. |
Advanced Style | The component Advanced Style includes Classname and Inline Style addition. |
Code Sample:
<ListItemText
sx={{':hover': {'width': '150px','height': '300px',
'position': 'fixed',
'margin': '10px 30px 20px 20px', 'padding': '10px 30px 20px 20px',
'top': '20px','right': '20px','bottom': '20px','left': '20px',
'opacity': 0.33,'backgroundColor': '#ff0000ff',}, }}
inset={true}>
</ListItemText>
Related Component