Grid

Grid est un système de mise en page bidimensionnel, ce qui signifie qu'il peut gérer à la fois les colonnes et les lignes, ce qui vous aide à concevoir une interface utilisateur basée sur une grille, contrairement à <Stack> qui est en grande partie un système unidimensionnel.

Usage

import { Grid } from 'nr1'

Exemples

Basique

<>
  <Grid>
    <GridItem columnSpan={1}>
      <div className="nr1-RedBox">1</div>
    </GridItem>
    <GridItem columnSpan={1}>
      <div className="nr1-RedBox">1</div>
    </GridItem>
    <GridItem columnSpan={1}>
      <div className="nr1-RedBox">1</div>
    </GridItem>
    <GridItem columnSpan={1}>
      <div className="nr1-RedBox">1</div>
    </GridItem>
    <GridItem columnSpan={1}>
      <div className="nr1-RedBox">1</div>
    </GridItem>
    <GridItem columnSpan={1}>
      <div className="nr1-RedBox">1</div>
    </GridItem>
    <GridItem columnSpan={1}>
      <div className="nr1-RedBox">1</div>
    </GridItem>
    <GridItem columnSpan={1}>
      <div className="nr1-RedBox">1</div>
    </GridItem>
    <GridItem columnSpan={1}>
      <div className="nr1-RedBox">1</div>
    </GridItem>
    <GridItem columnSpan={1}>
      <div className="nr1-RedBox">1</div>
    </GridItem>
    <GridItem columnSpan={1}>
      <div className="nr1-RedBox">1</div>
    </GridItem>
    <GridItem columnSpan={1}>
      <div className="nr1-RedBox">1</div>
    </GridItem>
    <GridItem columnSpan={2}>
      <div className="nr1-RedBox">2</div>
    </GridItem>
    <GridItem columnSpan={2}>
      <div className="nr1-RedBox">2</div>
    </GridItem>
    <GridItem columnSpan={2}>
      <div className="nr1-RedBox">2</div>
    </GridItem>
    <GridItem columnSpan={2}>
      <div className="nr1-RedBox">2</div>
    </GridItem>
    <GridItem columnSpan={2}>
      <div className="nr1-RedBox">2</div>
    </GridItem>
    <GridItem columnSpan={2}>
      <div className="nr1-RedBox">2</div>
    </GridItem>
    <GridItem columnSpan={3}>
      <div className="nr1-RedBox">3</div>
    </GridItem>
    <GridItem columnSpan={3}>
      <div className="nr1-RedBox">3</div>
    </GridItem>
    <GridItem columnSpan={3}>
      <div className="nr1-RedBox">3</div>
    </GridItem>
    <GridItem columnSpan={3}>
      <div className="nr1-RedBox">3</div>
    </GridItem>
    <GridItem columnSpan={4}>
      <div className="nr1-RedBox">4</div>
    </GridItem>
    <GridItem columnSpan={4}>
      <div className="nr1-RedBox">4</div>
    </GridItem>
    <GridItem columnSpan={4}>
      <div className="nr1-RedBox">4</div>
    </GridItem>
    <GridItem columnSpan={6}>
      <div className="nr1-RedBox">6</div>
    </GridItem>
    <GridItem columnSpan={6}>
      <div className="nr1-RedBox">6</div>
    </GridItem>
    <GridItem columnSpan={12}>
      <div className="nr1-RedBox">12</div>
    </GridItem>
  </Grid>
</>

Type d'écartement moyen

<>
  <Grid gapType={Grid.GAP_TYPE.MEDIUM}>
    <GridItem columnSpan={3}>
      <div className="nr1-RedBox">3</div>
    </GridItem>
    <GridItem columnSpan={3}>
      <div className="nr1-RedBox">3</div>
    </GridItem>
    <GridItem columnSpan={3}>
      <div className="nr1-RedBox">3</div>
    </GridItem>
    <GridItem columnSpan={3}>
      <div className="nr1-RedBox">3</div>
    </GridItem>
    <GridItem columnSpan={4}>
      <div className="nr1-RedBox">4</div>
    </GridItem>
    <GridItem columnSpan={4}>
      <div className="nr1-RedBox">4</div>
    </GridItem>
    <GridItem columnSpan={4}>
      <div className="nr1-RedBox">4</div>
    </GridItem>
  </Grid>
</>

Type à petit espace

<>
  <Grid gapType={Grid.GAP_TYPE.SMALL}>
    <GridItem columnSpan={3}>
      <div className="nr1-RedBox">3</div>
    </GridItem>
    <GridItem columnSpan={3}>
      <div className="nr1-RedBox">3</div>
    </GridItem>
    <GridItem columnSpan={3}>
      <div className="nr1-RedBox">3</div>
    </GridItem>
    <GridItem columnSpan={3}>
      <div className="nr1-RedBox">3</div>
    </GridItem>
    <GridItem columnSpan={4}>
      <div className="nr1-RedBox">4</div>
    </GridItem>
    <GridItem columnSpan={4}>
      <div className="nr1-RedBox">4</div>
    </GridItem>
    <GridItem columnSpan={4}>
      <div className="nr1-RedBox">4</div>
    </GridItem>
  </Grid>
</>

Colonnes

<Grid>
  <GridItem columnStart={1} columnEnd={6}>
    <div className="nr1-RedBox">6</div>
  </GridItem>
  <GridItem columnStart={2} columnEnd={7}>
    <div className="nr1-RedBox">6</div>
  </GridItem>
  <GridItem columnStart={3} columnEnd={8}>
    <div className="nr1-RedBox">6</div>
  </GridItem>
  <GridItem columnStart={4} columnEnd={9}>
    <div className="nr1-RedBox">6</div>
  </GridItem>
  <GridItem columnStart={5} columnEnd={10}>
    <div className="nr1-RedBox">6</div>
  </GridItem>
  <GridItem columnStart={6} columnEnd={11}>
    <div className="nr1-RedBox">6</div>
  </GridItem>
  <GridItem columnStart={7} columnEnd={12}>
    <div className="nr1-RedBox">6</div>
  </GridItem>
</Grid>

Écart d'effondrement

<>
  <Grid>
    <GridItem columnSpan={4}>
      <div className="nr1-RedBox">4</div>
    </GridItem>
    <GridItem columnSpan={4} collapseGapBefore>
      <div className="nr1-RedBox">4</div>
    </GridItem>
    <GridItem columnSpan={4}>
      <div className="nr1-RedBox">4</div>
    </GridItem>
    <GridItem columnSpan={4}>
      <div className="nr1-RedBox">4</div>
    </GridItem>
    <GridItem columnSpan={4} collapseGapBefore collapseGapAfter>
      <div className="nr1-RedBox">4</div>
    </GridItem>
    <GridItem columnSpan={4}>
      <div className="nr1-RedBox">4</div>
    </GridItem>
    <GridItem columnSpan={4}>
      <div className="nr1-RedBox">4</div>
    </GridItem>
    <GridItem columnSpan={4} collapseGapAfter>
      <div className="nr1-RedBox">4</div>
    </GridItem>
    <GridItem columnSpan={4}>
      <div className="nr1-RedBox">4</div>
    </GridItem>
  </Grid>
</>

Accessoires

children

OBLIGATOIRE

nœud

Éléments de grille à afficher. Jusqu'à 12 éléments sont autorisés.

className

chaîne

Ajoute les noms de classe au composant. Doit être utilisé uniquement à des fins de positionnement et d'espacement.

fullHeight

booléen

Étend la grille pour occuper toute la hauteur disponible.

fullWidth

booléen

Étend la grille pour occuper toute la largeur disponible.

gapType

énum.

Taille de l'espace entre les colonnes et les lignes.<One of

Grid.GAP_TYPE.MEDIUMGrid.GAP_TYPE.SMALL

>

spacingType

énumération[]

Propriété d'espacement. L'espacement est défini comme un uplet de zéro à quatre valeurs, qui suivent les mêmes conventions que les propriétés CSS comme margin ou padding. Pour omettre une valeur, utilisez SPACING_TYPE.OMIT.

<Array of<One ofGrid.SPACING_TYPE.EXTRA_LARGE, Grid.SPACING_TYPE.LARGE, Grid.SPACING_TYPE.MEDIUM, Grid.SPACING_TYPE.NONE, Grid.SPACING_TYPE.OMIT, Grid.SPACING_TYPE.SMALL,
>
>

style

objet

Style en ligne pour un style personnalisé. Doit être utilisé uniquement à des fins de positionnement et d'espacement.

testId

chaîne

Ajoute un attribut data-test-id. Utilisez-le pour cibler le composant dans les tests unitaires et E2E. Pour qu'un identifiant de test soit valide, préfixez-le avec votre identifiant nerdpack, suivi d'un point. Par exemple, my-nerdpack.some-element.

Remarque : vous ne verrez peut-être pas l'attribut data-test-id car ils sont supprimés du DOM. Pour les déboguer, transmettez un paramètre de requête e2e-test à l'URL.

Cette traduction automatique est fournie pour votre commodité.

Usage.css-21sua1{background:none;border:none;width:0;padding:0;}

Exemples

Basique

Type d'écartement moyen

Type à petit espace

Colonnes

Écart d'effondrement

Accessoires

OBLIGATOIRE

nœud

chaîne

booléen

booléen

énum.

énumération[]

objet

chaîne

Usage