PageGrid 页面栅格

介绍

PageGrid 用于移动端页面最外层布局，默认采用 12 列栅格、16px 外边距，并提供紧凑模式和常规模式两种间距密度。

与 Layout 的 Row / Col 不同，PageGrid 面向整页结构，负责内容区分栏、顶部区域、底部区域和安全区预留。

引入

import { createApp } from 'vue';
import { PageGrid, PageGridItem } from '@szhn/dh-design-mobile';

const app = createApp();
app.use(PageGrid);
app.use(PageGridItem);

代码演示

紧凑模式

紧凑模式适合信息密度较高的列表、数据表格、密集标签组、按钮并排和筛选区域。默认外边距 16px，水槽 8px。

<dh-page-grid mode="compact">
  <template #nav>
    <van-nav-bar title="事项列表" />
  </template>
  <template #search>
    <van-search placeholder="搜索事项" />
  </template>

  <dh-page-grid-item :span="6">筛选项</dh-page-grid-item>
  <dh-page-grid-item :span="6">筛选项</dh-page-grid-item>
  <dh-page-grid-item :span="4">状态</dh-page-grid-item>
  <dh-page-grid-item :span="4">类型</dh-page-grid-item>
  <dh-page-grid-item :span="4">时间</dh-page-grid-item>
</dh-page-grid>

常规模式

常规模式适合长文本阅读、图文卡片信息流、表单录入与设置页、商品详情与品牌展示、抽屉导航、空状态和反馈弹窗。默认外边距 16px，水槽 16px。

<dh-page-grid mode="regular">
  <dh-page-grid-item :span="12">主内容</dh-page-grid-item>
  <dh-page-grid-item :span="6">辅助信息</dh-page-grid-item>
  <dh-page-grid-item :span="6">辅助信息</dh-page-grid-item>
</dh-page-grid>

底部区域

底部标签栏、底部按钮区这类区域放在 bottom 插槽中，不参与 12 列栅格。金刚区通常也跳出栅格约束，使用等分布局。

<dh-page-grid>
  <dh-page-grid-item :span="12">内容区域</dh-page-grid-item>

  <template #bottom>
    <div class="quick-actions">
      <button>首页</button>
      <button>办事</button>
      <button>消息</button>
      <button>我的</button>
    </div>
  </template>
</dh-page-grid>

API

PageGrid Props

参数	说明	类型	默认值
mode	间距密度，可选值为 compact regular	string	regular
columns	栅格列数	number	12
edge	页面左右外边距，默认单位为 px	number | string	16
gutter	列间距，默认单位为 px；不传时跟随 mode	number | string	-
row-gutter	行间距，默认单位为 px；不传时跟随 gutter	number | string	-
grid	是否启用内容区栅格	boolean	true
safe-area	是否预留顶部和底部安全区	boolean	true
as	自定义根节点	string | Component	div

PageGridItem Props

参数	说明	类型	默认值
span	列元素宽度	number	12
offset	列元素偏移距离	number	0
columns	当前栅格列数	number	12
as	自定义根节点	string | Component	div

PageGrid Slots

名称	说明
default	内容栅格区域
status	状态栏区域
nav	导航栏区域
search	搜索栏区域
bottom	底部标签栏或底部操作区

类型定义

import type { MobilePageGridMode } from '@szhn/dh-design-mobile';