栅格化布局组件
收藏24 栅格布局组件。栅格化布局组件提供了响应式布局特性，帮助开发者快速适配多屏适配。
24 栅格布局指将整个屏幕宽度分为 24 个单位。基于行（row）和列（col）来定义布局，以实现支持响应式布局的元素排布。
使用方式
- 1.npm安装
npm i @open-dy/tt-miniprogram-plus
- 2.npm构建，参考npm支持
- 3.使用npm包中的组件，参考使用npm
{ "usingComponents": { "row": "ext://@open-dy/tt-miniprogram-plus/row", "col": "ext://@open-dy/tt-miniprogram-plus/col" } }
- 4.在页面中使用组件
<row> <col span={{12}}> <view>col-12</view> </col> <col span={{12}}> <view>col-12</view> </col> </row>
Row属性说明
属性名 | 类型 | 默认值 | 必填 | 说明 | 最低支持版本 |
align | 'top' | 'middle' | 'bottom' | 'top' | 否 | 垂直对齐方式 | 1.0.0 |
justify | 'start' | 'end' | 'center' | 'space-around' | 'space-between' | 'space-evenly' | 'start' | 否 | 水平排列方式 | 1.0.0 |
wrap | boolean | true | 否 | 是否自动换行 | 1.0.0 |
gutter | number | 0 | 否 | 栅格间隔 | 1.0.0 |
Col属性说明
属性名 | 类型 | 默认值 | 必填 | 说明 | 最低支持版本 |
flex | string | number | - | 否 | flex布局属性 | 1.0.0 |
offset | number(0 ~ 24) | 0 | 否 | 栅格左侧的间隔格数 | 1.0.0 |
order | number(0 ~ 24) | 0 | 否 | 栅格顺序 | 1.0.0 |
pull | number(0 ~ 24) | 0 | 否 | 栅格向左移动格数 | 1.0.0 |
push | number(0 ~ 24) | 0 | 否 | 栅格向右移动格数 | 1.0.0 |
span | number(0 ~ 24) | - | 否 | 栅格站位格数，为 0 时相当于 display: none | 1.0.0 |
xs | number | object | - | 否 | 当屏幕 < 768px 时，对应显示的网格规则。可为栅格数或一个包含其他属性的对象。 | 1.0.0 |
sm | number | object | - | 否 | 当屏幕 >= 768px, <992px，对应显示的网格规则。可为栅格数或一个包含其他属性的对象。 | 1.0.0 |
md | number | object | - | 否 | 当屏幕 >= 992px, <1200px，对应显示的网格规则。可为栅格数或一个包含其他属性的对象。 | 1.0.0 |
lg | number | object | - | 否 | 当屏幕 >= 1200px, <1920px 时，对应显示的网格规则。可为栅格数或一个包含其他属性的对象。 | 1.0.0 |
xl | number | object | - | 否 | 当屏幕 >= 1920px 时，对应显示的网格规则。可为栅格数或一个包含其他属性的对象。 | 1.0.0 |
Bug & Tip
无
