Question

在正常的语义用户界面中，我们可以这样做：

<div class="ui mobile reversed tablet reversed equal width grid container">

这将在移动和平板电脑分辨率上以相反的顺序显示列。 Example

我正在尝试使用Semantic UI React实现相同的行为，但我没有这样做。

以下是我的尝试：

<Grid reversed="computer tablet">
// or
<Grid reversed="computer,tablet">
// or
<Grid reversed="computer|tablet">
// or
<Grid reversed={["computer","tablet"]}>

所有导致类似的错误消息：

警告：道具类型失败：提供给reversed的价值computer,tablet的道具GridRow无效，预期为[“计算机”，“垂直计算机”，“移动”，“移动”之一垂直“，”平板电脑“，”平板电脑垂直“]。

有没有办法实现这一点，或者这是Semantic UI React中缺少的功能？

目前，我正在使用以下解决方法，这非常难看：

const content = [<Grid.Row key="row1">...</Grid.Row>, <Grid.Row key="rowN">...</Grid.Row>]
<Grid reversed="computer" only="computer">
  {content}
</Grid>
<Grid reversed="tablet" only="tablet">
  {content}
</Grid>
<Grid only="mobile">
  {content}
</Grid>

Answer 1

您可以使用网格的className道具：

<Grid className='table reversed computer reversed' />

道具可以在doc中看到。

为网格指定多个反转条件

1 个答案: