可展開項目

可展開項目是自訂方塊,會以內嵌方式顯示額外內容。

可展開的項目方塊

可展開的項目可讓應用程式在螢幕較小的空間中提供高密度內容。如果您要讓應用程式保持精簡,同時讓使用者快速存取其他內容,請使用此元件。

使用這個元件可讓使用者執行下列工作:

  1. 顯示更多清單項目 (方塊、資訊卡)
  2. 顯示更多文字

圖解

展開清單
方塊必須置中對齊。

A. 標籤
您可以自訂標籤文字。預設值為「顯示更多」。

B. 容器
按鈕必須包含容器邊框。

C. 展開圖示
預設圖示為朝向的 V 形標記,您可以自訂或移除這個標記。圖示與 LTR 語言語言代碼向右對齊,並靠左對齊。

展開文字
方塊必須置中對齊。

A. 標籤
您可以自訂標籤文字。預設值為「更多」。

B. 容器
按鈕有「有外框」和「無外框」兩種變化版本。

C. 展開圖示
預設圖示為朝向的 V 形標記,您可以自訂或移除這個標記。圖示與 LTR 語言語言代碼向右對齊,並靠左對齊。

行為

展開清單

輕觸方塊即可展開並顯示清單中的更多項目。展開動作會以動畫方式顯示,隱藏「顯示更多」文字,然後一次顯示其他項目。您可以自訂處於收合狀態所顯示的項目數量。建議的項目數量為三個。

可展開式文字

輕觸方塊即可展開並顯示更多文字。展開動作會以動畫呈現,隱藏「更多」文字並一次顯示其他項目。您可以自訂收合狀態中顯示的文字行數。建議行數為 8 行。

輕觸目標包含整個文字區域,而不只是按鈕。

方塊樣式

展開清單

圖示大小:20dp x 20dp
圖示顏色:On Surface
高度:32dp
寬度:視文字和語言而定
筆劃:1dp
標籤樣式:說明文字 1
標籤顏色:On Surface

可展開式文字

圖示大小:20dp x 20dp
圖示顏色:On Surface
高度:32dp
寬度:視文字和語言而定
筆劃:0 或 1dp
填滿:無
標籤樣式:說明文字 1
標籤顏色:在表面上

邊框間距

不論是清單變化版本和可展開項目元件的文字變化版本,方塊都應包含下列邊框間距值:

  • 頂端邊框間距:8dp
  • 底部間距:16dp

使用方法

可展開式項目使用範例:

包含 3 個元件範例