Container | Tuff Docs

Usage

<template>
  <TxContainer>
    <p>Content inside the container</p>
  </TxContainer>
</template>

Basic

TxContainer owns the max width and side padding; TxRow / TxCol change column spans by breakpoint.

Loading demo...

Width

fluid fills the parent, maxWidth caps the width, and responsive switches the cap by breakpoint.

<template>
  <TxContainer fluid>Fluid container, 100% wide</TxContainer>
  <TxContainer max-width="1200px">Max width 1200px</TxContainer>
  <TxContainer responsive>Responsive container</TxContainer>
</template>

Spacing

<template>
  <TxContainer padding="small">Small padding</TxContainer>
  <TxContainer padding="large">Large padding</TxContainer>
  <TxContainer :padding="32">Custom padding</TxContainer>
  <TxContainer margin="auto">Horizontally centered</TxContainer>
</template>

Grid

<template>
  <TxRow>
    <TxCol :span="12">Left content</TxCol>
    <TxCol :span="12">Right content</TxCol>
  </TxRow>

  <TxRow :gutter="{ xs: 8, sm: 16, md: 24, lg: 32 }">
    <TxCol v-for="n in 4" :key="n" :xs="24" :sm="12" :md="8" :lg="6">
      Responsive column {{ n }}
    </TxCol>
  </TxRow>
</template>

Best Practices

Use one TxContainer per page section; nested containers make width and padding hard to reason about.
Change layouts with xs–xl instead of duplicating markup per breakpoint.
Match gutter to the page spacing scale; don't mix large gutters with tiny column padding in one row.
All three components render neutral divs; put semantic elements (main, aside, nav, section) inside them.
Set wrap=false only for horizontally scrolling or fixed-width toolbars.

API Reference

TxContainer

Props

Prop	Type	Default	Description
fluid	`boolean`	`false`	Removes the max width and fills the parent.
maxWidth	`string`	`'1200px'`	Maximum width.
responsive	`boolean`	`false`	Switches the max width by breakpoint: 640 / 768 / 1024 / 1280px.
padding	`'small' \| 'medium' \| 'large' \| number`	`'medium'`	Side padding: presets of 12 / 16 / 24px, or pixels clamped at 0.
margin	`'auto' \| string \| number`	`'auto'`	Side margin; `auto` centers, other values apply as `0 <value>`.

Slots

Slot	Props	Description
`default`	-	Content constrained by the max width and padding.

TxRow

Props

Prop	Type	Default	Description
gutter	`number \| Partial<Record<'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl', number>>`	`0`	Column spacing in px, optionally per breakpoint.
align	`'top' \| 'middle' \| 'bottom' \| 'stretch'`	`'stretch'`	Vertical alignment of the columns.
justify	`'start' \| 'end' \| 'center' \| 'space-around' \| 'space-between' \| 'space-evenly'`	`'start'`	Horizontal distribution of the columns.
wrap	`boolean`	`true`	Allows wrapping.

Slots

Slot	Props	Description
`default`	-	`TxCol` children or other flex items.

TxCol

Props

Prop	Type	Default	Description
span	`number`	`24`	Columns spanned, out of 24.
offset	`number`	`0`	Columns of offset on the left.
xs	`number`	-	Span at the xs breakpoint (< 640px).
sm	`number`	-	Span at the sm breakpoint (≥ 640px).
md	`number`	-	Span at the md breakpoint (≥ 768px).
lg	`number`	-	Span at the lg breakpoint (≥ 1024px).
xl	`number`	-	Span at the xl breakpoint (≥ 1280px).

Slots

Slot	Props	Description
`default`	-	Column content.

Overview

Breakpoint values carry upward: an unset breakpoint takes the nearest smaller one's value; with none set, TxCol uses span and TxRow uses 0.
TxRow writes the active gutter to --tx-row-gutter; each column takes half as left and right padding, and the row cancels the outer halves with negative margins.
span and offset are clamped to 0–24.

Technologies

Breakpoints follow window.innerWidth and update on resize, regardless of the container's own width.
The row is calc(100% + var(--tx-row-gutter)) wide so that, with its negative margins, the outer columns line up with the container padding.
Source: packages/tuffex/packages/components/src/container/.

查看源码

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

Customization

Variable	Written by	Purpose
`--tx-container-max-width`	`maxWidth` / `fluid`	Maximum width.
`--tx-container-padding`	`padding`	Side padding.
`--tx-row-gutter`	`gutter`	Column spacing.

Props write all three as inline styles on the root; adjust them through the props.