Container 容器

容器组件是页面布局的基础，提供了灵活的布局选项和响应式设计支持。TouchX UI 的容器组件帮助您快速构建结构化的页面布局。

基础用法

Container

示例即将加载...

<template>
  <div style="width: 600px; border: 1px solid var(--tx-border-color); border-radius: 12px; overflow: hidden;">
    <TxContainer :padding="16">
      <TxRow :gutter="16">
        <TxCol :span="12">
          <div style="padding: 12px; border-radius: 10px; background: var(--tx-fill-color-light, #f5f7fa);">
            Left
          </div>
        </TxCol>
        <TxCol :span="12">
          <div style="padding: 12px; border-radius: 10px; background: var(--tx-fill-color-light, #f5f7fa);">
            Right
          </div>
        </TxCol>
      </TxRow>
    </TxContainer>
  </div>
</template>

最简单的容器用法：

<template>
  <TxContainer>
    <p>这是容器内的内容</p>
  </TxContainer>
</template>

容器类型

流体容器

占满整个父容器的宽度：

<template>
  <TxContainer fluid>
    <p>流体容器，宽度100%</p>
  </TxContainer>
</template>

固定宽度容器

根据断点设置最大宽度：

<template>
  <TxContainer max-width="1200px">
    <p>最大宽度1200px的容器</p>
  </TxContainer>
</template>

响应式容器

在不同断点下有不同的最大宽度：

<template>
  <TxContainer responsive>
    <p>响应式容器</p>
  </TxContainer>
</template>

容器间距

内边距

<template>
  <div class="padding-demo">
    <TxContainer padding="small">小间距容器</TxContainer>
    <TxContainer padding="medium">中等间距容器</TxContainer>
    <TxContainer padding="large">大间距容器</TxContainer>
    <TxContainer :padding="32">自定义间距容器</TxContainer>
  </div>
</template>

外边距

<template>
  <TxContainer margin="auto">
    <p>水平居中的容器</p>
  </TxContainer>
</template>

栅格系统

基础栅格

<template>
  <TxContainer>
    <TxRow>
      <TxCol :span="12">
        <div class="col-content">左侧内容</div>
      </TxCol>
      <TxCol :span="12">
        <div class="col-content">右侧内容</div>
      </TxCol>
    </TxRow>
  </TxContainer>
</template>

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

栅格间距

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

响应式栅格

<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">响应式列1</div>
      </TxCol>
      <TxCol :xs="24" :sm="12" :md="8" :lg="6">
        <div class="col-content">响应式列2</div>
      </TxCol>
      <TxCol :xs="24" :sm="12" :md="8" :lg="6">
        <div class="col-content">响应式列3</div>
      </TxCol>
      <TxCol :xs="24" :sm="12" :md="8" :lg="6">
        <div class="col-content">响应式列4</div>
      </TxCol>
    </TxRow>
  </TxContainer>
</template>

布局组合

页面布局

<template>
  <div class="page-layout">
    <!-- 页头 -->
    <TxContainer class="header" fluid>
      <TxRow align="middle" justify="space-between">
        <TxCol>
          <div class="logo">Logo</div>
        </TxCol>
        <TxCol>
          <nav class="nav">导航菜单</nav>
        </TxCol>
      </TxRow>
    </TxContainer>
    
    <!-- 主要内容 -->
    <TxContainer class="main-content">
      <TxRow :gutter="32">
        <TxCol :span="18">
          <main>主要内容区域</main>
        </TxCol>
        <TxCol :span="6">
          <aside>侧边栏</aside>
        </TxCol>
      </TxRow>
    </TxContainer>
    
    <!-- 页脚 -->
    <TxContainer class="footer" fluid>
      <footer>页脚内容</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>

卡片布局

<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 参考

Container Props

属性	类型	默认值	说明
fluid	`boolean`	`false`	移除最大宽度限制，填满父容器
maxWidth	`string`	`'1200px'`	非流体模式下的最大宽度
responsive	`boolean`	`false`	是否启用内置响应式容器宽度
padding	`'small' \| 'medium' \| 'large' \| number`	`'medium'`	水平内边距预设或像素值
margin	`'auto' \| string \| number`	`'auto'`	水平外边距；`auto` 表示居中

Row Props

属性	类型	默认值	说明
gutter	`number \| Partial<Record<'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl', number>>`	`0`	栅格间距，可按断点设置
align	`'top' \| 'middle' \| 'bottom' \| 'stretch'`	`'stretch'`	垂直对齐方式
justify	`'start' \| 'end' \| 'center' \| 'space-around' \| 'space-between' \| 'space-evenly'`	`'start'`	水平分布方式
wrap	`boolean`	`true`	是否换行

Col Props

属性	类型	默认值	说明
span	`number`	`24`	栅格占据的列数
offset	`number`	`0`	栅格左侧的间隔格数
xs	`number`	-	640px 以下使用的列数
sm	`number`	-	640px 到 767px 使用的列数
md	`number`	-	768px 到 1023px 使用的列数
lg	`number`	-	1024px 到 1279px 使用的列数
xl	`number`	-	1280px 及以上使用的列数

响应式断点

TouchX UI 使用以下断点：

/* 超小屏幕 */
@media (max-width: 639px) { /* xs */ }

/* 小屏幕 */
@media (min-width: 640px) { /* sm */ }

/* 中等屏幕 */
@media (min-width: 768px) { /* md */ }

/* 大屏幕 */
@media (min-width: 1024px) { /* lg */ }

/* 超大屏幕 */
@media (min-width: 1280px) { /* xl */ }

样式定制

CSS 变量

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

最佳实践

使用建议

响应式优先：优先使用响应式栅格系统
语义化布局：使用语义化的HTML标签
合理间距：保持一致的间距规范
性能考虑：避免过度嵌套容器

常见布局模式

<template>
  <!-- 居中布局 -->
  <TxContainer max-width="800px" margin="auto">
    <div class="content">居中内容</div>
  </TxContainer>
  
  <!-- 两栏布局 -->
  <TxContainer>
    <TxRow :gutter="32">
      <TxCol :span="16">主内容</TxCol>
      <TxCol :span="8">侧边栏</TxCol>
    </TxRow>
  </TxContainer>
  
  <!-- 三栏布局 -->
  <TxContainer>
    <TxRow :gutter="24">
      <TxCol :span="6">左侧栏</TxCol>
      <TxCol :span="12">主内容</TxCol>
      <TxCol :span="6">右侧栏</TxCol>
    </TxRow>
  </TxContainer>
</template>

TouchX UI 的容器组件提供了灵活强大的布局能力，帮助您快速构建响应式的页面结构。