Stack

Stack est un système de mise en page unidimensionnel avec des options pour contrôler la direction, l'espacement, la distribution et la taille relative de ses éléments enfants.

Usage

import { Stack } from 'nr1'

Exemples

Basique

<div className="nr1-Example--stack">
  <div className="nr1-Example--stack--directionHorizontal">
    <span className="nr1-Example--stack--title">Horizontal (default)</span>
    <Stack preview>
      <StackItem>
        <div className="nr1-Box--a">1</div>
      </StackItem>
      <StackItem>
        <div className="nr1-Box--b">2</div>
      </StackItem>
      <StackItem>
        <div className="nr1-Box--c">3</div>
      </StackItem>
    </Stack>
  </div>
</div>

Direction

<div className="nr1-Example--stack">
  <div className="nr1-Example--stack--directionHorizontal">
    <span className="nr1-Example--stack--title">Horizontal (default)</span>
    <Stack directionType={Stack.DIRECTION_TYPE.HORIZONTAL} preview>
      <StackItem>
        <div className="nr1-Box--a">1</div>
      </StackItem>
      <StackItem>
        <div className="nr1-Box--b">2</div>
      </StackItem>
      <StackItem>
        <div className="nr1-Box--c">3</div>
      </StackItem>
    </Stack>
  </div>


  <div className="nr1-Example--stack--directionVertical">
    <span className="nr1-Example--stack--title">Vertical</span>
    <Stack directionType={Stack.DIRECTION_TYPE.VERTICAL} preview>
      <StackItem>
        <div className="nr1-Box--a">1</div>
      </StackItem>
      <StackItem>
        <div className="nr1-Box--b">2</div>
      </StackItem>
      <StackItem>
        <div className="nr1-Box--c">3</div>
      </StackItem>
    </Stack>
  </div>
</div>

Écart

<div className="nr1-Example--stack">
  <div className="nr1-Example--stack--gapNone">
    <span className="nr1-Example--stack--title">None</span>
    <Stack gapType={Stack.GAP_TYPE.NONE} preview>
      <StackItem>
        <div className="nr1-Box--a">1</div>
      </StackItem>
      <StackItem>
        <div className="nr1-Box--b">2</div>
      </StackItem>
      <StackItem>
        <div className="nr1-Box--c">3</div>
      </StackItem>
    </Stack>
  </div>


  <div className="nr1-Example--stack--gapSmall">
    <span className="nr1-Example--stack--title">Small</span>
    <Stack gapType={Stack.GAP_TYPE.SMALL} preview>
      <StackItem>
        <div className="nr1-Box--a">1</div>
      </StackItem>
      <StackItem>
        <div className="nr1-Box--b">2</div>
      </StackItem>
      <StackItem>
        <div className="nr1-Box--c">3</div>
      </StackItem>
    </Stack>
  </div>


  <div className="nr1-Example--stack--gapMedium">
    <span className="nr1-Example--stack--title">Medium (default)</span>
    <Stack gapType={Stack.GAP_TYPE.MEDIUM} preview>
      <StackItem>
        <div className="nr1-Box--a">1</div>
      </StackItem>
      <StackItem>
        <div className="nr1-Box--b">2</div>
      </StackItem>
      <StackItem>
        <div className="nr1-Box--c">3</div>
      </StackItem>
    </Stack>
  </div>


  <div className="nr1-Example--stack--gapLarge">
    <span className="nr1-Example--stack--title">Large</span>
    <Stack gapType={Stack.GAP_TYPE.LARGE} preview>
      <StackItem>
        <div className="nr1-Box--a">1</div>
      </StackItem>
      <StackItem>
        <div className="nr1-Box--b">2</div>
      </StackItem>
      <StackItem>
        <div className="nr1-Box--c">3</div>
      </StackItem>
    </Stack>
  </div>


  <div className="nr1-Example--stack--gapExtraLarge">
    <span className="nr1-Example--stack--title">Extra large</span>
    <Stack gapType={Stack.GAP_TYPE.EXTRA_LARGE} preview>
      <StackItem>
        <div className="nr1-Box--a">1</div>
      </StackItem>
      <StackItem>
        <div className="nr1-Box--b">2</div>
      </StackItem>
      <StackItem>
        <div className="nr1-Box--c">3</div>
      </StackItem>
    </Stack>
  </div>
</div>

Alignement horizontal

<div className="nr1-Example--stack">
  <div className="nr1-Example--stack--horizontalAlignmentLeft">
    <span className="nr1-Example--stack--title">Left (default)</span>
    <Stack horizontalType={Stack.HORIZONTAL_TYPE.LEFT} preview>
      <StackItem>
        <div className="nr1-Box--a">1</div>
      </StackItem>
      <StackItem>
        <div className="nr1-Box--b">2</div>
      </StackItem>
      <StackItem>
        <div className="nr1-Box--c">3</div>
      </StackItem>
    </Stack>
  </div>


  <div className="nr1-Example--stack--horizontalAlignmentCenter">
    <span className="nr1-Example--stack--title">Center</span>
    <Stack horizontalType={Stack.HORIZONTAL_TYPE.CENTER} preview>
      <StackItem>
        <div className="nr1-Box--a">1</div>
      </StackItem>
      <StackItem>
        <div className="nr1-Box--b">2</div>
      </StackItem>
      <StackItem>
        <div className="nr1-Box--c">3</div>
      </StackItem>
    </Stack>
  </div>


  <div className="nr1-Example--stack--horizontalAlignmentRight">
    <span className="nr1-Example--stack--title">Right</span>
    <Stack horizontalType={Stack.HORIZONTAL_TYPE.RIGHT} preview>
      <StackItem>
        <div className="nr1-Box--a">1</div>
      </StackItem>
      <StackItem>
        <div className="nr1-Box--b">2</div>
      </StackItem>
      <StackItem>
        <div className="nr1-Box--c">3</div>
      </StackItem>
    </Stack>
  </div>


  <div className="nr1-Example--stack--horizontalAlignmentFill">
    <span className="nr1-Example--stack--title">Fill</span>
    <Stack horizontalType={Stack.HORIZONTAL_TYPE.FILL} preview>
      <StackItem>
        <div className="nr1-Box--a">1</div>
      </StackItem>
      <StackItem>
        <div className="nr1-Box--b">2</div>
      </StackItem>
      <StackItem>
        <div className="nr1-Box--c">3</div>
      </StackItem>
    </Stack>
  </div>


  <div className="nr1-Example--stack--horizontalAlignmentFillEvenly">
    <span className="nr1-Example--stack--title">Fill evenly</span>
    <Stack horizontalType={Stack.HORIZONTAL_TYPE.FILL_EVENLY} preview>
      <StackItem>
        <div className="nr1-Box--a">1</div>
      </StackItem>
      <StackItem>
        <div className="nr1-Box--b">2</div>
      </StackItem>
      <StackItem>
        <div className="nr1-Box--c">3</div>
      </StackItem>
    </Stack>
  </div>
</div>

Alignement vertical

<div className="nr1-Example--stack">
  <div className="nr1-Example--stack--verticalAlignmentTop">
    <span className="nr1-Example--stack--title">Top (default)</span>
    <Stack verticalType={Stack.VERTICAL_TYPE.TOP} preview>
      <StackItem>
        <div className="nr1-Box--a">1</div>
      </StackItem>
      <StackItem>
        <div className="nr1-Box--b">2</div>
      </StackItem>
      <StackItem>
        <div className="nr1-Box--c">3</div>
      </StackItem>
    </Stack>
  </div>


  <div className="nr1-Example--stack--verticalAlignmentCenter">
    <span className="nr1-Example--stack--title">Center</span>
    <Stack verticalType={Stack.VERTICAL_TYPE.CENTER} preview>
      <StackItem>
        <div className="nr1-Box--a">1</div>
      </StackItem>
      <StackItem>
        <div className="nr1-Box--b">2</div>
      </StackItem>
      <StackItem>
        <div className="nr1-Box--c">3</div>
      </StackItem>
    </Stack>
  </div>


  <div className="nr1-Example--stack--verticalAlignmentBottom">
    <span className="nr1-Example--stack--title">Bottom</span>
    <Stack verticalType={Stack.VERTICAL_TYPE.BOTTOM} preview>
      <StackItem>
        <div className="nr1-Box--a">1</div>
      </StackItem>
      <StackItem>
        <div className="nr1-Box--b">2</div>
      </StackItem>
      <StackItem>
        <div className="nr1-Box--c">3</div>
      </StackItem>
    </Stack>
  </div>


  <div className="nr1-Example--stack--verticalAlignmentFill">
    <span className="nr1-Example--stack--title">Fill</span>
    <Stack verticalType={Stack.VERTICAL_TYPE.FILL} preview>
      <StackItem>
        <div className="nr1-Box--a">1</div>
      </StackItem>
      <StackItem>
        <div className="nr1-Box--b">2</div>
      </StackItem>
      <StackItem>
        <div className="nr1-Box--c">3</div>
      </StackItem>
    </Stack>
  </div>


  <div className="nr1-Example--stack--verticalAlignmentFillEvenly">
    <span className="nr1-Example--stack--title">Fill evenly</span>
    <Stack verticalType={Stack.VERTICAL_TYPE.FILL_EVENLY} preview>
      <StackItem>
        <div className="nr1-Box--a">1</div>
      </StackItem>
      <StackItem>
        <div className="nr1-Box--b">2</div>
      </StackItem>
      <StackItem>
        <div className="nr1-Box--c">3</div>
      </StackItem>
    </Stack>
  </div>
</div>

Accessoires

children

OBLIGATOIRE

nœud

empiler les éléments à afficher.

className

chaîne

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

directionType

énum.

Direction des éléments stack .

<One ofStack.DIRECTION_TYPE.HORIZONTAL, Stack.DIRECTION_TYPE.VERTICAL,
>

fullHeight

booléen

Étend la stack pour occuper toute la hauteur disponible.

fullWidth

booléen

Étend la stack pour occuper toute la largeur disponible.

gapType

énum.

Espace entre chaque élément stack .

<One ofStack.GAP_TYPE.EXTRA_LARGE, Stack.GAP_TYPE.LARGE, Stack.GAP_TYPE.MEDIUM, Stack.GAP_TYPE.NONE, Stack.GAP_TYPE.SMALL,
>

horizontalType

énum.

Définit l'alignement horizontal et la distribution des éléments stack .

<One ofStack.HORIZONTAL_TYPE.CENTER, Stack.HORIZONTAL_TYPE.FILL, Stack.HORIZONTAL_TYPE.FILL_EVENLY, Stack.HORIZONTAL_TYPE.LEFT, Stack.HORIZONTAL_TYPE.RIGHT,
>

preview

booléen

Dessine visuellement les cases de la pile et ses StackItems.

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 ofStack.SPACING_TYPE.EXTRA_LARGE, Stack.SPACING_TYPE.LARGE, Stack.SPACING_TYPE.MEDIUM, Stack.SPACING_TYPE.NONE, Stack.SPACING_TYPE.OMIT, Stack.SPACING_TYPE.SMALL,
>
>

style

objet

Style en ligne pour un style personnalisé.

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.

verticalType

énum.

Définit l'alignement vertical et la distribution des éléments stack .

<One ofStack.VERTICAL_TYPE.BOTTOM, Stack.VERTICAL_TYPE.CENTER, Stack.VERTICAL_TYPE.FILL, Stack.VERTICAL_TYPE.FILL_EVENLY, Stack.VERTICAL_TYPE.TOP
>

Cette traduction automatique est fournie pour votre commodité.

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

Exemples

Basique

Direction

Écart

Alignement horizontal

Alignement vertical

Accessoires

OBLIGATOIRE

nœud

chaîne

énum.

booléen

booléen

énum.

énum.

booléen

énumération[]

objet

chaîne

énum.

Usage