rice-ui

暗黑模式

Layout 布局 ​

点击扫码预览
23:47
组件名：rice-layout
演示示例可扫模拟器状态栏上的二维码预览或 点击在线预览

通过基础的 24 分栏，可以快速的创建布局。

平台兼容性 ​

uni-app x ​

AndroidiOS鸿蒙Next微信小程序h5
√√√√√

警告

在 Android 端不推荐使用该组件，因为 Android 对dom的数量和层次很苛刻，dom数量越多，层级嵌套越深，渲染越慢。如果你的页面很简单，元素很少，可以忽略以上。

基础用法 ​

通过 row 和 col 组件，并在 col 上添加 span 属性设置列所占的宽度百分比。

vue
<template>
  <rice-row>
    <rice-col :span="12">
        <view class="box1"></view>
    </rice-col>
    <rice-col :span="12">
      <view class="box2"></view>
    </rice-col>
 </rice-row>
 <rice-row>
	<rice-col :span="8">
		<view class="box1"></view>
	</rice-col>
	<rice-col :span="8">
		<view class="box2"></view>
	</rice-col>
	<rice-col :span="8">
		<view class="box1"></view>
	</rice-col>
 </rice-row>
</template>

<style>
.box1 {
	border-radius: 6px;
	height: 22px;
	background-color: #ced7e1;
}
.box2 {
	border-radius: 6px;
	height: 22px;
	background-color: #99a9bf;
}
</style>

分栏间隔 ​

通过 row 上的 gutter 属性可以设置列元素之间的间隔，默认为 0。

html
<rice-row :gutter="16">
	<rice-col :span="8">
		<view class="box1"></view>
	</rice-col>
	<rice-col :span="8">
	    <view class="box2"></view>
	</rice-col>
	<rice-col :span="8">
		<view class="box1"></view>
	</rice-col>
</rice-row>

混合布局 ​

通过指定 col 上的 span 属性，设置不同的值，达到不同的比例。

html
<rice-row :gutter="16">
	<rice-col :span="4">
		<view class="box1"></view>
	</rice-col>
	<rice-col :span="8">
		<view class="box2"></view>
	</rice-col>
	<rice-col :span="12">
		<view class="box1"></view>
	</rice-col>
</rice-row>
<rice-row :gutter="16">
	<rice-col :span="6">
		<view class="box1"></view>
	</rice-col>
	<rice-col :span="12">
		<view class="box2"></view>
	</rice-col>
	<rice-col :span="6">
	    <view class="box1"></view>
	</rice-col>
</rice-row>

分栏偏移 ​

通过指定 col 组件的 offset 属性可以指定分栏偏移的栏数，计算方式和 span 一致。

html
<rice-row :gutter="16">
	<rice-col :span="6"  :offset="6">
		<view class="box1"></view>
	</rice-col>
	<rice-col :span="6">
		<view class="box2"></view>
	</rice-col>
	<rice-col :span="6">
		<view class="box1"></view>
	</rice-col>
	<rice-col :span="6">
		<view class="box2"></view>
	</rice-col>
</rice-row>

对齐方式 ​

通过设置 row 组件的 justify 的属性可以对分栏进行对齐，可选值见下 Justify Options。其最终表现和 css 的 justify-content 一致。

html
<!-- 居中对齐 -->
<rice-row justify='center'>
	<rice-col :span="6">
		<view class="box1"></view>
	</rice-col>
	<rice-col :span="6">
		<view class="box2"></view>
	</rice-col>
	<rice-col :span="6">
		<view class="box1"></view>
	</rice-col>
</rice-row>

API ​

Row Props ​

参数说明类型默认值
gutter列元素之间的间距number0
justifyflex 布局下的水平排列方式，可选值见下 Justify Optionsstringstart
alignflex 布局下的垂直排列方式，可选 center bottom topstring-
customStyle自定义样式Object-

Col Props ​

参数说明类型默认值
span栅格占据的列数,24等分number24
offset栅格左侧的间隔格数 ,计算方式与 span 相同number0
customStyle自定义样式Object-

Justify Options ​

属性值说明
start左对齐
end右对齐
center居中对齐
space-around每个项目两侧的间隔相等
space-between两端对齐

Col Slots ​

名称说明
default自定义内容区域