Expansion panels - 擴展面板

Expansion panels contain creation flows and allow lightweight editing of an element.

【翻譯】
擴展面板包含創(chuàng)建流程，并允許元素的輕量級編輯绒障。

An expansion panel is a lightweight container that may either stand alone or be connected to a larger surface, such as a card.

They may be used for a variety of tasks, such as:

To edit a setting
To create a tool for ad campaigns

【翻譯】
擴展面板是輕質(zhì)的容器募寨，其可以獨立或連接到更大的表面咽扇，例如卡殉摔。
它們可用于各種任務(wù)酒奶，例如：
編輯設(shè)置
為廣告系列創(chuàng)建工具

Usage - 用法
Editing
Creating flows

【翻譯】
編輯
創(chuàng)建流程

Behavior - 行為
Expand
Collapse
Focus

【翻譯】
擴展
折疊
焦點

Usage - 用法

An expansion panel is a lightweight container that may either stand alone or be connected to a larger surface, such as a card.

【翻譯】
擴展面板是輕質(zhì)容器婉弹，其可以獨立或連接到更大的表面矢否，例如卡慎陵。

Editing - 編輯
Expansion panels are best used for lightweight editing of an element, such as selecting a value for a setting.
For example, an app that contains tables may use expansion panels to adjust settings on table elements.

【翻譯】
擴展面板最適用于對元素進行輕量級編輯眼虱，例如為設(shè)置選擇值。
例如席纽，包含表格的應(yīng)用程序可以使用擴展面板來調(diào)整表格元素的設(shè)置捏悬。

Creation flows - 創(chuàng)造流程
Expansion panels may be displayed in a sequence to form creation flows.
For example, a tool for creating ad campaigns may display a series of expansion panels to collect campaign details.

【翻譯】
擴展面板可以按順序顯示以形成創(chuàng)建流程。
例如润梯，用于創(chuàng)建廣告系列的工具可能會顯示一系列擴展面板过牙，用于收集廣告系列詳細信息。

[圖片上傳失敗...(image-cfd49b-1552295358828)]
Various expansion panels

【翻譯】
各種擴展面板

Behavior - 行為

Collapsed panel - 折疊面板

A collapsed panel displays summary information. Upon selecting the collapsed panel, it expands to display the full expansion panel.

【翻譯】
展開前面板顯示摘要信息纺铭。選擇展開前面板后寇钉，它會展開以顯示完全展開面板。

[圖片上傳失敗...(image-bb479b-1552295358828)]
Example of a collapsed panel

【翻譯】
折疊面板示例

**Expanded panel - 展開面板 **

Upon selection, a collapsed panel expands, allowing users to add or edit information.

Helper text may be added to the panel to assist the user.

【翻譯】
選擇后舶赔，展開的面板會展開扫倡，允許用戶添加或編輯信息。
幫助文本可以添加到面板以幫助用戶竟纳。

image

Example of an extended panel

【翻譯】
擴展面板示例

Focus state - 焦點狀態(tài)

An expansion panel may use a focus state (by using a grey background on the list item) to provide focus to individual list items.

On a keyboard, users may traverse through list items by using the Tab key.

【翻譯】
擴展面板可以使用聚焦?fàn)顟B(tài)（通過使用列表項目上的灰色背景）來向單個列表項目提供焦點撵溃。
在鍵盤上，用戶可以使用Tab鍵遍歷列表項锥累。

image

【翻譯】
背景
灰色200
懸停時展開圖標(biāo)缘挑，然后按
24dp x 24dp 54％黑色

Specs - 規(guī)格

Label - 標(biāo)簽
Font: Roboto Regular 15sp

【翻譯】
字體：Roboto Regular 15sp

Padding - 填充
Top and bottom padding: 16dp
Left and right padding: 24dp

【翻譯】
頂部和底部填充：16dp
左右填充：24dp