Comment faire une disposition de colonne dans un passe-fils

Question

J'utilise la bibliothèque Grommet React pour ux. Je travaille sur un projet de mise en page téléphonique.

J'ai un prop de l'état redux qui représente un tableau d'élément. L'état initial est un tableau vide et, après le retour au serveur, les accessoires seront

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

Ce que je veux est une mise en page de la colonne avec exactement deux colonnes par ligne où chaque colonne obtenez 50% de l'espace disponible.

Pour ce faire, je l'ai utilisé la composante colonne de cette manière

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

Et enfin la méthode renderCountries

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

Mais avec ce code, le système rend un seul élément par ligne. Comment puis-je obtenir deux colonnes par rangée?

Merci à l'avance

Answer 1

Selon Grommet Docs for Columns mise en page va être calculée par le composant lui-même.

Ce que vous pouvez faire est de fixer des accessoires pour Columns et Box pour réaliser la mise en page est désirée, vous pouvez donner size prop pour Columns et Box et le combiner avec l'hélice maxCount.

maxCountnombre

Nombre de colonnes pour permettre une option de maçonnerie, sur la base de la largeur du composant. Répond en fonction de la largeur de la colonne enfants (avec la taille).

taillepetit | moyenne | grande

La largeur de chaque colonne. La valeur par défaut est .

Par exemple

exemple ci-dessous vous assurer auriez un maximum de 2 colonnes si le périphérique/fenêtre/largeur de parent est suffisant pour s'adapter. Sinon sa va afficher de 1 colonne.

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

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

Autre que ces accessoires vous pouvez aussi jouer avec des accessoires Box composants pour atteindre la mise en page désirée.