Material-UI 定义列表答案

【问题标题】：Material-UI definition listMaterial-UI 定义列表
【发布时间】：2017-10-18 06:30:03
【问题描述】：

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

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

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

谢谢！

【问题讨论】：

标签： reactjs material-design material-ui

【解决方案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>

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

【讨论】：

【解决方案2】：

React Material ui 的 Paper 组件怎么样。

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

以 Row 形式填写数据，每一行都启用了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/

【讨论】：

它对我有用.. 我不知道为什么它不适合你.. :P

【解决方案3】：

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

像这样使用它：

<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 中，定义标题。有 bool 变量 actAsExpander, showExpandableButton 可以控制展开/折叠功能。 Card 的所有元素都是选项，表示如果您不希望卡片操作也为其他元素删除相同的选项。

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

【讨论】：

试试这个，如果您需要任何帮助，请告诉我。
所以我只有多张卡？还是我会把所有的东西都放在一张卡片里？我觉得卡只是一个容器。我需要将 CardText 向右移动吗？
是的，卡片只是一个容器，您可以使用多张卡片，如果您将所有物品放在一张卡片中，那么只有一张卡片会展开/折叠，如果您想制作一个包含许多物品的列表可以扩展，然后使用多张卡。