表格行下的可扩展区域(语义 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】:

&lt;div&gt; 不允许作为表格行的子项的警告告诉您它不是有效的 html。无论您使用的是 Semantic UI React 还是纯 HTML,都是如此。

我建议在表格中已有的行下方呈现另一行。在该行内设置一个跨越所有列的列。现在你有了一个容器,如果你愿意的话,你可以把其他的 UI 放进去。如果出于某种原因需要,您可以自定义宽单元格的样式。

然后您可以在表格的可点击区域设置切换状态。您可能希望将点击事件放在单元格的内容上,而不是单元格本身。

我拼凑了一个快速的 Codepen,展示了它是如何工作的。这为您提供了一个工作概念,您可以根据自己的用例进行修改。

https://codesandbox.io/s/serene-water-ikco9?file=/example.js

【讨论】:

以上是关于表格行下的可扩展区域(语义 UI 反应)的主要内容,如果未能解决你的问题,请参考以下文章

如何将 UICollectionViewCell 的可触摸区域扩展到其边界之外?

将文本字段数据保存在 xcode 中的可扩展表格单元格中

iphone中的可扩展tableView

iphone中的可扩展tableView

是否有任何包含支持定义按需查询的 UI 的可扩展数据流框架? [关闭]

底行的可扩展 tableView 单元格可见问题?