diff --git a/docs/component/uniui/uni-row.md b/docs/component/uniui/uni-row.md index 1540a95aacb4b2b57098e5053b1323d6f9aeeedb..0f42e88374dae448209c26cde89e0a11b28d831f 100644 --- a/docs/component/uniui/uni-row.md +++ b/docs/component/uniui/uni-row.md @@ -1,177 +1,177 @@ - -::: 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 - - - - - - - - - - - - - - -``` - -### 分栏偏移 - -```html - - - - - - - - - - - - - - - - - - - - -``` - -### 响应式布局 - -```html - - - - - - - - - - - - - - -``` - -### 使用到的 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 + + + + + + + + + + + + + + +``` + +### 分栏偏移 + +```html + + + + + + + + + + + + + + + + + + + + +``` + +### 响应式布局 + +```html + + + + + + + + + + + + + + +``` + +### 使用到的 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 -``` -> Script +``` +> Script ```html - -``` -> Style + +``` +> Style ```html - -``` -::: - - + + +``` +::: + + [完整示例演示](https://hellouniapp.dcloud.net.cn/pages/extUI/row/row) \ No newline at end of file