그로밋에서 기둥 레이아웃을 만드는 방법

Question

나는 그놈 반동 라이브러리를 사용하고 있습니다. 나는 전화 레이아웃 프로젝트에서 일하고있다.

저는 요소 배열을 나타내는 redux 상태의 지주를했습니다. 초기 상태는 서버가 반환 한 후, 소품은 내가 원하는 것은 각 열은 사용 가능한 공간의 50 %를 얻을 수 행에 의해 정확히 두 개의 열이있는 열 레이아웃입니다

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

것, 하늘의 배열입니다.

내가 이런 식으로

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

그리고 마지막으로 renderCountries 방법

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

에서 열 구성 요소를 사용했습니다하지만이 코드로 시스템이 행에 의해 하나의 요소를 렌더링 이렇게하려면. 행별로 두 개의 열을 얻으려면 어떻게해야합니까? Grommet Docs for Columns 레이아웃에 따라 미리

Answer 1

에

감사 구성 요소 자체에 의해 계산 될 것이다.

은 무엇 당신이 할 수있는 것은 당신이 Columns 및 Box에 대한 size 소품을주고 maxCount 소품으로 결합 할 수 있습니다, 원하는 레이아웃이 달성 Columns 및 Box 위해 소품을 설정하는 것입니다. 열

MAXCOUNT수

번호는 벽돌 옵션, 구성 요소의 폭에 따라 이 가능합니다. 열 너비에 따라 어린이 (크기가 설정 됨)를 기준으로 응답합니다.

크기작은 |

각 열의 폭 넓은 | 매체. 기본값은 매체 입니다.

예 장치/윈도우/부모의 폭에 맞게 충분한 경우 최대 2 열이있을 것입니다 보장합니다 예를 아래

. 그렇지 않으면 그 거 쇼 1 열하십시오. 당신은 또한 Box 구성 요소 소품 놀 수있는 이러한 소품을 제외

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

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

가 원하는 레이아웃을 달성했다.