Grid 宫格
宫格可以在水平方向上把页面分隔成等宽度的区块，用于展示内容或进行页面导航。
基础用法
自定义列数
自定义内容
正方形格子
格子间距
内容横排
页面导航
徽章提示
API
Grid Props
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| column-num | 列数 | number | string | 4 |
| icon-size | 图标大小，默认单位为px | number | string | 28px |
| gutter | 格子之间的间距，默认单位为px | number | string | 0 |
| border | 是否显示边框 | boolean | true |
| center | 是否将格子内容居中显示 | boolean | true |
| square | 是否将格子固定为正方形 | boolean | false |
| clickable | 是否开启格子点击反馈 | boolean | false |
| direction | 格子内容排列的方向，可选值为 horizontal | string | vertical |
| reverse | 是否调换图标和文本的位置 | boolean | false |
GridItem Props
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| text | 文字 | string | - |
| icon | 图标名称或图片链接，等同于 Icon 组件的 name 属性 | string | - |
| icon-prefix | 图标类名前缀，等同于 Icon 组件的 class-prefix 属性 | string | r-icon |
| icon-color | 图标颜色，等同于 Icon 组件的 color 属性 | string | - |
| dot | 是否显示图标右上角小红点 | boolean | false |
| badge | 图标右上角徽标的内容 | number | string | - |
| badge-props | 自定义徽标的属性，传入的对象会被透传给 Badge 组件的 props | BadgeProps | - |
| url | 点击后跳转的链接地址 | string | - |
| to | 点击后跳转的目标路由对象，等同于 Vue Router 的 to 属性 | string | object | - |
| replace | 是否在跳转时替换当前页面历史 | boolean | false |
GridItem Events
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| click | 点击格子时触发 | event: MouseEvent |
GridItem Slots
| 名称 | 说明 |
|---|---|
| default | 自定义宫格的所有内容 |
| icon | 自定义图标 |
| text | 自定义文字 |
类型定义
组件导出以下类型定义：
ts
import type { GridProps, GridDirection, GridItemProps } from 'ryxon'主题定制
样式变量
组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 ConfigProvider 组件。
| 名称 | 默认值 | 描述 |
|---|---|---|
| --r-grid-item-content-padding | var(--r-padding-md) var(--r-padding-xs) | - |
| --r-grid-item-content-background | var(--r-background-2) | - |
| --r-grid-item-content-active-color | var(--r-active-color) | - |
| --r-grid-item-icon-size | 28px | - |
| --r-grid-item-text-color | var(--r-text-color) | - |
| --r-grid-item-text-font-size | var(--r-font-size-sm) | - |