Material-UI 定义列表

Question

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

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

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

谢谢！

Answer 1

使用 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/