XtfRow

组件说明

xtf-row 是 24 栅格布局的行容器，配合 xtf-col 实现列间距、水平对齐和垂直对齐。它负责行级布局，不负责列宽和响应式断点。

---

基础用法

1. 等分布局

<template>
  <xtf-row>
    <xtf-col :span="12"><xtf-card title="左列" /></xtf-col>
    <xtf-col :span="12"><xtf-card title="右列" /></xtf-col>
  </xtf-row>
</template>
<script>
export default {}
</script>

2. 列间距

<template>
  <xtf-row :gutter="20">
    <xtf-col :span="8" v-for="item in 3" :key="item">
      <xtf-tag :label="'第 ' + item + ' 列'"
    /></xtf-col>
  </xtf-row>
</template>
<script>
export default {}
</script>

3. 对齐方式

<template>
  <xtf-row justify="space-between" align="middle">
    <xtf-col :span="6"><view class="short">短列</view></xtf-col>
    <xtf-col :span="6"><view class="tall">高列</view></xtf-col></xtf-row>

</template>
<script>
export default {}
</script>
<style>
.short {
  padding: 16rpx;
  background: #e0f2fe;
}
.tall {
  padding: 50rpx 16rpx;
  background: #dcfce7;
}
</style>

---

全部属性

属性	类型	默认值	作用描述	适用范围
type	String	''	保留的行类型属性，当前不参与渲染	保持 API 兼容时
gutter	String | Number	0	列间距，数值自动补 rpx	配合 xtf-col 使用
justify	String	'start'	start/end/center/space-around/space-between 水平对齐	列未占满整行时
align	String	'top'	top/middle/bottom 垂直对齐	列高度不一致时
width	String | Number	750	保留的设计宽度属性，当前不参与渲染	无需设置
customClass	String	''	根节点类名	局部定制
customStyle	String | Object	''	根节点样式	局部定制

---

事件

组件源码未定义 emits，xtf-row 仅作为布局容器。子组件事件应直接在子组件上监听。

---

主题说明

• 组件本身不使用 CSS 颜色变量，仅提供弹性栅格结构。
• 间距由 gutter 计算为行负边距，列侧由配套 xtf-col 消化。
• 通过 customStyle 或子列内容样式定义具体视觉主题。