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