Container

Layout container with flexible options and responsive support

Basic Usage

Container

Demo loads on client.

Simplest container usage:

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

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-color-surface);
  padding: 16px;
  text-align: center;
  border-radius: 8px;
}
</style>

Grid Gutter

<template>
  <TxContainer>
    <TxRow :gutter="24">
      <TxCol :span="8">
        <div class="col-content">Column 1</div>
      </TxCol>
      <TxCol :span="8">
        <div class="col-content">Column 2</div>
      </TxCol>
      <TxCol :span="8">
        <div class="col-content">Column 3</div>
      </TxCol>
    </TxRow>
  </TxContainer>
</template>

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>

Layout Combinations

Page Layout

<template>
  <div class="page-layout">
    <!-- Header -->
    <TxContainer class="header" fluid>
      <TxRow align="middle" justify="space-between">
        <TxCol>
          <div class="logo">Logo</div>
        </TxCol>
        <TxCol>
          <nav class="nav">Navigation menu</nav>
        </TxCol>
      </TxRow>
    </TxContainer>
    
    <!-- Main content -->
    <TxContainer class="main-content">
      <TxRow :gutter="32">
        <TxCol :span="18">
          <main>Main content area</main>
        </TxCol>
        <TxCol :span="6">
          <aside>Sidebar</aside>
        </TxCol>
      </TxRow>
    </TxContainer>
    
    <!-- Footer -->
    <TxContainer class="footer" fluid>
      <footer>Footer content</footer>
    </TxContainer>
  </div>
</template>

<style scoped>
.header {
  background: var(--tx-color-surface);
  padding: 16px 0;
  border-bottom: 1px solid var(--tx-color-border);
}

.main-content {
  min-height: 500px;
  padding: 32px 0;
}

.footer {
  background: var(--tx-color-surface);
  padding: 24px 0;
  border-top: 1px solid var(--tx-color-border);
  text-align: center;
}
</style>

Card Layout

<template>
  <TxContainer>
    <TxRow :gutter="24">
      <TxCol :xs="24" :sm="12" :lg="8" v-for="item in items" :key="item.id">
        <TxCard>
          <h3>{{ item.title }}</h3>
          <p>{{ item.description }}</p>
        </TxCard>
      </TxCol>
    </TxRow>
  </TxContainer>
</template>

API Reference

Container Props

Prop	Type	Default	Description
fluid	`boolean`	`false`	Description for fluid.
maxWidth	`string \| number`	-	Description for maxWidth.
responsive	`boolean`	`false`	Description for responsive.
padding	`'small' \| 'medium' \| 'large' \| number`	`'medium'`	Description for padding.
margin	`'auto' \| string \| number`	-	Description for margin.

Row Props

Prop	Type	Default	Description
gutter	`number \| object`	`0`	TextGap
align	`'top' \| 'middle' \| 'bottom'`	`'top'`	Description for align.
justify	`'start' \| 'end' \| 'center' \| 'space-around' \| 'space-between'`	`'start'`	Description for justify.
wrap	`boolean`	`true`	Description for wrap.

Col Props

Prop	Type	Default	Description
span	`number`	`24`	Description for span.
offset	`number`	`0`	Description for offset.
push	`number`	`0`	Description for push.
pull	`number`	`0`	Description for pull.
xs	`number \| object`	-	Text (<576px)
sm	`number \| object`	-	Text (≥576px)
md	`number \| object`	-	Text (≥768px)
lg	`number \| object`	-	Text (≥992px)
xl	`number \| object`	-	Text (≥1200px)
xxl	`number \| object`	-	Text (≥1600px)

Responsive Breakpoints

TouchX UI uses the following breakpoints:

/* textSmall screens */
@media (max-width: 575px) { /* xs */ }

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

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

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

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

/* XXL screens */
@media (min-width: 1600px) { /* xxl */ }

Style Customization

CSS Variables

.custom-container {
  --tx-container-max-width-sm: 540px;
  --tx-container-max-width-md: 720px;
  --tx-container-max-width-lg: 960px;
  --tx-container-max-width-xl: 1140px;
  --tx-container-max-width-xxl: 1320px;
  
  --tx-container-padding-small: 12px;
  --tx-container-padding-medium: 24px;
  --tx-container-padding-large: 48px;
}

Best Practices

Usage Tips

Responsive first: prefer the responsive grid system
Semantic layout: use semantic HTML tags
Consistent spacing: keep spacing rules consistent
Performance: avoid excessive container nesting

Common Layout Patterns

<template>
  <!-- TextLayout -->
  <TxContainer max-width="800px" margin="auto">
    <div class="content">TextContent</div>
  </TxContainer>
  
  <!-- TextLayout -->
  <TxContainer>
    <TxRow :gutter="32">
      <TxCol :span="16">TextContent</TxCol>
      <TxCol :span="8">Sidebar</TxCol>
    </TxRow>
  </TxContainer>
  
  <!-- TextLayout -->
  <TxContainer>
    <TxRow :gutter="24">
      <TxCol :span="6">Text</TxCol>
      <TxCol :span="12">TextContent</TxCol>
      <TxCol :span="6">Text</TxCol>
    </TxRow>
  </TxContainer>
</template>

TouchX UI containers provide flexible layouts to quickly build responsive page structures.