Passer au contenu principal

Mises en page

Jutro fournit des mises en page prédéfinies que vous pouvez appliquer directement à votre page ou à une partie de la page. Elles ne nécessitent qu'une configuration minimale.

Vous pouvez les importer comme suit :

import {
  OneToOneColumnLayout,
  SingleColumnLayout,
  TwoToOneColumnLayout,
} from '@jutro/components/lab-preview';

Disposition un-à-un​

Note: Ce composant nécessite exactement deux composants enfants

disposition un-à-un

Les colonnes sont de largeur égale.

Disposition à une colonne​

disposition à une colonne

Le composant peut contenir un nombre illimité d'enfants. Ils sont empilés les uns sur les autres.

Disposition deux-à-un​

Note: Ce composant nécessite exactement deux composants enfants

disposition deux-à-un

La première colonne est deux fois plus large que la seconde.

Largeur​

Vous pouvez définir la propriété maxWidth sur l'une des valeurs suivantes :

  • default : comme prévu, il s'agit de la valeur par défaut, qui est automatiquement appliquée même si vous ne définissez aucune valeur
  • narrow
  • expanded
  • une largeur personnalisée en pixels spécifiée sous forme de chaîne dans le suffixe px, par exemple 1024px

Propriétés de point de rupture​

Les mises en page sont réactives, ce qui signifie que les colonnes s'empilent lorsqu'il n'y a pas assez de place pour les afficher côte-à-côte. Vous pouvez remplacer ce comportement en transmettant des propriétés pour un point d'arrêt donné. Par exemple :

<OneToOneColumnLayout phone={{ useCard: false }}>
  <MyElement />
  <MyElement />
</OneToOneColumnLayout>

Vous pouvez en savoir plus sur les points d'arrêt et la réactivité ici.

Aucune fiche​

Par défaut, les colonnes s'affichent à l'intérieur des fiches. Pour effectuer un rendu sans fiches, définissez useCard sur false.