Семантический пользовательский интерфейс реагирует на порядок столбцов сетки

У меня есть упорядоченный список флажков (this.state.columns):

1. 2. 3. 4. 5. 6. ...

и я хочу отобразить этот список в двух столбцах, но семантическая сетка пользовательского интерфейса меняет порядок на:

'1.' '2.'

'3.' '4.'

'5.' '6.'

Это мой код:

<Grid stackable columns={2}>
        {this.state.columns.map(
          data =>
            data.label !== ' ' && (
              <Grid.Column key={data.key}>
                <Field
                  name={data.key}
                  component={fields.field.checkbox}
                  label={data.label}
                  type="checkbox"
                  control={Checkbox}
                />
              </Grid.Column>
            )
        )}
</Grid>

Любые идеи о том, как это исправить? Мне нужно, чтобы отображалось так:

'1.' '4.'

'2.' '5.'

'3.' '6.'


reactjs semantic-ui-react
person Howl Jenkins    schedule 26.10.2018    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Сетка может иметь Grid.Row, а она должна иметь Grid.Column.

Вы определили свою сетку, чтобы иметь 2 столбца; это должно иметь ваше дерево компонентов для первых 3 уровней, похожее на это:

Grid
----Grid.Row
---------Grid.Column (GridColumn#1)
---------Grid.Column (GridColumn#2)

GridColumn#1 будет содержать данные, содержащиеся в this.state.columns, а GridColumn#2 будет содержать другую половину.

Вы можете получить половину для GridColumn#1, разрезав массив до половины его длины и до половины его длины для GridColumn#2.

Обратите внимание, вам нужно настроить это для случаев, когда длина массива для this.state.columns нечетная. (в приведенном ниже примере я полагался на Javascript для преобразования чисел с плавающей запятой в целые)

Вот один из способов реализовать это; это могло бы выиграть от некоторого рефакторинга.

  renderCheckboxColumns() {
    const { columns } = this.state
    const leftColumns = columns.slice(0, (columns.length + 1 )/ 2).map(
      data =>
        <Grid.Row>
          <Grid.Column>{data}</Grid.Column>
        </Grid.Row>
    )

    const rightColumns = columns.slice((columns.length + 1)/ 2).map(
      data =>
        <Grid.Row>
          <Grid.Column>{data}</Grid.Column>
        </Grid.Row>
    )

    return (
      <Grid.Row>
        <Grid.Column>
          {leftColumns}
        </Grid.Column>
        <Grid.Column>
          {rightColumns}
        </Grid.Column>
      </Grid.Row>
    );
  }

  render() {
    return (
      <Grid stackable columns={2}>
        {this.renderCheckboxColumns()}
      </Grid>

    );
  }
person Oluwafemi Sule    schedule 26.10.2018

arrow_upward
0
arrow_downward

Я не уверен, настроены ли вы на использование столбцов, но один из способов решить эту проблему - использовать контейнер сетки и серию элементов сетки размера 6.

<Grid container spacing={24}>
        {this.state.columns.filter(d => d.label !== ' ')
          .reduce((map, d, i) => {
            let modulo = Math.ceil(this.state.columns.length/2)
            let row = [d]
            if (i+modulo < this.state.columns.length) {
                row.push(this.state.columns[i+modulo])
            }
            map = map.concatenate(row.map(data => 
                <Grid item key={data.key} xs={6}>
                <Field
                  name={data.key}
                  component={fields.field.checkbox}
                  label={data.label}
                  type="checkbox"
                  control={Checkbox}
                />
              </Grid>))

           }, [])}
</Grid>
person Albert James Teddy    schedule 26.10.2018