xtf-col

组件说明

xtf-col 是栅格列组件，需配合 xtf-row 使用。基于 24 栅格系统，支持 span、offset、push、pull 和响应式断点（xs/sm/md/lg/xl），适用于页面布局和表单排列等场景。

基础用法

1. 最简示例

通过 span 设置列宽占比（24 等分）：

vue

<template>
  <xtf-row :gutter="16">
    <xtf-col :span="12">
      <view style="background: var(--xtf-color-primary-soft); padding: 20rpx; text-align: center"
        >span=12</view>

    </xtf-col>
    <xtf-col :span="12">
      <view style="background: var(--xtf-color-success-soft); padding: 20rpx; text-align: center"
        >span=12</view>

    </xtf-col>
  </xtf-row>
</template>

2. 偏移与推拉

通过 offset 设置左侧偏移，通过 push / pull 调整位置：

vue

<template>
  <xtf-row :gutter="16">
    <xtf-col :span="8" :offset="8">
      <view style="background: var(--xtf-color-warning-soft); padding: 20rpx; text-align: center"
        >offset=8</view>

    </xtf-col>
  </xtf-row>
</template>

3. 响应式布局

通过 xs / sm / md / lg / xl 设置不同断点下的列宽：

vue

<template>
  <xtf-row :gutter="16">
    <xtf-col :xs="24" :sm="12" :md="8" :lg="6">
      <view style="background: var(--xtf-color-primary-soft); padding: 20rpx; text-align: center"
        >响应式列</view>

    </xtf-col>
    <xtf-col :xs="24" :sm="12" :md="8" :lg="6">
      <view style="background: var(--xtf-color-success-soft); padding: 20rpx; text-align: center"
        >响应式列</view>

    </xtf-col>
    <xtf-col :xs="24" :sm="12" :md="8" :lg="6">
      <view style="background: var(--xtf-color-warning-soft); padding: 20rpx; text-align: center"
        >响应式列</view>

    </xtf-col>
    <xtf-col :xs="24" :sm="12" :md="8" :lg="6">
      <view style="background: var(--xtf-color-danger-soft); padding: 20rpx; text-align: center"
        >响应式列</view>

    </xtf-col>
  </xtf-row>
</template>

全部属性

属性	类型	默认值	作用描述	适用范围
`span`	`String \| Number`	`24`	栅格占位格数（1~24）	列宽
`offset`	`String \| Number`	`-1`	左侧偏移格数	偏移
`pull`	`String \| Number`	`-1`	向左移动格数	拉动
`push`	`String \| Number`	`-1`	向右移动格数	推动
`xs`	`Number \| String \| Object`	`''`	超小屏断点配置	响应式
`sm`	`Number \| String \| Object`	`''`	小屏断点配置	响应式
`md`	`Number \| String \| Object`	`''`	中屏断点配置	响应式
`lg`	`Number \| String \| Object`	`''`	大屏断点配置	响应式
`xl`	`Number \| String \| Object`	`''`	超大屏断点配置	响应式
`customClass`	`String`	`''`	自定义类名	样式覆盖
`customStyle`	`String \| Object`	`''`	自定义样式	动态样式覆盖

事件

无自定义事件。

插槽

插槽名	说明
默认插槽	放置当前栅格列的内容。

主题说明

列间距通过 xtf-row 的 gutter 属性控制，xtf-col 自动继承 halfGutter 作为左右内边距
响应式断点：xs < 768px、sm ≥ 768px、md ≥ 992px、lg ≥ 1200px
栅格系统基于 24 等分

如需全局调整主题，请在 xtf-config-provider 或主题配置中覆盖相关 CSS 变量。

xtf-col ​

组件说明 ​

基础用法 ​

1. 最简示例 ​

2. 偏移与推拉 ​

3. 响应式布局 ​

全部属性 ​

事件 ​

插槽 ​

主题说明 ​