<template>
<TxStack direction="horizontal" align="center" justify="flex-end" :gap="8" wrap>
<TxButton variant="ghost">Cancel</TxButton>
<TxButton variant="primary">Save</TxButton>
</TxStack>
</template>
<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>
- Use
TxStack when the design asks for rhythm between siblings, not for arbitrary page layout. - Prefer
vertical for forms and settings panels; prefer horizontal for action rows and compact metadata. - Use
wrap for button groups that must survive narrow containers. - Keep
gap token-based or numeric; avoid using empty children as spacers. - Use
TxFlex when you need native flex directions such as row-reverse or column-reverse.
| Prop | Type | Default | Description |
|---|
direction | 'horizontal' | 'vertical' | 'vertical' | Main axis direction. |
gap | number | string | 12 | Gap between children. Numbers become px. |
align | string | 'stretch' | Cross-axis alignment; accepts any valid align-items value (stretch / center / flex-start / flex-end / baseline). Left as string rather than a union so newer values such as safe center still pass. |
justify | string | 'flex-start' | Main-axis distribution; accepts any valid justify-content value (flex-start / center / space-between / space-around / space-evenly). Use space-between for edge-anchored rows, center for a centered group. |
wrap | boolean | false | Allow children to wrap onto multiple lines. |
inline | boolean | false | Use inline-flex instead of block-level flex. |
| Event | Payload | Description |
|---|
| - | - | TxStack does not emit custom events. Child components keep their own event behavior. |
| Slot | Props | Description |
|---|
default | - | Stack children. |
| 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 wrapping mode. |
--tx-stack-display | inline | flex or inline-flex. |
- The root is a
div with display: flex by default. direction="vertical" maps to flex-direction: column; direction="horizontal" maps to row.- Numeric
gap values become px; string values are passed through unchanged. align and justify are passed to CSS variables and then used as align-items and justify-content.wrap=true maps to flex-wrap: wrap; otherwise nowrap is used.inline=true switches display from flex to inline-flex.- The root sets
min-width: 0 so children can shrink inside constrained cards.
- Reviewed against
packages/tuffex/packages/components/src/stack/src/TxStack.vue, types.ts, and stack.test.ts. - Existing tests cover default vertical variables, slot content rendering, horizontal prop mapping, wrapping, inline display, and numeric gap normalization.
- Accessibility note:
TxStack adds no semantic role. Keep list, form, and navigation semantics on the children or surrounding element. - Component source:
packages/tuffex/packages/components/src/stack/src/TxStack.vue. - Types:
packages/tuffex/packages/components/src/stack/src/types.ts exports StackProps and StackDirection. - Verified coverage:
packages/tuffex/packages/components/src/stack/__tests__/stack.test.ts covers default vertical CSS variables and slot rendering, horizontal prop mapping, wrapping, inline display, and numeric-gap normalization.查看源码packages/tuffex/packages/components/src/stack/index.ts