Column

Import

import { Column } from '@envsemble/envui';

Usage

ProjectDetails.tsx

import { Button, Column, Row, Text } from '@envsemble/envui';

export default function ProjectDetails() {
  return (
    <Column gap={4}>
      <Text render={<h3 />} variant="title">
        Project details
      </Text>
      <Text>Shared plans and notes for the Northwind launch.</Text>
      <Text variant="body-sm">Updated today by Sam Lee</Text>
      <Row wrap align="center" gap={4}>
        <Button>Open project</Button>
        <Button variant="secondary">Share</Button>
      </Row>
    </Column>
  );
}

gap is a step of the spacing scale, from 1, 0.25 rem, to 9, 4 rem, and 0; a Column has none by default.
align is stretch, the default, which makes each child as wide as the column, or start, center or end, which keep each child at its own width; buttons, chips and badges keep theirs in any case.
justify places the children along the column where there is room to spare: start, the default, center, end or between.
padding insets it by a step of the same scale.

Stacked actions

In a narrow pane, stack the actions in a Column and give each Button fullWidth, so the labels have the whole width.

<Column gap={2}>
  <Button fullWidth>Publish</Button>
  <Button fullWidth variant="secondary">
    Save draft
  </Button>
</Column>

Composition

render gives the column its element, such as render={<section />} or render={<form />}, or lays out another component without a wrapper.

A Surface with render={<Column gap={4} />} has the Surface's fill, inset and corners and the Column's layout.
Nest columns with different gaps for sections and their contents, a larger gap between them and a smaller one inside.

<Surface background="default" padding={5} render={<Column render={<section />} gap={4} />}>
  …
</Surface>

Accessibility

You provide

A heading and a name for a column that is a region, such as aria-labelledby on a section.

envUI provides

A div with no role of its own, or the element in render.
A visual order that follows the document order.

Props

Lays its direct children out one under another, `gap` apart, such as a form's fields. A flex column that sizes to its content and never paints.

Prop	Type	Description
`gap`	`0123456789`	The space between the direct children, a step of the spacing scale. None by default.
`align`Default `'stretch'`	`'start''center''end''stretch'`	How the children line up across the line: stretch, the default, makes each as wide as a column or as tall as a row, except controls such as buttons, which keep their own size; start, center and end keep every child at its own size.
`justify`Default `'start'`	`'start''center''end''between'`	Where the children sit along the line when there is room to spare: at the start, in the center, at the end, such as a form's actions, or between, spread out to the edges.
`render`	`ReactElement`	The element to render, for its meaning, such as render={<section />} or render={<ul />}, or another component to lay out without a wrapper, such as a Surface: the primitive's attributes merge into its props. It must forward native props and refs. A div by default.
`ref`	`Ref<RenderedElement>`	The rendered element, a div by default. Its type is the element type parameter, which a ref passed in sets: a ref to the element that render makes, such as useRef<HTMLElement>(null) with render={<section />}, type-checks.
`name`	`string`	A name for this node, such as "filters" or "summary", which dev mode and the docs show; it renders as `data-env-name`. A component's part class names its node instead.
`container`	`string`	Makes the element a size container of this name, for container queries on its inline size, such as container="filters" for `@container filters (width >= 37.5rem)`. A container is as wide as its context gives it, never as its content. container="env-window" makes the element a window of its own on purpose, such as a preview frame, whose content lays out at its window class; other `env-*` names are envUI's own.
`padding`	`0123456789`	The inset on every side, a step of the spacing scale. None by default.

Also accepts the native props of <div>, such as ref, className and aria-* attributes.

Changelog

1.0.0: Column, Row, Grid and Box replace Stack: a Stack is a Column, or a Row with direction="row". A Column has no gap of its own, where Stack's default was gap={4}.