Skip to content

col 布局规则

TIP

所有组件均支持布局配置规则,详细说明可参考

tdesign 栅格布局 Col props

配置规则

可通过 col 配置项设置布局规则

Row Props

名称类型默认值说明必传
alignStringtop纵向对齐方式。可选项:top/middle/bottomN
gutterNumber / Object / Array0栅格间隔,示例:{ xs: 8, sm: 16, md: 24}。当数据类型为 Number 和 Object 时,用于指定横向间隔。当数据类型为数组时,第一个参数为横向间隔,第二个参数为纵向间隔, [水平间隔, 垂直间隔]。TS 类型:number | GutterObject | Array<GutterObject | number>详细类型定义N
justifyStringstartflex 布局下的水平排列方式。可选项:start/end/center/space-around/space-betweenN
tagStringdiv自定义元素标签N

Col Props

名称类型默认值说明必传
flexString / Number-flex 布局填充。CSS 属性 flex 值。示例:2 / 3 / '100px' / 'auto' / '1 1 200px'N
lgNumber / Object-≥1200px 响应式栅格,可为栅格数或一个包含其他属性的对象(小尺寸电脑)。TS 类型:number | BaseColPropsN
mdNumber / Object-≥992px 响应式栅格,可为栅格数或一个包含其他属性的对象(超小尺寸电脑)。TS 类型:number | BaseColPropsN
offsetNumber0栅格左侧的间隔格数,间隔内不可以有栅格N
orderNumber0栅格顺序,flex 布局模式下有效N
pullNumber0栅格向左移动格数N
pushNumber0栅格向左移动格数N
smNumber / Object-≥768px 响应式栅格,可为栅格数或一个包含其他属性的对象(平板)。TS 类型:number | BaseColPropsN
spanNumber12栅格占位格数,为 0 时相当于 display: noneN
tagStringdiv自定义元素标签N
xlNumber / Object-≥1400px 响应式栅格,可为栅格数或一个包含其他属性的对象(中尺寸电脑)。TS 类型:number | BaseColPropsN
xsNumber / Object-<768px 响应式栅格,可为栅格数或一个包含其他属性的对象(手机)。TS 类型:number | BaseColProps详细类型定义N
xxlNumber / Object-≥1880px 响应式栅格,可为栅格数或一个包含其他属性的对象(大尺寸电脑)。TS 类型:number | BaseColPropsN

Released under the MIT License.