Row
<ts-row> vv0.4.0
The ts-row component.
Open in Storybook for interactive demos.
Preview
Section titled “Preview”<ts-row align="center" gap="2" justify="start">Content</ts-row>Properties
Section titled “Properties”| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
align | align | "baseline" | "center" | "end" | "start" | "stretch" | 'center' | Cross-axis alignment of items. |
gap | gap | string | '2' | Spacing token number controlling the gap between items. |
justify | justify | "around" | "between" | "center" | "end" | "evenly" | "start" | 'start' | Main-axis alignment of items. |
reverse | reverse | boolean | false | Reverse the row direction. |
stackAt | stack-at | "lg" | "md" | "never" | "sm" | 'never' | Breakpoint at which the row stacks vertically. |
wrap | wrap | boolean | true | Whether items should wrap to the next line. |
| Name | Description |
|---|---|
*(default)* | Default slot for row content. |
<ts-row align="center" gap="2" justify="start">Content</ts-row>import { TsRow } from '@tessera-ui/react';
<TsRow align="center" gap="2">Content</TsRow>