TechUI Docs

简中

EN

简中

EN

主题

栅格布局 ​

TechUI 提供了一套基于 24 列 的响应式栅格系统。 通过行 (TuiRow) 和列 (TuiCol) 的组合，您可以快速构建出整齐、灵活的页面布局。

基础用法 ​

栅格系统将容器宽度均分为 24 份。 通过设置 TuiCol 的 span 属性（1-24），可以控制该列占据的宽度比例。

html
<template>
  <div class="demo-layout">
    <TuiRow>
      <TuiCol :span="24"><div class="content">col-24</div></TuiCol>
    </TuiRow>
    
    <TuiRow>
      <TuiCol :span="12"><div class="content">col-12</div></TuiCol>
      <TuiCol :span="12"><div class="content light">col-12</div></TuiCol>
    </TuiRow>
    
    <TuiRow>
      <TuiCol :span="8"><div class="content">col-8</div></TuiCol>
      <TuiCol :span="8"><div class="content light">col-8</div></TuiCol>
      <TuiCol :span="8"><div class="content">col-8</div></TuiCol>
    </TuiRow>
  </div>
</template>

<style scoped>
.content { min-height: 36px; background: rgba(0,146,255,0.2); text-align: center; line-height: 36px; border-radius: 4px; color: #fff; }
.light { background: rgba(0,146,255,0.1); }
.tui-row { margin-bottom: 20px; }
</style>

分栏间隔 ​

通过在 TuiRow 上设置 gutter 属性，可以给下属的列之间添加水平间距。 单位为像素 (px)。

html
<template>
  <TuiRow :gutter="20">
    <TuiCol :span="6"><div class="content">col-6</div></TuiCol>
    <TuiCol :span="6"><div class="content">col-6</div></TuiCol>
    <TuiCol :span="6"><div class="content">col-6</div></TuiCol>
    <TuiCol :span="6"><div class="content">col-6</div></TuiCol>
  </TuiRow>
</template>

混合布局 ​

您可以在一行内自由组合不同宽度的列，只要 span 总和为 24 即可。

html
<template>
  <TuiRow :gutter="20">
    <TuiCol :span="16"><div class="content">col-16</div></TuiCol>
    <TuiCol :span="8"><div class="content">col-8</div></TuiCol>
  </TuiRow>
  
  <TuiRow :gutter="20">
    <TuiCol :span="8"><div class="content">col-8</div></TuiCol>
    <TuiCol :span="8"><div class="content">col-8</div></TuiCol>
    <TuiCol :span="4"><div class="content">col-4</div></TuiCol>
    <TuiCol :span="4"><div class="content">col-4</div></TuiCol>
  </TuiRow>
</template>

列偏移 ​

通过设置 offset 属性，可以指定列向右偏移的栅格数。这通常用于创建留白或特殊的对齐效果。

html
<template>
  <TuiRow :gutter="20">
    <TuiCol :span="6"><div class="content">col-6</div></TuiCol>
    <TuiCol :span="6" :offset="6"><div class="content">col-6 offset-6</div></TuiCol>
  </TuiRow>

  <TuiRow :gutter="20">
    <TuiCol :span="6" :offset="6"><div class="content">col-6 offset-6</div></TuiCol>
    <TuiCol :span="6" :offset="6"><div class="content">col-6 offset-6</div></TuiCol>
  </TuiRow>
  
  <TuiRow :gutter="20">
    <TuiCol :span="12" :offset="6"><div class="content">Centered</div></TuiCol>
  </TuiRow>
</template>

对齐方式 ​

TuiRow 基于 Flexbox 布局，支持灵活的水平和垂直对齐控制。

  • justify (水平排列): start, center, end, space-between, space-around, space-evenly
  • align (垂直排列): top, middle, bottom
html
<template>
  <TuiRow justify="center">
    <TuiCol :span="6"><div class="content">col-6</div></TuiCol>
    <TuiCol :span="6"><div class="content">col-6</div></TuiCol>
  </TuiRow>

  <TuiRow justify="space-between">
    <TuiCol :span="6"><div class="content">col-6</div></TuiCol>
    <TuiCol :span="6"><div class="content">col-6</div></TuiCol>
  </TuiRow>

  <TuiRow justify="space-evenly">
    <TuiCol :span="6"><div class="content">col-6</div></TuiCol>
    <TuiCol :span="6"><div class="content">col-6</div></TuiCol>
    <TuiCol :span="6"><div class="content">col-6</div></TuiCol>
  </TuiRow>
</template>

响应式布局 ​

参照 Bootstrap 的响应式设计，预设了五个响应尺寸：xs, sm, md, lg, xl。 您可以为不同尺寸的屏幕指定不同的 span 宽度。

提示

TechUI 的 Row/Col 响应式是基于浏览器 Viewport 的。 如果您开启了全局大屏适配器 (TuiAdaptive)，页面的物理像素可能会被锁定，导致响应式效果不明显。如需测试响应式布局，建议暂时关闭适配器或在非适配区域使用。

html
<template>
  <TuiRow :gutter="10">
    <TuiCol :xs="8" :sm="6" :md="4" :lg="3" :xl="1">
      <div class="content">Col</div>
    </TuiCol>
    <TuiCol :xs="4" :sm="6" :md="8" :lg="9" :xl="11">
      <div class="content">Col</div>
    </TuiCol>
    <TuiCol :xs="4" :sm="6" :md="8" :lg="9" :xl="11">
      <div class="content">Col</div>
    </TuiCol>
    <TuiCol :xs="8" :sm="6" :md="4" :lg="3" :xl="1">
      <div class="content">Col</div>
    </TuiCol>
  </TuiRow>
</template>
尺寸屏幕宽度说明
xs< 768px超小屏幕 (手机)
sm≥ 768px小屏幕 (平板)
md≥ 992px中等屏幕 (桌面显示器)
lg≥ 1200px大屏幕 (大桌面显示器)
xl≥ 1920px超大屏幕 (4K/宽屏)

API 参考 ​

Row Props ​

属性名类型默认值说明
gutterNumber0栅格间隔 (px)。
justifyString'start'水平排列方式。可选：start, end, center, space-around, space-between, space-evenly。
alignString'top'垂直对齐方式。可选：top, middle, bottom。
tagString'div'自定义渲染的 HTML 标签。

Col Props ​

属性名类型默认值说明
spanNumber24栅格占据的列数 (0-24)。
offsetNumber0栅格左侧的间隔格数。
pushNumber0向右移动的格数。
pullNumber0向左移动的格数。
tagString'div'自定义渲染的 HTML 标签。
xsNumber/Object-<768px 响应式配置 (可设为数值或包含 span/offset 的对象)。
smNumber/Object-≥768px 响应式配置。
mdNumber/Object-≥992px 响应式配置。
lgNumber/Object-≥1200px 响应式配置。
xlNumber/Object-≥1920px 响应式配置。