# 导航菜单\&页面布局
在unidaten的应用构建模块中，可以在统一的入口中用拖拉拽的方式快速地进行应用菜单结构和页面布局的配置
图1页面布局   
![](https://support.huaweicloud.com/nscf-saasapp/zh-cn_image_0000002143200124.png)
- 功能区：页面插入、界面风格设计
- 资源区：对想要插入页面中的资源的选择、管理，包括已经制作好的数据大屏、分析仪和系统预制的插件等
- 画布区：组件拖拉拽操作，画布式界面
- 属性区：样式、数据、交互核心三元组，每个元素可以通过三元组的配置维度完成原型设计
#### 配置导航菜单
**方式一：框架设计**
1. 通过菜单导航设计--框架设计，进入框架设计页面 
   图2框架设计   
   ![](https://support.huaweicloud.com/nscf-saasapp/zh-cn_image_0000002176055801.png)
   
   
2. 框架设计以思维导图形式构建应用框架 
   同级模块、子模块：可对应菜单，也可作为资源管理的文件夹
   同级页面、子页面：模块对应的页面，可作为菜单绑定的关系页面，也可作为资源管理中文件夹中资源
   生成原型：可一键生成导航菜单和对应页面
   图3应用框架   
   ![](https://support.huaweicloud.com/nscf-saasapp/zh-cn_image_0000002175934209.png)
   图4警告   
   ![](https://support.huaweicloud.com/nscf-saasapp/zh-cn_image_0000002140616640.png)
   图5菜单/对应页面   
   ![](https://support.huaweicloud.com/nscf-saasapp/zh-cn_image_0000002140774744.png)
   
   
**方式二：导航管理**
1. 通过菜单导航设计-导航管理，抽屉展示导航配置 
   新增同级/新增子级：用于配置菜单的层级结构
   支持编辑菜单名称、删除、展开/收起等操作
   图6导航管理   
   ![](https://support.huaweicloud.com/nscf-saasapp/zh-cn_image_0000002176055809.png)
   
   
2. 编辑菜单名称和图标，系统内置面性和线性图标，并支持配置图标颜色，支持上传自定义图标 
   图7图标   
   ![](https://support.huaweicloud.com/nscf-saasapp/zh-cn_image_0000002175934213.png)
   
   
3. 选择关联页面，配置菜单跳转的具体页面 
   图8具体页面   
   ![](https://support.huaweicloud.com/nscf-saasapp/zh-cn_image_0000002140616668.png)
   
   
4. 配置定位的页面组件，实现页面加载时自动定位至该组件 
   图9自动定位至该组件   
   ![](https://support.huaweicloud.com/nscf-saasapp/zh-cn_image_0000002140774772.png)
   
   
 
#### 新增页面方式
**方式1**：通过框架设计中模块+页面可直接勾选生成原型后，生成对应菜单下的页面
图10是否生成菜单   
![](https://support.huaweicloud.com/nscf-saasapp/zh-cn_image_0000002176055837.png)
图11生成菜单   
![](https://support.huaweicloud.com/nscf-saasapp/zh-cn_image_0000002175934241.png)
**方式2：**资源管理-新增页面或者初始化进入应用时，可选择页面类型（基础页面、弹窗页面）或者页面的布局模式（栅格布局、画布布局）
- 基础页面：常用的页面类型，固定了页面尺寸，常用于菜单间页面跳转
- 弹窗页面：常用的弹窗类型，拥有弹窗尺寸，常用于按钮打开的弹窗页面
- 栅格布局：通过行列属性，结合布局组件实现更加规整的页面布局
- 画布布局：自由摆放组件位置，结合素材组件实现更加丰富的页面布局
图12画面布局   
![](https://support.huaweicloud.com/nscf-saasapp/zh-cn_image_0000002140616672.png)
图13创建页面   
![](https://support.huaweicloud.com/nscf-saasapp/zh-cn_image_0000002140774780.png)
**方式3**：选中文件夹（菜单）通过更多操作菜单中-新增页面，默认在该文件夹下新增栅格布局类的基础页面
图14新增页面   
![](https://support.huaweicloud.com/nscf-saasapp/zh-cn_image_0000002176055841.png)
拖动页面可移动页面至目标文件夹
图15移动页面至目标文件夹   
![](https://support.huaweicloud.com/nscf-saasapp/zh-cn_image_0000002175934249.png)
#### 配置页面布局
通过菜单导航设计-插入，选择要插入的组件，组件是构成一个应用的最小单位，组件的承载单位为页面，组件的类型有布局、图表、素材、分析仪、数据大屏、数据文档、表单和高级组件。
图16插入   
![](https://support.huaweicloud.com/nscf-saasapp/zh-cn_image_0000002140616676.png)
#### 页面基础配置
页面为组成应用的基本单元，并在"资源管理"中进行管理。页面的配置分为两个方面，一方面为配置页面本身的基础信息和样式，另一方面为在画布中配置页面中包含的组件，如下图所示。
图17页面基础配置   
![](https://support.huaweicloud.com/nscf-saasapp/zh-cn_image_0000002140774784.png)