Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
Tc.小浩
unidocs-zh
提交
8d070f3f
U
unidocs-zh
项目概览
Tc.小浩
/
unidocs-zh
与 Fork 源项目一致
Fork自
DCloud / unidocs-zh
通知
1
Star
0
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
U
unidocs-zh
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
8d070f3f
编写于
3月 23, 2022
作者:
D
DCloud_LXH
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
docs: uni-row.md
上级
833166d5
变更
1
隐藏空白更改
内联
并排
Showing
1 changed file
with
185 addition
and
185 deletion
+185
-185
docs/component/uniui/uni-row.md
docs/component/uniui/uni-row.md
+185
-185
未找到文件。
docs/component/uniui/uni-row.md
浏览文件 @
8d070f3f
::: tip
组件名 uni-row、uni-col
> 代码块: `uRow`、`uCol`
[
点击下载&安装
](
https://ext.dcloud.net.cn/plugin?name=uni-row
)
:::
流式栅格系统,随着屏幕或视口分为 24 份,可以迅速简便地创建布局。
## 介绍
### 平台差异说明
### `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 |-| √| √ |√ | √ |√ | √ |√|
### 基本用法
```
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>
```
### 响应式布局
```
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
;
}
```
## 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`
时,要显示的栅格规则 |
## 示例
::: warning 注意
示例依赖了
`uni-card`
`uni-section`
`uni-scss`
等多个组件,直接拷贝示例代码将无法正常运行 。
请到
[
组件下载页面
](
https://ext.dcloud.net.cn/plugin?name=uni-row
)
,在页面右侧选择
`使用 HBuilderX导入示例项目`
,体验完整组件示例。
:::
::: preview https://hellouniapp.dcloud.net.cn/pages/extUI/row/row
> Template
```
html
::: tip
组件名 uni-row、uni-col
> 代码块: `uRow`、`uCol`
[
点击下载&安装
](
https://ext.dcloud.net.cn/plugin?name=uni-row
)
:::
流式栅格系统,随着屏幕或视口分为 24 份,可以迅速简便地创建布局。
## 介绍
### 平台差异说明
### `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 |-| √| √ |√ | √ |√ | √ |√|
### 基本用法
```
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>
```
### 响应式布局
```
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
;
}
```
## 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`
时,要显示的栅格规则 |
## 示例
::: warning 注意
示例依赖了
`uni-card`
`uni-section`
`uni-scss`
等多个组件,直接拷贝示例代码将无法正常运行 。
请到
[
组件下载页面
](
https://ext.dcloud.net.cn/plugin?name=uni-row
)
,在页面右侧选择
`使用 HBuilderX导入示例项目`
,体验完整组件示例。
:::
::: preview https://hellouniapp.dcloud.net.cn/pages/extUI/row/row
> Template
```
html
<template>
<view
class=
"container"
>
<uni-card
is-full
:is-shadow=
"false"
>
...
...
@@ -344,8 +344,8 @@
<!-- #endif -->
</view>
</template>
```
> Script
```
> Script
```
html
<script>
export
default
{
...
...
@@ -357,9 +357,9 @@
}
}
</script>
```
> Style
```
> Style
```
html
<style
lang=
"scss"
>
.demo-uni-row
{
...
...
@@ -406,10 +406,10 @@
padding
:
5
rpx
10
rpx
0
;
overflow
:
hidden
;
}
</style>
```
:::
</style>
```
:::
[
完整示例演示
](
https://hellouniapp.dcloud.net.cn/pages/extUI/row/row
)
\ No newline at end of file
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录