Container

Usage

Container

Simplest container usage:

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

Best Practices

• Prefer one TxContainer per page section. Repeated nested containers make width and padding hard to reason about.
• Use responsive xs / sm / md / lg / xl spans for layout changes instead of hiding duplicate markup per breakpoint.
• Keep gutter values aligned with the page spacing scale; avoid mixing large gutters with tiny column padding inside the same row.
• Use semantic elements inside the layout primitives (main, aside, nav, section) because the primitives render neutral div wrappers.
• Set wrap=false only for horizontally scrolling or fixed-width toolbars; normal content grids should wrap.

API Reference

Props

Row Props

Col Props

Slots

Events

TxContainer, TxRow, and TxCol do not emit events.

Container Types

Fluid Containers

Fill the full parent width:

<template>
  <TxContainer fluid>
    <p>Fluid container, width 100%</p>
  </TxContainer>
</template>

Fixed-width Containers

Set max width by breakpoints:

<template>
  <TxContainer max-width="1200px">
    <p>Container with max width 1200px</p>
  </TxContainer>
</template>

Responsive Containers

Different max widths across breakpoints:

<template>
  <TxContainer responsive>
    <p>Responsive container</p>
  </TxContainer>
</template>

Container Spacing

Padding

<template>
  <div class="padding-demo">
    <TxContainer padding="small">Small padding container</TxContainer>
    <TxContainer padding="medium">Medium padding container</TxContainer>
    <TxContainer padding="large">Large padding container</TxContainer>
    <TxContainer :padding="32">Custom padding container</TxContainer>
  </div>
</template>

Margin

<template>
  <TxContainer margin="auto">
    <p>Centered container</p>
  </TxContainer>
</template>

Grid System

Basic Grid

<template>
  <TxContainer>
    <TxRow>
      <TxCol :span="12">
        <div class="col-content">Left content</div>
      </TxCol>
      <TxCol :span="12">
        <div class="col-content">Right content</div>
      </TxCol>
    </TxRow>
  </TxContainer>
</template>

<style scoped>
.col-content {
  background: var(--tx-bg-color-overlay, #fff);
  padding: 16px;
  text-align: center;
  border-radius: 8px;
}
</style>

Responsive Grid

<template>
  <TxContainer>
    <TxRow :gutter="{ xs: 8, sm: 16, md: 24, lg: 32 }">
      <TxCol :xs="24" :sm="12" :md="8" :lg="6">
        <div class="col-content">ResponsiveColumn 1</div>
      </TxCol>
      <TxCol :xs="24" :sm="12" :md="8" :lg="6">
        <div class="col-content">ResponsiveColumn 2</div>
      </TxCol>
      <TxCol :xs="24" :sm="12" :md="8" :lg="6">
        <div class="col-content">ResponsiveColumn 3</div>
      </TxCol>
      <TxCol :xs="24" :sm="12" :md="8" :lg="6">
        <div class="col-content">Responsive column 4</div>
      </TxCol>
    </TxRow>
  </TxContainer>
</template>

Responsive Breakpoints

TouchX UI uses the following breakpoints:

/* Extra small screens */
@media (max-width: 639px) { /* xs */ }

/* Small screens */
@media (min-width: 640px) { /* sm */ }

/* Medium screens */
@media (min-width: 768px) { /* md */ }

/* Large screens */
@media (min-width: 1024px) { /* lg */ }

/* XL screens */
@media (min-width: 1280px) { /* xl */ }

Overview

• TxContainer always renders a block-level wrapper with width: 100%; fluid removes the max-width cap.
• padding presets map to 12 / 16 / 24 px and numeric padding is clamped at zero.
• margin="auto" centers the container; string or numeric margins are applied horizontally as 0 <value>.
• TxRow computes one gutter per active breakpoint and exposes it as --tx-row-gutter; columns split that gutter into left/right padding.
• The row cancels that padding at both outer edges with negative margins, and its width is calc(100% + var(--tx-row-gutter)) to pay for them. A plain 100% resolves against the containing block's content width, so the negative margins shifted the row left without widening it and it finished a full gutter short on the right — inside a padded TxContainer that showed up as 16px of inset on the left against 24px on the right at an 8px gutter.
• TxCol clamps span and offset to the 0–24 grid, falling back to span when a breakpoint-specific prop is not provided.

Technologies

• Reviewed against packages/tuffex/packages/components/src/container/src/TxContainer.vue, TxRow.vue, TxCol.vue, and container.test.ts.
• Existing tests cover container CSS variables, padding clamp, fluid/responsive classes, custom margin, row gutter/alignment/justification/wrap styles, responsive gutter selection, and column span/offset/responsive styles.
• Accessibility note: all three primitives render neutral div elements; add semantic landmarks and headings in the slotted content instead of expecting the layout primitive to supply document structure.
• Component source: packages/tuffex/packages/components/src/container/src/TxContainer.vue, TxRow.vue, and TxCol.vue.
• Verified coverage: packages/tuffex/packages/components/src/container/__tests__/container.test.ts verifies spacing variables, clamping, responsive classes, row flex styles, responsive gutter, and column sizing.
  查看源码

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

Customization

CSS Variables

.custom-container {
  --tx-container-max-width: 1200px;
  --tx-container-padding: 16px;
  --tx-row-gutter: 16px;
}