Порядок столбцов сетки Semantic UI
У меня есть упорядоченный список флажков (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
Я не уверен, что вы настроены на использование столбцов, но один из способов решить эту проблему - использовать контейнер сетки и серию элементов сетки размера 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>
Грид может иметь Grid.Row, а он должен иметь Grid.Column.
Вы определили, что ваша сетка состоит из 2 столбцов; дерево компонентов для первых трех уровней должно выглядеть примерно так:
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>
);
}