docs: uni-row.md

8d070f3f · DCloud_LXH · 833166d5 · 8d070f3f
隐藏空白更改
内联并排

Showing with 185 addition and 185 deletion

docs/component/uniui/uni-row.md docs/component/uniui/uni-row.md +185 -185

未找到文件。
--- a/docs/component/uniui/uni-row.md
+++ b/docs/component/uniui/uni-row.md
-
-::: 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: 5rpx 10rpx 0;
 		overflow: hidden;
 	}
-</style>
-
-```
-:::
-
-
+</style>
+
+```
+:::
+
+
 [完整示例演示](https://hellouniapp.dcloud.net.cn/pages/extUI/row/row)
\ No newline at end of file