低代码高性能原生UI框架

Appearance

本页导读

Row 布局 ​

组件类型：UxRowComponentPublicInstance

平台兼容性 ​

Android uni-app-xiOS uni-app-xweb小程序
√xxx

Props ​

属性名类型默认值说明
gutterNumber0栅格间隔
justifyString'left'水平排列方式
alignString'center'垂直对齐方式

justify ​

值说明
left左对齐
center居中对齐
right右对齐
around间隔相等
between两端对齐

align ​

值说明
top上对齐
center居中
bottom下对齐
stretch填充

Events ​

事件名说明参数
click点击事件event: MouseEvent

示例代码 ​

html
<template>
	<ux-page :colors="['white']">
		<ux-navbar title="Layout" :border="false"></ux-navbar>

		<ux-scroll :scroll-y="true">
			<ux-col :padding="[15]">
				<ux-text theme="title" text="基础"></ux-text>
				
				<ux-row :mt="10">
					<ux-col :flex="false" :span="6">
						<view class="cell bg"></view>
					</ux-col>
					<ux-col :flex="false" :span="6">
						<view class="cell bg-dark"></view>
					</ux-col>
				</ux-row>
				
				<ux-row :mt="10">
					<ux-col :flex="false" :span="4">
						<view class="cell bg"></view>
					</ux-col>
					<ux-col :flex="false" :span="4">
						<view class="cell bg-dark"></view>
					</ux-col>
					<ux-col :flex="false" :span="4">
						<view class="cell bg-light"></view>
					</ux-col>
				</ux-row>
				
				<ux-row :mt="10">
					<ux-col :flex="false" :span="3">
						<view class="cell bg"></view>
					</ux-col>
					<ux-col :flex="false" :span="3">
						<view class="cell bg-dark"></view>
					</ux-col>
					<ux-col :flex="false" :span="3">
						<view class="cell bg-light"></view>
					</ux-col>
					<ux-col :flex="false" :span="3">
						<view class="cell bg-dark"></view>
					</ux-col>
				</ux-row>
			</ux-col>
			
			<ux-col :padding="[15]">
				<ux-text theme="title" text="分栏间隔"></ux-text>
				
				<ux-row justify="between" :gutter="10" :mt="10">
					<ux-col :flex="false" :span="3" :gutter="10">
						<view class="cell bg"></view>
					</ux-col>
					<ux-col :flex="false" :span="3" :gutter="10">
						<view class="cell bg-dark"></view>
					</ux-col>
					<ux-col :flex="false" :span="3" :gutter="10">
						<view class="cell bg-light"></view>
					</ux-col>
					<ux-col :flex="false" :span="3" :gutter="10">
						<view class="cell bg-dark"></view>
					</ux-col>
				</ux-row>
			</ux-col>
			
			<ux-col :padding="[15]">
				<ux-text theme="title" text="混合布局"></ux-text>
				
				<ux-row :gutter="10" :mt="10">
					<ux-col :flex="false" :span="2" :gutter="10">
						<view class="cell bg"></view>
					</ux-col>
					<ux-col :flex="false" :span="4" :gutter="10">
						<view class="cell bg-dark"></view>
					</ux-col>
					<ux-col :flex="false" :span="6" :gutter="10">
						<view class="cell bg-light"></view>
					</ux-col>
				</ux-row>
			</ux-col>
			
			<ux-col :padding="[15]">
				<ux-text theme="title" text="分栏偏移"></ux-text>
				
				<ux-row justify="between" :mt="10">
					<ux-col :flex="false" :span="3" :offset="3">
						<view class="cell bg"></view>
					</ux-col>
					<ux-col :flex="false" :span="3">
						<view class="cell bg-dark"></view>
					</ux-col>
				</ux-row>
				
				<ux-row :mt="10">
					<ux-col :flex="false" :span="3">
						<view class="cell bg"></view>
					</ux-col>
					<ux-col :flex="false" :span="3" :offset="3">
						<view class="cell bg-dark"></view>
					</ux-col>
				</ux-row>
			</ux-col>
			
			<ux-col :padding="[15]">
				<ux-text theme="title" text="对齐方式"></ux-text>
				
				<ux-row justify="between" :mt="10">
					<ux-col :flex="false" :span="3">
						<view class="cell bg"></view>
					</ux-col>
					<ux-col :flex="false" :span="3">
						<view class="cell bg-dark"></view>
					</ux-col>
				</ux-row>
				
				<ux-row justify="around" :mt="10">
					<ux-col :flex="false" :span="3">
						<view class="cell bg"></view>
					</ux-col>
					<ux-col :flex="false" :span="3">
						<view class="cell bg-dark"></view>
					</ux-col>
				</ux-row>
			</ux-col>
			
			<ux-placeholder :height="50"></ux-placeholder>
		</ux-scroll>

	</ux-page>
</template>
<template>
	<ux-page :colors="['white']">
		<ux-navbar title="Layout" :border="false"></ux-navbar>

		<ux-scroll :scroll-y="true">
			<ux-col :padding="[15]">
				<ux-text theme="title" text="基础"></ux-text>
				
				<ux-row :mt="10">
					<ux-col :flex="false" :span="6">
						<view class="cell bg"></view>
					</ux-col>
					<ux-col :flex="false" :span="6">
						<view class="cell bg-dark"></view>
					</ux-col>
				</ux-row>
				
				<ux-row :mt="10">
					<ux-col :flex="false" :span="4">
						<view class="cell bg"></view>
					</ux-col>
					<ux-col :flex="false" :span="4">
						<view class="cell bg-dark"></view>
					</ux-col>
					<ux-col :flex="false" :span="4">
						<view class="cell bg-light"></view>
					</ux-col>
				</ux-row>
				
				<ux-row :mt="10">
					<ux-col :flex="false" :span="3">
						<view class="cell bg"></view>
					</ux-col>
					<ux-col :flex="false" :span="3">
						<view class="cell bg-dark"></view>
					</ux-col>
					<ux-col :flex="false" :span="3">
						<view class="cell bg-light"></view>
					</ux-col>
					<ux-col :flex="false" :span="3">
						<view class="cell bg-dark"></view>
					</ux-col>
				</ux-row>
			</ux-col>
			
			<ux-col :padding="[15]">
				<ux-text theme="title" text="分栏间隔"></ux-text>
				
				<ux-row justify="between" :gutter="10" :mt="10">
					<ux-col :flex="false" :span="3" :gutter="10">
						<view class="cell bg"></view>
					</ux-col>
					<ux-col :flex="false" :span="3" :gutter="10">
						<view class="cell bg-dark"></view>
					</ux-col>
					<ux-col :flex="false" :span="3" :gutter="10">
						<view class="cell bg-light"></view>
					</ux-col>
					<ux-col :flex="false" :span="3" :gutter="10">
						<view class="cell bg-dark"></view>
					</ux-col>
				</ux-row>
			</ux-col>
			
			<ux-col :padding="[15]">
				<ux-text theme="title" text="混合布局"></ux-text>
				
				<ux-row :gutter="10" :mt="10">
					<ux-col :flex="false" :span="2" :gutter="10">
						<view class="cell bg"></view>
					</ux-col>
					<ux-col :flex="false" :span="4" :gutter="10">
						<view class="cell bg-dark"></view>
					</ux-col>
					<ux-col :flex="false" :span="6" :gutter="10">
						<view class="cell bg-light"></view>
					</ux-col>
				</ux-row>
			</ux-col>
			
			<ux-col :padding="[15]">
				<ux-text theme="title" text="分栏偏移"></ux-text>
				
				<ux-row justify="between" :mt="10">
					<ux-col :flex="false" :span="3" :offset="3">
						<view class="cell bg"></view>
					</ux-col>
					<ux-col :flex="false" :span="3">
						<view class="cell bg-dark"></view>
					</ux-col>
				</ux-row>
				
				<ux-row :mt="10">
					<ux-col :flex="false" :span="3">
						<view class="cell bg"></view>
					</ux-col>
					<ux-col :flex="false" :span="3" :offset="3">
						<view class="cell bg-dark"></view>
					</ux-col>
				</ux-row>
			</ux-col>
			
			<ux-col :padding="[15]">
				<ux-text theme="title" text="对齐方式"></ux-text>
				
				<ux-row justify="between" :mt="10">
					<ux-col :flex="false" :span="3">
						<view class="cell bg"></view>
					</ux-col>
					<ux-col :flex="false" :span="3">
						<view class="cell bg-dark"></view>
					</ux-col>
				</ux-row>
				
				<ux-row justify="around" :mt="10">
					<ux-col :flex="false" :span="3">
						<view class="cell bg"></view>
					</ux-col>
					<ux-col :flex="false" :span="3">
						<view class="cell bg-dark"></view>
					</ux-col>
				</ux-row>
			</ux-col>
			
			<ux-placeholder :height="50"></ux-placeholder>
		</ux-scroll>

	</ux-page>
</template>
ts
<script>
	export default {
		data() {
			return {
				
			}
		},
		onLoad(e: OnLoadOptions) {
			
		},
		methods: {
			
		}
	}
</script>
<script>
	export default {
		data() {
			return {
				
			}
		},
		onLoad(e: OnLoadOptions) {
			
		},
		methods: {
			
		}
	}
</script>
css
<style lang="scss">
	.cell {
		height: 45rpx;
		border-radius: 10rpx;
	}
	
	.bg {
	    background: #ced7e1;
	}
	
	.bg-light {
	    background: #e5e9f2;
	}
	
	.bg-dark {
	    background: #99a9bf;
	}
</style>
<style lang="scss">
	.cell {
		height: 45rpx;
		border-radius: 10rpx;
	}
	
	.bg {
	    background: #ced7e1;
	}
	
	.bg-light {
	    background: #e5e9f2;
	}
	
	.bg-dark {
	    background: #99a9bf;
	}
</style>

效果预览 ​

Button