分頁

標籤頁是總是成組出現的按鈕,並且彼此依賴:在任何給定時間只能有一個標籤頁處於活動狀態。

標註圖標
按鈕組件
非標籤式按鈕可以獨立於其他按鈕運作。

解剖學

1. 活動標籤圖標
2. 非活動標籤圖標
3. 活動標籤頁
4. 非活動標籤頁

規格

應用程式列中嵌套的標籤頁 - 左對齊

標註圖標
應用程式列和標題元件
規格、樣式指南等。

應用程式欄內嵌套標籤頁-靈活對齊

透過靈活的對齊方式,卡扣配置可以拉伸或壓縮以適應可用空間。

應用程式列中的標籤頁已折疊 – 抽屜選單

標註圖標
應用程式列和標題元件
規格、樣式指南等。

獨立標籤欄 – 左對齊

獨立標籤欄 – 靈活對齊

透過靈活的對齊方式,卡扣配置可以拉伸或壓縮以適應可用空間。

標籤頁字串溢出

縮放佈局

這些參考版面展示如何調整標籤頁以適應不同寬度和高度的螢幕。請注意,所有像素值均為渲染像素值,未進行任何下取樣或上取樣。

短高度範圍內的標準螢幕與寬螢幕

標準高度範圍內的標準螢幕與寬螢幕

高高度範圍內的標準螢幕與寬螢幕的比較

各種高度的超寬屏和超寬屏

款式

排版

字體樣式字體重量大小(dp)
3M 機身機器人中等的24
身體 3機器人常規的24

顏色

元素顏色(日間模式)色彩(夜間模式)
主要類型/圖標白色的白色 @ 88%
次要類型/圖標白色 @ 72%白色 @ 60%
標籤欄背景黑色的黑色的
標籤欄背景捲動黑色 @ 84%黑色 @ 88%
標籤頁圖示 - 啟動狀態白色的白色 @ 88%
標籤頁圖示 - 非活動狀態白色 @ 56%白色 @ 50%

漿紗

元素大小(dp)
主圖示44
輔助圖示36
圖示觸摸目標76

範例

標籤頁已摺疊。


應用程式列中嵌套的標籤頁。

獨立標籤欄。