CODEWITHSUNDEEP
reactjsmaterial-designmaterial-ui
Julian Wilson
Julian Wilson

Reputation: 2470

Material-UI definition list

I'm trying to achieve the following using React Material-UI, minus the expansion carets on the right:

list with right items

Here's the spec on the Google page. https://material.io/guidelines/components/expansion-panels.html#expansion-panels-usage

I've found that there's no exact component for this style. I basically have a bunch of summary data that I want to display but I feel like a Table or just a straight Material List with subheadings is not appropriate. I guess I really want a html definition list basically. Does anyone have any idea how to do this? Just looking for really an idea of how I could do it with the existing material components.

Thanks!

Upvotes: 9

Views: 6351

Answers (5)

Matt Huggins
Matt Huggins

Reputation: 83289

I used a combination of Paper for the container style, Stack for each item, and Divider for the separator line.

const DefinitionItem = ({ label, children }: {
  label: React.ReactNode;
  children: React.ReactNode;
}) => (
  <Stack direction="row" width="100%" p={2} gap={2}>
    <Typography component="dt" variant="body1" sx={{ flexGrow: 1 }}>
      {label}
    </Typography>
    <Typography component="dd" variant="body1">
      {children}
    </Typography>
  </Stack>
);

const DefinitionList = ({ children }: { children: React.ReactNode }) => (
  <Paper>
    <Stack component="dl" divider={<Divider />}>
      {children}
    </Stack>
  </Paper>
);

Can be used via the following:

<DefinitionList>
  <DefinitionItem label="Trip Name">Caribbean Cruise</DefinitionItem>
  <DefinitionItem label="Location">Barbados</DefinitionItem>
  <DefinitionItem label="Start and end dates">
    <Stack direction="row" spacing={6}>
      <>Start Date: Today</>
      <>End Date: Tomorrow</>
    </Stack>
  </DefinitionItem>
</DefinitionList>

Upvotes: 0

Brian Herbert
Brian Herbert

Reputation: 1191

I think the best solution is to use makeStyles and style it to your needs.

import makeStyles from '@mui/styles/makeStyles';

const useStyles = makeStyles((theme) => ({
  definitionList: {
    '& > dt': theme.typography.body1,
    '& > dd': theme.typography.body2,
  },
}));

export const MyComponent: React.FC = observer(() => {
  const classes = useStyles();

Then simply add the class to your dl.

<dl className={classes.definitionList}>

  <dt>Given Name:</dt>
  <dd>{profile.givenName}</dd>

  <dt>Surname:</dt>
  <dd>{profile.surname}</dd>

</dl>

Upvotes: 0

krebeDev
krebeDev

Reputation: 51

I'm kinda late to the party, but here's how I'll do it:

<Grid 
  container
  component='dl' // mount a Definition List
  spacing={2}>
  <Grid item>
    <Typography component='dt' variant='h6'> 
      Some Heading or Definition Term
    </Typography>
    <Typography component='dd' variant='body2'>
      Some Definition data
    </Typography>
  </Grid>
</Grid>

I implemented a similar solution as above. You can switch the containers around to suit your specific need.

Upvotes: 5

Mayank Shukla
Mayank Shukla

Reputation: 104399

There is a material-ui component Card, you can use that. It has the same expand/collapse feature.

Use it like this:

<Card>

    <CardHeader
        title="Without Avatar"
        subtitle="Subtitle"
        actAsExpander={true}
        showExpandableButton={true}
    />

    <CardActions>
        <FlatButton label="Action1" />
        <FlatButton label="Action2" />
    </CardActions>

    <CardText expandable={true}>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        Donec mattis pretium massa. Aliquam erat volutpat. Nulla facilisi.
        Donec vulputate interdum sollicitudin. Nunc lacinia auctor quam sed pellentesque.
        Aliquam dui mauris, mattis quis lacus id, pellentesque lobortis odio.
    </CardText>

</Card>

Put the content inside CartText, define the header. There are bool variable actAsExpander, showExpandableButton by which you can control the expand/collapse feature. All the elements of Card are options means if you don't want the card action remove that same for other elements also.

Check the DOC for more details on Card.

Upvotes: 0

JiN
JiN

Reputation: 828

How about using the Paper component of react material ui.

http://www.material-ui.com/#/components/paper

Fill in the data as a Row with each row having border-bottom css enabled.

<Paper>
  <div style={{borderTop: '1px solid #dce0e0'>
   // fill in each data as a column of a specified width
  </div>
</Paper>

Check out this fiddle.. It's a bit messy but you will get the gist.

https://jsfiddle.net/cmaL8jku/

Upvotes: 0

Related Questions