Elanor

Stack

Last updated

Lays out children in a column or a row with even spacing from the gap scale. Use it for most one-dimensional layouts; for columns that align across rows, use Grid.

Draft

In review

Published
Code
demo.tsx 
import {Stack, Text} from '@earendil-works/elanor-react';

import styles from './stack.module.css';

export default function StackDemo() {
  return (
    <Stack>
      <Text className={styles.item}>Draft</Text>
      <Text className={styles.item}>In review</Text>
      <Text className={styles.item}>Published</Text>
    </Stack>
  );
}
stack.module.css 
.item {
  padding: var(--semantic-dimension-space-padding-small);
  border-radius: var(--semantic-dimension-radius-small);
  background: var(--semantic-color-background-fill-secondary);
}

Usage

import {Stack} from '@earendil-works/elanor-react';

<Stack gap="small">{/* Children */}</Stack>;

Stack renders a flex div. It defaults to a column with medium gap and aligns children to the start of the cross axis.

Row

direction="row" lays children out horizontally. Add wrap="wrap" so they wrap instead of overflowing.

Draft

In review

Published
Code
row.tsx 
import {Stack, Text} from '@earendil-works/elanor-react';

import styles from './stack.module.css';

export default function StackRow() {
  return (
    <Stack direction="row" gap="small" wrap="wrap">
      <Text className={styles.item}>Draft</Text>
      <Text className={styles.item}>In review</Text>
      <Text className={styles.item}>Published</Text>
    </Stack>
  );
}
stack.module.css 
.item {
  padding: var(--semantic-dimension-space-padding-small);
  border-radius: var(--semantic-dimension-radius-small);
  background: var(--semantic-color-background-fill-secondary);
}

Stretch

Children keep their own width by default. align="stretch" makes them fill the cross axis.

Draft

In review

Published
Code
align.tsx 
import {Stack, Text} from '@earendil-works/elanor-react';

import styles from './stack.module.css';

export default function StackAlign() {
  return (
    <Stack align="stretch">
      <Text className={styles.item}>Draft</Text>
      <Text className={styles.item}>In review</Text>
      <Text className={styles.item}>Published</Text>
    </Stack>
  );
}
stack.module.css 
.item {
  padding: var(--semantic-dimension-space-padding-small);
  border-radius: var(--semantic-dimension-radius-small);
  background: var(--semantic-color-background-fill-secondary);
}

Space between

gap="auto" puts all free space between the children, pushing them to the ends. They keep at least the medium gap, also between wrapped lines.

Website redesign

3 open tasks
Code
gap-auto.tsx 
import {Stack, Text} from '@earendil-works/elanor-react';

import styles from './stack.module.css';

export default function StackGapAuto() {
  return (
    <Stack direction="row" gap="auto" align="center" wrap="wrap">
      <Text className={styles.item}>Website redesign</Text>
      <Text className={styles.item}>3 open tasks</Text>
    </Stack>
  );
}
stack.module.css 
.item {
  padding: var(--semantic-dimension-space-padding-small);
  border-radius: var(--semantic-dimension-radius-small);
  background: var(--semantic-color-background-fill-secondary);
}

API

Stack

PropTypeDefaultDescription
direction'row' | 'column''column'Main axis: column stacks vertically, row horizontally.
gap'xxSmall' | 'xSmall' | 'small' | 'medium' | 'large' | 'xLarge' | 'auto''medium'Space between children. auto puts free space between them, at least the medium gap.
align'start' | 'center' | 'end' | 'stretch''start'Cross-axis alignment. stretch makes children fill the cross axis.
wrap'wrap' | 'nowrap''nowrap'Whether children wrap onto new lines when space runs out.

Renders <div>. Also accepts its HTML attributes and ref.

↑↓to select↵to openEscto close