表格行下的可扩展区域(语义 UI 反应)
Posted
技术标签:
【中文标题】表格行下的可扩展区域(语义 UI 反应)【英文标题】:Expandable area under a Table Row (Semantic UI React) 【发布时间】:2021-01-27 21:09:21 【问题描述】:我正在尝试在表格中创建表格行,该表格可以通过单击(单独)来展开。
例如,如果我单击下图中的指定区域,则会下拉一个 Segment/Container(某种区域),其中包含内容。
我尝试了in this thread 提到的解决方案,但根本问题是表格行/单元格下的每个元素都受制于表格标题单元格的规则和边界。因此,例如,如果我尝试创建一个带有 Segment 的表格行,结果将如下所示:
如您所见,Segment 位于新 Row 内,但仅限于 HeaderCell 的大小。
执行此操作时,我也会收到此错误:
validateDOMNesting(...): <div> cannot appear as a child of <tr>.
in div (created by Segment)
因此 Table Row 下的 Segment 似乎是一个被禁止的元素结构。
知道元素结构应该如何在表格行下创建某种区域吗?
【问题讨论】:
【参考方案1】:<div>
不允许作为表格行的子项的警告告诉您它不是有效的 html。无论您使用的是 Semantic UI React 还是纯 HTML,都是如此。
我建议在表格中已有的行下方呈现另一行。在该行内设置一个跨越所有列的列。现在你有了一个容器,如果你愿意的话,你可以把其他的 UI 放进去。如果出于某种原因需要,您可以自定义宽单元格的样式。
然后您可以在表格的可点击区域设置切换状态。您可能希望将点击事件放在单元格的内容上,而不是单元格本身。
我拼凑了一个快速的 Codepen,展示了它是如何工作的。这为您提供了一个工作概念,您可以根据自己的用例进行修改。
https://codesandbox.io/s/serene-water-ikco9?file=/example.js
【讨论】:
以上是关于表格行下的可扩展区域(语义 UI 反应)的主要内容,如果未能解决你的问题,请参考以下文章
如何将 UICollectionViewCell 的可触摸区域扩展到其边界之外?