В обычном семантическом пользовательском интерфейсе мы можем сделать это:
<div class="ui mobile reversed tablet reversed equal width grid container">
Это отобразит столбцы в обратном порядке на мобильных устройствах и планшетах. Пример
Я пытаюсь добиться такого же поведения с помощью 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>