Col组件
列布局基础组件
安装
npm
pnpm
yarn
npm install @jelper/component样例
基础用法
基础用法
item自适应缩放Layout 自适应
1
2
3
4
5
6
7
8
9
10
fixed 固定高度
设置高度，fixed后，不在自动缩放嵌套使用
1
2
3
4
5
1
2
3
4
5
1
2
3
4
5
嵌套使用
正常情况直接嵌套会多一层div元素，为了避免多余div,可以使用 Col.ColItem/Col.RowItem 来代替 Col.item, 这样子元素就具备Col，Row能力
API
Col API
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
| $justify | flex主轴排列方式 | 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly' | 'stretch' | flex-start | |
| $align | flex交叉轴排列方式 | 'flex-start' | 'flex-end' | 'center' | 'stretch' | stretch | |
| $gap | flex元素gap | number | string | m |
Col.Item API
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
| $fixed | item不缩放，即flex: 0 0 auto; | boolean | -- | |
| $height | item高度 | number | string; | -- | |
| $minHeight | item最小高度 | number | string; | -- | |
| $maxHeight | item最大高度 | number | string; | -- | |
| $scale | item缩放比例，即flex: x x auto; | number; | 1 |
Col.ColItem API
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
| $justify | flex主轴排列方式 | 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly' | 'stretch' | flex-start | |
| $align | flex交叉轴排列方式 | 'flex-start' | 'flex-end' | 'center' | 'stretch' | stretch | |
| $gap | flex元素gap | number | string | m | |
| $fixed | item不缩放，即flex: 0 0 auto; | boolean | -- | |
| $height | item高度 | number | string; | -- | |
| $minHeight | item最小高度 | number | string; | -- | |
| $maxHeight | item最大高度 | number | string; | -- | |
| $scale | item缩放比例，即flex: x x auto; | number; | 1 |
Col.RowItem API
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
| $justify | flex主轴排列方式 | 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly' | 'stretch' | flex-start | |
| $align | flex交叉轴排列方式 | 'flex-start' | 'flex-end' | 'center' | 'stretch' | stretch | |
| $gap | flex元素gap | number | string | m | |
| $fixed | item不缩放，即flex: 0 0 auto; | boolean | -- | |
| $height | item高度 | number | string; | -- | |
| $minHeight | item最小高度 | number | string; | -- | |
| $maxHeight | item最大高度 | number | string; | -- | |
| $scale | item缩放比例，即flex: x x auto; | number; | 1 |