跳至主要内容
版本:v8

结构

Ionic Framework 提供了几种不同的布局,可用于构建应用程序。从单页布局到拆分窗格视图和模态。

最简单的布局包含一个 页眉内容。应用程序中的大多数页面通常都包含这两个部分,但要使用内容并不需要页眉。

页眉中的工具栏出现在内容上方,而页脚出现在内容下方。页眉和页脚也可以在同一页面上一起使用。

选项卡布局

包含水平 选项卡 的布局可用于让用户快速在内容视图之间切换。每个选项卡都可以包含静态内容或使用 路由出口导航 的导航堆栈。

移动应用程序中的一种标准布局包括通过单击按钮或从侧面滑动打开来切换侧面 菜单 的功能。侧边菜单通常用于导航,但它们可以包含任何内容。

拆分窗格布局

一个 拆分窗格 布局具有更复杂的结构,因为它可以组合之前的布局。当视口大于指定的断点时,它允许显示多个视图。如果设备的屏幕尺寸小于某个尺寸,则拆分窗格视图将被隐藏。

默认情况下,拆分窗格视图将在屏幕大于 768pxmd 断点时显示,但可以通过设置 when 属性自定义以使用不同的断点。以下是一个示例,其中拆分窗格包含一个菜单,该菜单在 xs 屏幕及以上可见,或者当视口大于 0px 时可见。这将在所有屏幕尺寸上显示拆分窗格。

重要的是要注意,具有与拆分窗格指定的 contentId 相匹配的 id 的元素将始终可见的主要内容。这可以是任何元素,包括 导航路由出口选项卡