183 lines
7.1 KiB
Markdown
183 lines
7.1 KiB
Markdown
## Layout 布局
|
||
|
||
> **组件名 uni-row、uni-col**
|
||
> 代码块： `uRow`、`uCol`
|
||
|
||
|
||
流式栅格系统，随着屏幕或视口分为 24 份，可以迅速简便地创建布局。
|
||
|
||
### 安装方式
|
||
|
||
本组件符合[easycom](https://uniapp.dcloud.io/collocation/pages?id=easycom)规范，`HBuilderX 2.5.5`起，只需将本组件导入项目，在页面`template`中即可直接使用，无需在页面中`import`和注册`components`。
|
||
|
||
如需通过`npm`方式使用`uni-ui`组件，另见文档：[https://ext.dcloud.net.cn/plugin?id=55](https://ext.dcloud.net.cn/plugin?id=55)
|
||
|
||
> **注意事项**
|
||
> 为了避免错误使用，给大家带来不好的开发体验，请在使用组件前仔细阅读下面的注意事项，可以帮你避免一些错误。
|
||
> - 组件需要依赖 `sass` 插件 ，请自行手动安装
|
||
> - 如使用过程中有任何问题，或者您对 uni-ui 有一些好的建议，欢迎加入 uni-ui 交流群：871950839
|
||
>
|
||
|
||
|
||
### 基本用法
|
||
|
||
###### 使用单一分栏创建基础的栅格布局
|
||
|
||
```html
|
||
<uni-row class="demo-uni-row">
|
||
<uni-col>
|
||
<view class="demo-uni-col dark_deep"></view>
|
||
</uni-col>
|
||
</uni-row>
|
||
|
||
<uni-row class="demo-uni-row">
|
||
<uni-col :span="12">
|
||
<view class="demo-uni-col dark"></view>
|
||
</uni-col>
|
||
<uni-col :span="12">
|
||
<view class="demo-uni-col light"></view>
|
||
</uni-col>
|
||
</uni-row>
|
||
```
|
||
|
||
### 分栏偏移
|
||
|
||
###### 支持偏移指定的栏数
|
||
|
||
```html
|
||
<uni-row class="demo-uni-row">
|
||
<uni-col :span="8">
|
||
<view class="demo-uni-col dark"></view>
|
||
</uni-col>
|
||
<uni-col :span="8" :offset="6">
|
||
<view class="demo-uni-col dark"></view>
|
||
</uni-col>
|
||
</uni-row>
|
||
|
||
<uni-row class="demo-uni-row">
|
||
<uni-col :span="12" :pull="6">
|
||
<view class="demo-uni-col dark"></view>
|
||
</uni-col>
|
||
</uni-row>
|
||
|
||
<uni-row class="demo-uni-row">
|
||
<uni-col :span="12" :push="6">
|
||
<view class="demo-uni-col dark"></view>
|
||
</uni-col>
|
||
</uni-row>
|
||
```
|
||
|
||
### 响应式布局
|
||
|
||
###### 共五个响应尺寸：xs、sm、md、lg 和 xl
|
||
|
||
```html
|
||
<uni-row class="demo-uni-row">
|
||
<uni-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1">
|
||
<view class="demo-uni-col dark"></view>
|
||
</uni-col>
|
||
<uni-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11">
|
||
<view class="demo-uni-col light"></view>
|
||
</uni-col>
|
||
<uni-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11">
|
||
<view class="demo-uni-col dark"></view>
|
||
</uni-col>
|
||
<uni-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1">
|
||
<view class="demo-uni-col light"></view>
|
||
</uni-col>
|
||
</uni-row>
|
||
```
|
||
|
||
###### 使用到的 CSS
|
||
|
||
```css
|
||
.demo-uni-row {
|
||
margin-bottom: 10px;
|
||
/* QQ、字节小程序文档写有 :host，但实测不生效 */
|
||
/* 百度小程序没有 :host，需要设置block */
|
||
/* #ifdef MP-TOUTIAO || MP-QQ || MP-BAIDU */
|
||
display: block;
|
||
/* #endif */
|
||
}
|
||
|
||
/* 支付宝小程序没有 demo-uni-row 层级 */
|
||
/* 微信小程序使用了虚拟化节点，没有 demo-uni-row 层级 */
|
||
/* #ifdef MP-ALIPAY || MP-WEIXIN */
|
||
/deep/ .uni-row {
|
||
margin-bottom: 10px;
|
||
}
|
||
/* #endif */
|
||
|
||
.demo-uni-col {
|
||
height: 36px;
|
||
border-radius: 4px;
|
||
}
|
||
|
||
.dark_deep {
|
||
background-color: #99a9bf;
|
||
}
|
||
|
||
.dark {
|
||
background-color: #d3dce6;
|
||
}
|
||
|
||
.light {
|
||
background-color: #e5e9f2;
|
||
}
|
||
```
|
||
|
||
### 平台差异说明
|
||
|
||
### `uni-row`
|
||
| 属性名 | App(nvue) | App(vue) | H5 | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节跳动小程序 | QQ 小程序 |
|
||
| :-: | :-: | :-: | :-: | :-: | :-: | :-: | :-: | :-: |
|
||
| gutter | - | √ | √ | √ | √ | √ | √ | √ |
|
||
|
||
### `uni-col`
|
||
|
||
| 属性名 | App(nvue) | App(vue) | H5 | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节跳动小程序 | QQ 小程序 |
|
||
| :-: | :-: | :-: | :-: | :-: | :-: | :-: | :-: | :-: |
|
||
| span | √ | √ | √ | √ | √ | √ | √ | √ |
|
||
| offset | √ | √ | √ | √ | √ | √ | √ | √ |
|
||
| push | √ | √ | √ | √ | √ | √ | √ | √ |
|
||
| pull | √ | √ | √ | √ | √ | √ | √ | √ |
|
||
| xs | - | √ | √ | √ | √ | √ | √ | √ |
|
||
| sm | - | √ | √ | √ | √ | √ | √ | √ |
|
||
| md | - | √ | √ | √ | √ | √ | √ | √ |
|
||
| lg | - | √ | √ | √ | √ | √ | √ | √ |
|
||
| xl | - | √ | √ | √ | √ | √ | √ | √ |
|
||
|
||
## API
|
||
|
||
### Row Props
|
||
|
||
`其他平台`
|
||
|
||
| 属性名 | 类型 | 可选值 | 默认值 | 必填 | 说明 |
|
||
| :-: | :-: | :-: | :-: | :-: | :-: |
|
||
| gutter | Number | - | 0 | 否 | 栅格间隔 |
|
||
|
||
`nvue平台`
|
||
|
||
| 属性名 | 类型 | 可选值 | 默认值 | 必填 | 说明 |
|
||
| :-: | :-: | :-: | :-: | :-: | :-: |
|
||
| width | Number/String | - | `750rpx` | 否 | nvue 中无百分比 width，使用 span 等属性时，需配置此项`rpx值`。此项不会影响其他平台展示效果 |
|
||
|
||
### Col Props
|
||
|
||
| 属性名 | 类型 | 可选值 | 默认值 | 必填 | 说明 |
|
||
| :-: | :-: | :-: | :-: | :-: | :-: |
|
||
| span | Number | - | 24 | 否 | 栅格占据的列数 |
|
||
| offset | Number | - | - | 否 | 栅格左侧间隔格数 |
|
||
| push | Number | - | - | 否 | 栅格向右偏移格数 |
|
||
| pull | Number | - | - | 否 | 栅格向左偏移格数 |
|
||
| xs | Number/object | - | - | 否 | 屏幕宽度`<768px`时，要显示的栅格规则，如：`:xs="8"`或`:xs="{span: 8, pull: 4}"` |
|
||
| sm | Number/object | - | - | 否 | 屏幕宽度`≥768px`时，要显示的栅格规则 |
|
||
| md | Number/object | - | - | 否 | 屏幕宽度`≥992px`时，要显示的栅格规则 |
|
||
| lg | Number/object | - | - | 否 | 屏幕宽度`≥1200px`时，要显示的栅格规则 |
|
||
| xl | Number/object | - | - | 否 | 屏幕宽度`≥1920px`时，要显示的栅格规则 |
|
||
|
||
|
||
## 组件示例
|
||
|
||
点击查看：[https://hellouniapp.dcloud.net.cn/pages/extUI/row/row](https://hellouniapp.dcloud.net.cn/pages/extUI/row/row) |