Укажите несколько обратных критериев для сетки

В обычном семантическом пользовательском интерфейсе мы можем сделать это:

<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>

person Daniel Hilgarth    schedule 18.10.2017    source источник
comment
Я создал задачу: github.com/Semantic-Org/Semantic-UI -Реагировать/проблемы/2222   -  person Daniel Hilgarth    schedule 20.10.2017


Ответы (1)


Вы можете использовать className опору сетки:

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

Реквизит доступен, как показано в этом документе.

person lipp    schedule 18.10.2017
comment
Возможно, открытие вопроса имело бы смысл, поскольку ваша точка зрения кажется мне вполне разумной. - person lipp; 18.10.2017
comment
Да, я могу это сделать. Возможно, это менее уродливо, чем мой обходной путь. Я собираюсь открыть тему, как только буду уверен, что ничего не упускаю. - person Daniel Hilgarth; 18.10.2017