---
order: 7
navTitle: 移动
---
# SuperPage移动页面

SuperPage移动页面应用于移动端展示和使用：

|应聘登记|请假管理|首页宫格|
| --- | --- | --- |
|![应聘登记](./images/resume.png)|![请假管理](./images/apply.png)|![首页宫格](./images/index.png)|

## 新建移动SuperPage{#new}

在新建SuperPage时，选择**移动**模板即可创建一个移动SuperPage。当该页面的内容制作完成后，还可以将页面加入到[移动APP](../../mobile/README.md)内进行查看。

![](./images/2021-07-21-16-41-51.png)

## 移动设计器{#designer}

根据移动模板完成新建后，[SuperPage设计器](../designer.md)中的画布区域将展示为移动端的效果，这也是与PC端SuperPage设计器的唯一区别。在制作移动内容时可根据该移动效果调整页面的布局和组件样式。

![移动设计器](./images/2021-07-23-17-20-19.png)

## 移动组件{#components}

SuperPage大多数组件在移动端查看时能够自适应调整为移动效果，并且为了使效果更好，组件区中还提供了一些移动组件，如[宫格](../components/mobile/mobilegrid.md)、[移动列表](../components/mobile/mobilelist.md)等。这些组件的使用不仅能够使页面呈现出来的效果更加自然、美观，还可以实现一些移动端才能够进行的操作，如侧滑等。

![移动组件](./images/2021-07-23-17-18-32.png)

:::tip

搭建移动SuperPage页面时，组件的使用方法不会发生改变，并且由于一些交互提供了移动端的属性设置，会使组件的展示适配移动端，如[显示对话框/悬浮面板](./action/show-dialog.md#display)的**显示方式**属性提供了**底部滑出**等。其他交互的具体使用方法可参考[交互文档](./action/README.md)。

:::