结构
Ionic Framework 提供了几种不同的布局,可用于构建应用。从单页面布局到分屏视图和模态框。
页眉和页脚布局
页眉
可用的最简单布局由页眉和内容组成。应用中的大多数页面通常同时包含这两者,但使用内容时不一定要有页眉。
页脚
页眉中的工具栏出现在内容上方,而页脚则出现在内容下方。页眉和页脚也可以在同一页面上同时使用。
标签布局
可以使用水平标签布局让用户在内容视图之间快速切换。每个标签可以包含静态内容,也可以通过路由出口或nav 包含导航栈。
菜单布局
移动应用中的一种标准布局包括通过点击按钮或从侧面滑动来切换侧边菜单的功能。侧边菜单通常用于导航,但也可以包含任何内容。
分屏布局
分屏布局具有更复杂的结构,因为它可以结合前面的布局。当视口超过指定的断点时,它允许同时显示多个视图。如果设备的屏幕尺寸低于某个大小,分屏视图将被隐藏。
默认情况下,当屏幕大于 768px(即 md 断点)时,分屏视图会显示,但可以通过设置 when 属性来自定义使用不同的断点。以下示例中,分屏包含一个菜单,该菜单在 xs 屏幕及以上可见,即视口大于 0px 时。这将使分屏在所有屏幕尺寸下都显示。
需要注意的是,具有 id 且与分屏指定的 contentId 匹配的元素将是始终可见的主要内容。这可以是任何元素,包括 nav、路由出口或 标签。