我尝试使用React Material-UI实现以下内容,减去右边的扩展插入符号:
这是谷歌页面上的规格。https://material.io/guidelines/components/expansion-panels.html#expansion-panels-usage
我发现这种风格没有确切的组成部分。我基本上有一堆汇总数据,我想显示,但我觉得像一个表或只是一个直接的材料清单与副标题是不合适的。我想我真的想要一个html定义列表基本上。有人知道怎么做吗?只是在寻找一个想法,如何用现有的材料组件来做这件事。
谢谢你,谢谢
5条答案
按热度按时间fslejnso1#
我有点迟到了,但我会这么做:
我实现了一个与上面类似的解决方案。您可以根据您的具体需要切换容器。
edqdpe6u2#
使用react material ui的Paper组件怎么样?
http://www.material-ui.com/#/components/paper
将数据填充为一行,每行都启用了底部边框css。
看看这个小提琴。这是一个有点混乱,但你会得到的要点。
https://jsfiddle.net/cmaL8jku/
pkbketx93#
有一个material-ui组件Card,可以使用。它具有相同的扩展/折叠功能。
这样使用:
将内容放入CartText中,定义标题。有bool变量actAsExpander,showExpandableButton,可以控制展开/折叠功能。卡片的所有元素都是选项,这意味着如果你不希望卡片动作被删除,其他元素也是如此。
查看DOC以了解卡的更多详细信息。
zy1mlcev4#
我认为最好的解决方案是使用makeStyles并根据您的需求设计样式。
然后简单地将类添加到你的dl中。
up9lanfz5#
我使用
Paper
作为容器样式,Stack
用于每个项目,Divider
用于分隔线。可通过以下方式使用: