Skip to main content

结构

Ionic Framework 提供了几种不同的布局，可用于构建应用。从单页面布局到分割窗格视图和模式。

¥Ionic Framework provides several different layouts that can be used to structure an app. From single page layouts, to split pane views and modals.

¥Header and Footer Layout

¥Header

最简单的可用布局由 header 和 content 组成。应用中的大多数页面通常都具有这两者，但使用内容不需要标题。

¥The most simple layout available consists of a header and content. Most pages in an app generally have both of these, but a header is not required in order to use content.

¥Footer

页眉中的工具栏显示在内容上方，而页脚则显示在内容下方。页眉和页脚也可以在同一页面上一起使用。

¥While a toolbar in a header appears above the content, a footer appears below the content. A header and a footer can also be used together on the same page.

选项卡布局​

¥Tabs Layout

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

¥A layout consisting of horizontal tabs can be used to let the user quickly change between content views. Each tab can contain static content or a navigation stack by using a router outlet or nav.

¥Menu Layout

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

¥A standard layout among mobile apps includes the ability to toggle a side menu by clicking a button or swiping it open from the side. Side menus are generally used for navigation, but they can contain any content.

分割窗格布局​

¥Split Pane Layout

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

¥A split pane layout has a more complex structure because it can combine the previous layouts. It allows for multiple views to be displayed when the viewport is above a specified breakpoint. If the device's screen size is below a certain size, the split pane view will be hidden.

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

¥By default, the split pane view will show when the screen is larger than 768px, or the md breakpoint, but this can be customized to use different breakpoints by setting the when property. Below is an example where the split pane contains a menu that is visible for xs screens and up, or when the viewport is larger than 0px. This will show the split pane for all screen sizes.

需要注意的是，id 与分割窗格指定的 contentId 相匹配的元素将是始终可见的主要内容。这可以是任何元素，包括 nav、路由插座 或 tabs。

¥It's important to note that the element with the id matching the contentId specified by the split pane will be the main content that is always visible. This can be any element, including a nav, router outlet, or tabs.

目录