材质-UI定义列表

Question

我正在尝试使用 React Material-UI 实现以下目标，减去右侧的扩展插入符号：

这是 Google 页面上的规格。 https://material.io/guidelines/components/expansion-panels.html#expansion-panels-usage

我发现这种风格没有确切的组件。我基本上有一堆要显示的摘要数据，但我觉得表格或带有副标题的直接材料列表是不合适的。我想我真的想要一个 html 定义列表。有谁知道如何做到这一点？只是想真正了解如何使用现有的材料组件来做到这一点。

谢谢！

Answer 1

我参加聚会有点晚了，但我会这样做：

<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>

我实现了与上面类似的解决方案。您可以切换容器以满足您的特定需求。

Answer 2

使用React Material ui的Paper组件怎么样？

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

将数据填充为行，每行都启用 border-bottom css。

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

看看这个小提琴..有点乱，但你会明白要点的。

https://jsfiddle.net/cmaL8jku/

Answer 3

有一个material-ui组件Card，你可以使用它。它具有相同的展开/折叠功能。

像这样使用它：

<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>

将内容放入CartText中，定义标题。有布尔变量actAsExpander，showExpandableButton，您可以通过它们控制展开/折叠功能。卡的所有元素都是选项，这意味着如果您不希望卡操作，请删除其他元素的相同元素。

查看DOC了解有关卡的更多详细信息。

Answer 4

我认为最好的解决方案是使用 makeStyles 并根据您的需要设置样式。

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();

然后只需将类添加到您的 dl 中即可。

<dl className={classes.definitionList}>

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

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

</dl>

Answer 5

我使用了

Paper

的组合来表示容器样式，

Stack

表示每个项目，以及

Divider

表示分隔线。

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>
);

可以通过以下方式使用：

<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>