Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Material UI - hierarchical ordered list

I wanted to do a simple list like this:

1. xxxxx
2. xxxxx
   a. xxxxx
   b. xxxxx
3. xxxxx
4. xxxxx
   a. xxxxx
   b. xxxxx

The contents is taken from a react state variable and be mapped to create this list. The state variable structure is not decided upon yet.

If I used css ol & li, it looks straightforward. But when I look at the MUI List, it does not seem to support this. I have to create the numbering 1,2,3 and a,b,c manully.

Is there any MUI components that does a similar job as the css ul & li ?

Thanks.

like image 338
EBDS Avatar asked Oct 19 '25 15:10

EBDS


1 Answers

You can do this by using some CSS properties. First the ListItem this needs to have a sx={{ display: "list-item" }}. Then we can add sx={{ listStyle: "decimal" }} to the List

We also need to add some padding-left to be able to see the indicator, you can play with this.

<List sx={{ listStyle: "decimal", pl: 4 }}>
  <ListItem sx={{ display: "list-item" }}>
    <ListItemText primary="A" />
  </ListItem>
  <ListItem sx={{ display: "list-item" }}>
    <ListItemText primary="List" />
  </ListItem>
  <ListItem sx={{ display: "list-item" }}>
    <ListItemText primary="Item" />
  </ListItem>
</List>

And use listStyle: "lower-alpha" for a b c

like image 130
RubenSmn Avatar answered Oct 22 '25 03:10

RubenSmn



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!