0

我正在为 ux 使用 Grommet React 库。我正在做一个电话布局项目。

我有一个来自 redux 状态的道具，它代表一个元素数组。初始状态为空数组，服务器返回后，props 为

[{ country: 'England' }, { country: 'Germany' }, { country: 'Spain' }, { country: 'Zimbawe' }]

我想要的是一个列布局，每行正好有两列，每列占可用空间的 50%。

为此，我以这种方式使用了 Column 组件

<Columns responsive={false}>
    {this.props.countries.map(this.renderCountries)}
</Columns>

最后是 renderCountries 方法

renderCountries (country) {
    return <Box key={country.country}>{country.country}</Box>
}

但是使用此代码，系统将仅逐行呈现一个元素。如何逐行获取两列？

提前致谢

4

1 回答 1

0

根据Grommet Docs for Columns布局将由组件本身计算。

您可以做的是设置道具Columns并Box实现所需的布局，您可以为size道具提供Columns并将Box其与maxCount道具组合。

maxCount 数量

允许砌体选项的列数，基于组件宽度。根据列子项的宽度（设置大小）进行响应。

尺寸 小|中|大

每列的宽度。默认为中。

例如

如果设备/窗口/父宽度足以容纳，下面的示例将确保您最多有 2 列。否则它将显示 1 列。

<Columns maxCount={2} size="large" responsive={false}>
    {this.props.countries.map(this.renderCountries)}
</Columns>

renderCountries (country) {
    return <Box key={country.country}>{country.country}</Box>
}

除了这些道具之外，您还可以使用Box组件道具来实现所需的布局。

于 2017-09-16T09:53:42.177 回答