Appearance

iuiDesign
100%
02:32
本页目录

宫格可以在水平方向上把页面分隔成等宽度的区块，用于展示内容或进行页面导航。

基本使用 ​

html
<iui-grid>
  <iui-grid-row>
    <iui-grid-item>
      <view class="item">
        <view class="demo-block"> </view>
        <text>Title Text</text>
      </view>
    </iui-grid-item>
    <iui-grid-item>
      <view class="item">
        <view class="demo-block"> </view>
        <text>Title Text</text>
      </view>
    </iui-grid-item>
    <iui-grid-item>
      <view class="item">
        <view class="demo-block"> </view>
        <text>Title Text</text>
      </view>
    </iui-grid-item>
  </iui-grid-row>
  <iui-grid-row>
    <iui-grid-item>
      <view class="item">
        <view class="demo-block"> </view>
        <text>Title Text</text>
      </view>
    </iui-grid-item>
    <iui-grid-item>
      <view class="item">
        <view class="demo-block"> </view>
        <text>Title Text</text>
      </view>
    </iui-grid-item>
  </iui-grid-row>
</iui-grid>
<iui-grid>
  <iui-grid-row>
    <iui-grid-item>
      <view class="item">
        <view class="demo-block"> </view>
        <text>Title Text</text>
      </view>
    </iui-grid-item>
    <iui-grid-item>
      <view class="item">
        <view class="demo-block"> </view>
        <text>Title Text</text>
      </view>
    </iui-grid-item>
    <iui-grid-item>
      <view class="item">
        <view class="demo-block"> </view>
        <text>Title Text</text>
      </view>
    </iui-grid-item>
  </iui-grid-row>
  <iui-grid-row>
    <iui-grid-item>
      <view class="item">
        <view class="demo-block"> </view>
        <text>Title Text</text>
      </view>
    </iui-grid-item>
    <iui-grid-item>
      <view class="item">
        <view class="demo-block"> </view>
        <text>Title Text</text>
      </view>
    </iui-grid-item>
  </iui-grid-row>
</iui-grid>
css
.item {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
  padding: 10px 5px;
}

.demo-block {
  padding: 10px;
  background-color: var(--iui-blue-2);
  border-radius: 4px;
  width: 20px;
  height: 20px;
  margin-bottom: 10px;
}
.item {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
  padding: 10px 5px;
}

.demo-block {
  padding: 10px;
  background-color: var(--iui-blue-2);
  border-radius: 4px;
  width: 20px;
  height: 20px;
  margin-bottom: 10px;
}

数据渲染 ​

html
<iui-grid :data="data" :cols="4"></iui-grid>

<script setup>
  const data = [
    {
      title: "Title Text1",
      desc: "Description",
    },
    {
      title: "Title Text2",
      desc: "Description",
    },
    {
      title: "Title Text3",
      desc: "Description",
    },
    {
      title: "Title Text4",
      desc: "Description",
    },
  ];
</script>
<iui-grid :data="data" :cols="4"></iui-grid>

<script setup>
  const data = [
    {
      title: "Title Text1",
      desc: "Description",
    },
    {
      title: "Title Text2",
      desc: "Description",
    },
    {
      title: "Title Text3",
      desc: "Description",
    },
    {
      title: "Title Text4",
      desc: "Description",
    },
  ];
</script>

图标大小 ​

html
<iui-grid :data="data" :cols="4" :iconSize="24"></iui-grid>
<iui-grid :data="data" :cols="4" :iconSize="24"></iui-grid>

横向布局 ​

html
<iui-grid :data="data" :cols="2" direction="horizontal"></iui-grid>
<iui-grid :data="data" :cols="2" direction="horizontal"></iui-grid>

横向滚动 ​

html
<iui-grid :data="data" :cols="2" scroll></iui-grid>
<iui-grid :data="data" :cols="2" scroll></iui-grid>

显示边框 ​

html
<iui-grid :data="data" :cols="2" border></iui-grid>
<iui-grid :data="data" :cols="2" border></iui-grid>

API ​

<Grid>props
参数描述类型默认值
data表格数据GridData[][]
direction排列方向horizontal | verticalvertical
iconSize图标大小String | Number36
bgColor宫格背景颜色String-
cols列数Number3
rowGap行间距Number0
colGap列间距Number0
border是否显示边框Booleanfalse
scroll横向滚动Booleanfalse
clickEffect点击效果Boolean | Objecttrue
<Grid>events
事件名描述参数
click点击宫格(GridData, RowIndex, ColIndex)
<GridData>props
参数描述类型默认值
icon图标String-
title标题String-
desc描述String-
<GridRow>props
参数描述类型默认值
scroll横向滚动（优先级高于 Grid）Booleanfalse