跳至主要內容
版本:v8

結構

Ionic Framework 提供了幾種不同的佈局,可用於構建應用程式的結構。從單頁佈局到分割窗格檢視和模態視窗。

最簡單的可用佈局由頁首內容組成。應用程式中的大多數頁面通常都具有這兩者,但使用內容不需要頁首。

雖然頁首中的工具列顯示在內容上方,但頁尾顯示在內容下方。頁首和頁尾也可以在同一個頁面上一起使用。

索引標籤佈局

由水平索引標籤組成的佈局可用於讓使用者快速切換內容檢視。每個索引標籤可以使用路由出口nav來包含靜態內容或導航堆疊。

行動應用程式中的標準佈局包括透過點擊按鈕或從側邊滑動開啟來切換側邊選單的功能。側邊選單通常用於導航,但它們可以包含任何內容。

分割窗格佈局

分割窗格佈局具有更複雜的結構,因為它可以結合之前的佈局。當視窗大小超過指定的中斷點時,它允許顯示多個檢視。如果裝置的螢幕尺寸低於特定尺寸,則分割窗格檢視將會隱藏。

預設情況下,當螢幕大於 768pxmd 中斷點時,將顯示分割窗格檢視,但可以透過設定 when 屬性來自訂為使用不同的中斷點。以下範例中,分割窗格包含一個選單,該選單對於 xs 螢幕及以上可見,或當視窗大於 0px 時可見。這將顯示所有螢幕尺寸的分割窗格。

重要的是要注意,具有與分割窗格指定的 contentId 匹配的 id 的元素將是始終可見的主要內容。這可以是任何元素,包括nav路由出口索引標籤