Stack | Tuff Docs

Usage

Basic

Loading demo...

Horizontal Actions

direction="horizontal" lays children out in a row; wrap lets them wrap in a narrow container.

<template>
  <TxStack direction="horizontal" align="center" justify="flex-end" :gap="8" wrap>
    <TxButton variant="ghost">Cancel</TxButton>
    <TxButton variant="primary">Save</TxButton>
  </TxStack>
</template>

Inline Stack

inline uses inline-flex, so the stack can sit inside a line of text.

<template>
  <span>
    Status:
    <TxStack inline direction="horizontal" align="center" gap="0.5rem">
      <TxBadge value="Live" variant="success" />
      <TxTag label="Beta" size="sm" />
    </TxStack>
  </span>
</template>

Best Practices

Use TxStack to set the rhythm between siblings, not for arbitrary page layout.
Use vertical for forms and settings panels, horizontal for action rows and compact metadata.
Space children with gap, not empty spacer elements.
Use TxFlex when you need native directions such as row-reverse or column-reverse.
The stack adds no semantic role; keep list, form, and navigation semantics on the children or the surrounding element.

API Reference

Props

Prop	Type	Default	Description
`direction`	`'horizontal' \| 'vertical'`	`'vertical'`	Main-axis direction.
`gap`	`number \| string`	`12`	Gap between children; numbers are px, strings pass through.
`align`	`string`	`'stretch'`	`align-items`; accepts any valid value, such as `safe center`.
`justify`	`string`	`'flex-start'`	`justify-content`; accepts any valid value.
`wrap`	`boolean`	`false`	Allows wrapping.
`inline`	`boolean`	`false`	Uses `inline-flex`.

Slots

Slot	Props	Description
`default`	-	Stacked children.

CSS Variables

Variable	Source	Description
`--tx-stack-gap`	`gap`	CSS gap.
`--tx-stack-align`	`align`	`align-items`.
`--tx-stack-justify`	`justify`	`justify-content`.
`--tx-stack-direction`	`direction`	Resolved `flex-direction`.
`--tx-stack-wrap`	`wrap`	Resolved `flex-wrap`.
`--tx-stack-display`	`inline`	`flex` or `inline-flex`.

Overview

The root is a div with min-width: 0, so children can shrink inside constrained containers.
Props write the --tx-stack-* variables on the root, and the stylesheet reads them.
vertical maps to column and horizontal to row; empty align or justify values fall back to the defaults.

Technologies

Source: packages/tuffex/packages/components/src/stack/.

查看源码

packages/tuffex/packages/components/src/stack/index.ts