Семантический интерфейс реагирует на порядок столбцов сетки - PullRequest
Новая
       5

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

0 голосов
/ 26 октября 2018

У меня есть упорядоченный список флажков (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'.

Ответы [ 2 ]

0 голосов
/ 27 октября 2018

Сетка может иметь 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>

    );
  }
0 голосов
/ 27 октября 2018

Я не уверен, что вы настроены на использование столбцов, но один из способов решить эту проблему - использовать контейнер сетки и ряд элементов сетки размером 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>
...