导航菜单&页面布局

配置导航菜单

方式一：框架设计

1. 通过菜单导航设计--框架设计，进入框架设计页面
   图2 框架设计
   

2. 框架设计以思维导图形式构建应用框架

   同级模块、子模块：可对应菜单，也可作为资源管理的文件夹

   同级页面、子页面：模块对应的页面，可作为菜单绑定的关系页面，也可作为资源管理中文件夹中资源

   生成原型：可一键生成导航菜单和对应页面

   图3 应用框架
   
   图4 警告
   
   图5 菜单/对应页面
   

方式二：导航管理

1. 通过菜单导航设计-导航管理，抽屉展示导航配置

   新增同级/新增子级：用于配置菜单的层级结构

   支持编辑菜单名称、删除、展开/收起等操作

   图6 导航管理
   

2. 编辑菜单名称和图标，系统内置面性和线性图标，并支持配置图标颜色，支持上传自定义图标
   图7 图标
   

3. 选择关联页面，配置菜单跳转的具体页面
   图8 具体页面
   

4. 配置定位的页面组件，实现页面加载时自动定位至该组件
   图9 自动定位至该组件
   

新增页面方式

方式1：通过框架设计中模块+页面可直接勾选生成原型后，生成对应菜单下的页面

图10 是否生成菜单

图11 生成菜单

方式2：资源管理-新增页面或者初始化进入应用时，可选择页面类型（基础页面、弹窗页面）或者页面的布局模式（栅格布局、画布布局）

• 基础页面：常用的页面类型，固定了页面尺寸，常用于菜单间页面跳转
• 弹窗页面：常用的弹窗类型，拥有弹窗尺寸，常用于按钮打开的弹窗页面
• 栅格布局：通过行列属性，结合布局组件实现更加规整的页面布局
• 画布布局：自由摆放组件位置，结合素材组件实现更加丰富的页面布局

图12 画面布局

图13 创建页面

方式3：选中文件夹（菜单）通过更多操作菜单中-新增页面，默认在该文件夹下新增栅格布局类的基础页面

图14 新增页面

拖动页面可移动页面至目标文件夹

图15 移动页面至目标文件夹

配置页面布局

通过菜单导航设计-插入，选择要插入的组件，组件是构成一个应用的最小单位，组件的承载单位为页面，组件的类型有布局、图表、素材、分析仪、数据大屏、数据文档、表单和高级组件。

图16 插入

页面基础配置

页面为组成应用的基本单元，并在“资源管理”中进行管理。页面的配置分为两个方面，一方面为配置页面本身的基础信息和样式，另一方面为在画布中配置页面中包含的组件，如下图所示。

图17 页面基础配置