跳到主要内容

宫格

宫格组件可在水平方向上将页面分隔为等宽区块，用于展示内容或进行页面导航。

何时使用​

  • 展示多个功能或模块的入口
  • 功能图标加文本组合的操作面板
  • 分类、快捷方式、常用操作展示区域

一、属性​

1. 数据源​

数据源入口

1）数据配置​

数据配置方式包括：

  • 手动赋值：通过“添加项”或“导入数据”的方式添加内容。支持导入静态数据源，同时可配置宫格项的文字、图标、徽标类型、图标颜色等。

    手动赋值配置

    • 文字：可修改宫格项图标下方的文字内容
      修改文字

    • 图标：为每个宫格项设置不同图标
      设置图标

    • 徽标类型：可设置为“无”、“小红点”或“徽标数”，默认无
      徽标类型设置

    • 图标颜色：支持自定义图标颜色
      图标颜色设置

  • 数据源配置：包括接口绑定、数据绑定、模型绑定等方式，用于动态配置宫格项。

    数据源绑定

    • 手动赋值：即固定值配置
    • 数据绑定：详见 数据绑定
    • 组件绑定：绑定当前组件的数据集

2. 功能​

功能设置入口

1）列数设置​

可自定义宫格的列数。

列数设置

3. 外观​

外观配置入口

1）排序方向​

可设置为垂直或水平方向，控制图标与文字的排列方式。

排序方向设置

2）间隔设置​

可设置宫格项之间的间距。

间隔设置

3）图标大小​

自定义宫格项图标的显示尺寸。

图标大小设置

4）图标与文字位置调换​

可上下切换图标与文字的位置。

图文位置调换

5）正方形盒子​

开启后，宫格项盒子为正方形。

正方形样式

6）点击反馈​

启用后点击宫格项会有视觉反馈（如颜色、阴影变化等），提示用户点击生效。

点击反馈效果

7）垂直居中​

支持图文内容在垂直方向上的居中显示。

垂直居中效果

8）边框显示​

开启后，宫格项之间显示边框，便于区分。

边框展示

4. 状态​

无特殊状态，详见 通用状态。

二、样式​

无特殊样式配置，详见 通用样式。

三、常见使用场景​

1. 首页快捷功能入口​

展示多个常用功能或子系统的图文入口，例如“扫一扫”、“收藏”、“设置”、“客服”等模块。

首页入口示例

2. 其他使用场景​

宫格组件适合展示图文结合的操作入口，常用于：

  • 首页导航
  • 分类入口
  • 功能面板

其核心特性是统一风格的跳转或功能展示区域，可根据实际业务灵活命名与使用。