低代码高性能原生UI框架Grid 宫格布局
组件类型：UxGridComponentPublicInstance
宫格布局 需搭配 ux-grid-item 使用
平台兼容性
| Android | iOS | web | 鸿蒙 Next | 小程序 |
|---|---|---|---|---|
| √ | √ | √ | x | x |
Props
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| col | Number | 3 | 宫格的列数 |
| border | Boolean | false | 是否显示宫格的边框 |
| align | String | 'left' | 宫格对齐方式，表现为数量少的时候，靠左，居中，还是靠右 |
| background | String | 'transparent' | 背景色 |
align
| 值 | 说明 |
|---|---|
| left | 左对齐 |
| center | 居中 |
| right | 右对齐 |
示例代码
html
<template>
<ux-page>
<ux-navbar :title="title" :border="false"></ux-navbar>
<ux-scroll>
<ux-card direction="column" icon="flag" title="宫格布局" :bold="true">
<ux-text text="宫格布局 需搭配 ux-grid-item 使用"></ux-text>
<ux-row :flex="true" align="top" :mt="5" style="width: 100%;">
<ux-text text="详细文档："></ux-text>
<ux-text style="flex: 1" name="宫格布局" text="https://www.uxframe.cn/component/layout/grid.html" mode="link"></ux-text>
</ux-row>
</ux-card>
<ux-card direction="column" icon="arrowright" title="列数" :bold="true">
<ux-text text="支持配置排列列数" :mb="15"></ux-text>
<ux-grid :col="4">
<ux-grid-item>
<view class="b"></view>
</ux-grid-item>
<ux-grid-item>
<view class="b"></view>
</ux-grid-item>
<ux-grid-item>
<view class="b"></view>
</ux-grid-item>
<ux-grid-item>
<view class="b"></view>
</ux-grid-item>
<ux-grid-item>
<view class="b"></view>
</ux-grid-item>
</ux-grid>
</ux-card>
<ux-card direction="column" icon="arrowright" title="边框" :bold="true">
<ux-text text="支持边框显示" :mb="15"></ux-text>
<ux-grid :border="true">
<ux-grid-item>
<view class="b"></view>
</ux-grid-item>
<ux-grid-item>
<view class="b"></view>
</ux-grid-item>
<ux-grid-item>
<view class="b"></view>
</ux-grid-item>
<ux-grid-item>
<view class="b"></view>
</ux-grid-item>
<ux-grid-item>
<view class="b"></view>
</ux-grid-item>
<ux-grid-item>
<view class="b"></view>
</ux-grid-item>
</ux-grid>
</ux-card>
<ux-card direction="column" icon="arrowright" title="对齐方式" :bold="true">
<ux-text text="支持左对齐、居中、右对齐" :mb="15"></ux-text>
<ux-grid :col="4" align="right">
<ux-grid-item>
<view class="b"></view>
</ux-grid-item>
<ux-grid-item>
<view class="b"></view>
</ux-grid-item>
<ux-grid-item>
<view class="b"></view>
</ux-grid-item>
<ux-grid-item>
<view class="b"></view>
</ux-grid-item>
<ux-grid-item>
<view class="b"></view>
</ux-grid-item>
<ux-grid-item>
<view class="b"></view>
</ux-grid-item>
<ux-grid-item>
<view class="b"></view>
</ux-grid-item>
</ux-grid>
</ux-card>
<ux-placeholder :height="200">
<ux-row justify="center" align="center" style="height: 100%;">
<ux-text prefix-icon="wink" text="真的没有了~"></ux-text>
</ux-row>
</ux-placeholder>
</ux-scroll>
</ux-page>
</template><template>
<ux-page>
<ux-navbar :title="title" :border="false"></ux-navbar>
<ux-scroll>
<ux-card direction="column" icon="flag" title="宫格布局" :bold="true">
<ux-text text="宫格布局 需搭配 ux-grid-item 使用"></ux-text>
<ux-row :flex="true" align="top" :mt="5" style="width: 100%;">
<ux-text text="详细文档："></ux-text>
<ux-text style="flex: 1" name="宫格布局" text="https://www.uxframe.cn/component/layout/grid.html" mode="link"></ux-text>
</ux-row>
</ux-card>
<ux-card direction="column" icon="arrowright" title="列数" :bold="true">
<ux-text text="支持配置排列列数" :mb="15"></ux-text>
<ux-grid :col="4">
<ux-grid-item>
<view class="b"></view>
</ux-grid-item>
<ux-grid-item>
<view class="b"></view>
</ux-grid-item>
<ux-grid-item>
<view class="b"></view>
</ux-grid-item>
<ux-grid-item>
<view class="b"></view>
</ux-grid-item>
<ux-grid-item>
<view class="b"></view>
</ux-grid-item>
</ux-grid>
</ux-card>
<ux-card direction="column" icon="arrowright" title="边框" :bold="true">
<ux-text text="支持边框显示" :mb="15"></ux-text>
<ux-grid :border="true">
<ux-grid-item>
<view class="b"></view>
</ux-grid-item>
<ux-grid-item>
<view class="b"></view>
</ux-grid-item>
<ux-grid-item>
<view class="b"></view>
</ux-grid-item>
<ux-grid-item>
<view class="b"></view>
</ux-grid-item>
<ux-grid-item>
<view class="b"></view>
</ux-grid-item>
<ux-grid-item>
<view class="b"></view>
</ux-grid-item>
</ux-grid>
</ux-card>
<ux-card direction="column" icon="arrowright" title="对齐方式" :bold="true">
<ux-text text="支持左对齐、居中、右对齐" :mb="15"></ux-text>
<ux-grid :col="4" align="right">
<ux-grid-item>
<view class="b"></view>
</ux-grid-item>
<ux-grid-item>
<view class="b"></view>
</ux-grid-item>
<ux-grid-item>
<view class="b"></view>
</ux-grid-item>
<ux-grid-item>
<view class="b"></view>
</ux-grid-item>
<ux-grid-item>
<view class="b"></view>
</ux-grid-item>
<ux-grid-item>
<view class="b"></view>
</ux-grid-item>
<ux-grid-item>
<view class="b"></view>
</ux-grid-item>
</ux-grid>
</ux-card>
<ux-placeholder :height="200">
<ux-row justify="center" align="center" style="height: 100%;">
<ux-text prefix-icon="wink" text="真的没有了~"></ux-text>
</ux-row>
</ux-placeholder>
</ux-scroll>
</ux-page>
</template>ts
<script setup>
let title = ''
onLoad((e: OnLoadOptions) => {
title = e['title'] ?? ''
})
</script><script setup>
let title = ''
onLoad((e: OnLoadOptions) => {
title = e['title'] ?? ''
})
</script>css
<style lang="scss">
.b {
width: 50px;
height: 40px;
border-radius: 5px;
background-color: #285655;
}
</style><style lang="scss">
.b {
width: 50px;
height: 40px;
border-radius: 5px;
background-color: #285655;
}
</style>