Bottom sheets - 底部菜單

Bottom sheets slide up from the bottom of the screen to reveal more content.

【翻譯】
底部菜單從屏幕底部向上滑動以顯示更多內容。

Modal bottom sheets are primarily for mobile and can also present deep-linked content from other apps.
Persistent bottom sheets integrate with the app to display supporting content.

【翻譯】
模態底部菜單主要用于移動設備，還可以顯示來自其他應用的深層鏈接內容。
持久性底部表單與應用程序集成以顯示支持內容。

Interaction - 相互作用
Bottom sheets are displayed only as a result of a user-initiated action.

【翻譯】
只有由用戶啟動的操作才會顯示底部菜單。

Elevation - 高度
Modal bottom sheets: Higher than the app
Persistent bottom sheets: Same elevation as the app

【翻譯】
模態底部菜單：高于應用程序
持久的底部表單：與應用程序相同的高度

Alternatives - 備擇方案
Simple dialogs Menus

【翻譯】
簡單對話框
菜單

Usage - 用法

There are two major types of bottom sheets:
Modal bottom sheets are alternatives to menus or simple dialogs. They can also present deep-linked content from other apps. They are primarily for mobile.
Persistent bottom sheets present in-app content.

【翻譯】
有兩種主要類型的底層：
模態底部菜單是菜單或簡單對話框的替代選項。他們還可以提供其他應用程序的深層鏈接內容。它們主要用于移動。
持久的底部表單提供應用程序內容。

Elevation distinguishes modal from persistent bottom sheets. Modal bottom sheets rest at a higher elevation than the app’s content; whereas persistent bottom sheets rest at the same elevation as the app and integrate with its content.
On larger screens, where space is less constrained, using alternative surfaces and components such as simple dialogsand menus may be more appropriate than bottom sheets.

【翻譯】
從高度區分模態和持久性底部表單。 模態底部頁面的高度高于應用程序的內容; 而持久性底部表單與應用程序保持在相同的高度，并與其內容集成。
在較大的屏幕上，空間較少受限制，使用替代的表面和組件，如簡單的對話框和菜單可能比底部表更合適。

Modal bottom sheets slide in over an app’s content.

【翻譯】
模式底部滑塊在應用程序的內容。

Persistent bottom sheets are an integral part of an app’s layout.

【翻譯】
持久的底部圖是應用程序布局的一個組成部分。

Persistent Bottom Sheets - 持久性底部表單

Persistent bottom sheets display in-app content that supplements the main view. It remains visible even when not actively in use, resting at the same elevation as an app and integrating with its content.

【翻譯】
持久性底部表單顯示補充主視圖的應用內內容。它仍然可見，即使不常使用，停留在同一高度作為一個應用程序，并與其內容集成。

****Usage - 用法****
To introduce new content on a unique surface
To display content equal in value to the primary content

【翻譯】
在獨特的表面上引入新內容
顯示與主要內容的價值相等的內容

Introducing a persistent bottom sheet into a layout with a floating action button (FAB) may cause the FAB to move vertically.

【翻譯】
使用浮動操作按鈕（FAB）將永久性底部表單引入布局可能會導致FAB垂直移動。

A persistent bottom sheet enables place details to remain on-screen while a map is panned around.

【翻譯】
持久的底部表單使地圖細節在屏幕上保持在地圖上。

Playback controls remain visible on a persistent bottom sheet regardless of user navigation in the main view.

【翻譯】
無論用戶在主視圖中是否導航，播放控件都會保留在持久性底部窗格上。

Mobile - 移動設備
Mobile persistent bottom sheets are full width in both portrait and landscape view.

【翻譯】
移動持久表單在縱向和橫向視圖中都是全寬。

Tablet/Desktop - 平板電腦/桌面
Persistent bottom sheets are either full width or inset, as determined by the width of the content they contain, overall UI, underlying content, and stylistic choices.

【翻譯】
持久的底部表單是全寬或插入，由其包含的內容的寬度，整體UI，基本內容和風格選擇決定。

A full-width persistent bottom sheet on tablet

【翻譯】
在平板電腦上的全寬持久底部表單

An inset persistent bottom sheet on tablet

【翻譯】
在平板電腦上的插入永久性底部表單

On desktop, a persistent bottom sheet may transform into another surface or sheet of material.

【翻譯】
在桌面上，持久的底部表單可以轉變成另一表面或片材。

On desktop, content ordinarily presented in a persistent bottom sheet might move onto a new sheet of material. On larger screens it may be more appropriate to display bottom sheet content on a sheet of material positioned on the left side of the interface.

【翻譯】
在桌面上，通常在持久性底部表單中呈現的內容可能移動到新的材料片上。 在較大的屏幕上，可能更適合在位于界面左側的材料片上顯示底部表單的內容。

Modal bottom sheets - 模態底部菜單

Modal bottom sheets are alternatives to menus, or simple dialogs, and can display deep-linked content from another app. They appear above other UI elements and must be dismissed in order to interact with the underlying content. When a modal bottom sheet slides into the screen, the rest of the screen dims, giving focus to the bottom sheet.

【翻譯】
模態底部菜單是菜單或簡單對話框的替代選項，可以顯示來自其他應用程序的深層鏈接內容。 它們顯示在其他UI元素上方，必須將其關閉才能與底層內容進行交互。 當模態底部頁面滑入屏幕時，屏幕的其余部分變暗，使焦點對準底部頁面。

A modal bottom sheet with a set of actions in a list

【翻譯】
在列表中有一組動作的模態底部菜單

A modal bottom sheet with a set of actions in a grid

【翻譯】
模態底部菜單，在網格中有一組動作

****Usage - 用法****
Modal bottom sheets may:
Present actions in a list or grid as an alternative to menus or simple dialogs.
Display a contextual menu, when there is no obvious entry point for a menu.
Prioritize the visibility of the elements they contain.

Modal bottom sheets can display long menu item names, menu items with subtext, and icons associated with menu items.
When displaying menu items, fully-expanded modal bottom sheets maintain a minimum 8dp distance from the bottom of the app bar.

【翻譯】
模態底部菜單可能：
將列表或網格中的操作替換為菜單或簡單對話框。
當菜單沒有明顯的入口點時，顯示上下文菜單。
優先考慮它們包含的元素的可見性。
模態底部表可以顯示長菜單項名稱，帶有子文本的菜單項，以及與菜單項相關聯的圖標。
顯示菜單項時，完全展開的模態底部頁面與應用欄底部保持最小8dp的距離。

The bottom sheet may associate icons with menu items.

【翻譯】
底部工作表可以將圖標與菜單項相關聯。

Menu items with subtext

【翻譯】
帶子文本的菜單項

****Deep linking - 深層鏈接****
Modal bottom sheets may be used to provide deep links to content or controls from another app. These span the full screen width.

【翻譯】
模態底部菜單可用于提供與來自其他應用程序的內容或控件的深層鏈接。這些跨越了全屏幕寬度。

A deep-linked modal bottom sheet displays a definition of a term without the user having to open the dictionary app.

【翻譯】
深層鏈接的模態底部工作表顯示一個術語的定義，而用戶不必打開字典應用程序。

The app on the right displays a bottom sheet containing content from the app on the left. This allows the user to view content from another app without leaving their current app.

【翻譯】
右側的應用程序顯示包含左側應用程序內容的底部工作表。這允許用戶在不離開當前應用的情況下查看來自另一應用的內容。

Bottom sheets may contain links that perform deep navigation within another app. These links may:

Allow the user to travel multiple levels deep within another app
Return to the level on which they started
However, these deep links may not allow the user to navigate upward in the hierarchy: they may only stay at the initial level, go deeper, or travel back to the initial level.

Alternatively, deep links may navigate the user away from the bottom sheet entirely, into another view.

To enable upward navigation from the bottom sheet’s deep links, offer an explicit link to open the application via an overflow menu. Actions within the deep-linked bottom sheet may result in opening the parent application, such as with an “add contact” action.

【翻譯】
底部工作表可能包含在其他應用程式內執行深層導覽的連結。
這些鏈接可能：
允許用戶在其他應用內深入多個級別
返回到他們開始的水平
然而，這些深層鏈接可能不允許用戶在層次結構中向上導航：它們可以僅停留在初始級別，更深或返回到初始級別。
或者，深層鏈接可以將用戶從底部頁面完全導航到另一視圖。
要從底部工作表的深層鏈接啟用向上導航，請提供一個顯式鏈接，通過溢出菜單打開應用程序。 深層鏈接的底部工作表中的操作可能導致打開父應用程序，例如使用“添加聯系人”操作。

正確的示范

Do.
Fully-expanded modal bottom sheets provide an X in the app bar.

【翻譯】
正確的示范
完全展開的模態底部頁面在應用欄中提供一個X.

錯誤的示范

Don't.
When navigating downwards into the content hierarchy, it would be appropriate to show an Up arrow.

【翻譯】
錯誤的示范
當向下導航到內容層次結構中時，顯示向上箭頭是適當的。

****Mobile - 移動設備****
Modal bottom sheets are primarily a mobile component, where they span full screen width in both portrait and landscape views.

【翻譯】
模態底部菜單主要是一個移動組件，它們在縱向和橫向視圖中跨越全屏幕寬度。

正確的示范

Do.
For modal bottom sheets, don’t initially overlap the app bar. Allow the user to tap/swipe to dismiss.

【翻譯】
正確的示范
對于模態底部菜單，最初不應用程序欄重疊。允許用戶點按/滑動即可關閉。

錯誤的示范

Don't.
The height of the bottom sheet should be dictated by the amount of content it contains.

【翻譯】
錯誤的示范
底部菜單的高度應由其包含的內容物的量決定。

正確的示范

Do.
When displaying a long list, modal bottom sheets can scroll internally and expand past the 16:9 keyline.

【翻譯】
正確的示范
當顯示長列表時，模態底部菜單可以在內部滾動，并擴展超過16：9關鍵點。

錯誤的示范

Don't.
For modal bottom sheets, don’t initially overlap the app bar. Retain an area for the user to tap outside the bottom sheet to dismiss it.

【翻譯】
錯誤的示范
對于模態底部菜單，最初不應用程序欄重疊。保留一個區域供用戶點擊底部工作表外部以將其關閉。

****Tablet/Desktop - 平板電腦/桌面****
Consider alternatives to modal bottom sheets on larger screens. Because bottom sheets may appear far from the place where the user clicked or touched to summon them, it splits the user’s attention across two different parts of the screen.
Because desktop space is less constrained, it can support several alternatives to modal bottom sheets.

【翻譯】
在更大的屏幕上考慮模態底部表格的替代方案。 因為底部頁面可能出現在遠離用戶點擊或觸摸以召喚它們的位置，所以它將用戶的注意力分割在屏幕的兩個不同部分上。
因為桌面空間不太受約束，所以它可以支持多種替代模態底部表單。

Menus keep the choice of actions close to the point of interaction. Placing these menu options into a bottom sheet would not be recommended.

【翻譯】
菜單保持接近交互點的動作選擇。不建議將這些菜單選項放在底部工作表中。

Make modal bottom sheets on large screens use appropriate layouts for the amount of extra space.

【翻譯】
在大屏幕上使用模式底部頁面使用適當的布局為額外的空間量。

A grid list bottom sheet on tablet

【翻譯】
平板電腦上的網格列表底部菜單

A long list bottom sheet on tablet

【翻譯】
平板電腦上的一個長列表

Behavior - 行為

Bottom sheets can be dismissed by swiping the bottom sheet down, by touching an explicit control such as an X in the app bar, or by touching the system back button (Android).

Modal bottom sheets can also be dismissed by touching outside of the bottom sheet.

【翻譯】
通過觸摸應用欄中的顯式控件（例如X）或觸摸系統后退按鈕（Android），可以向下滑動底部窗格來關閉底部窗格。
模態底部菜單也可以通過觸摸底部菜單的外側來消除。

Dismiss by swiping the bottom sheet down

【翻譯】
通過向下滑動底部窗格來關閉

Dismiss by touching outside of the bottom sheet surface

【翻譯】
通過觸摸底部菜單表面的外側來消除

Dismiss by touching the “X” dismiss action (if there is an app bar)

【翻譯】
觸摸“X”關閉操作即可關閉（如果有應用欄）

Specs - 規格

The following specs are provided for mobile apps.

【翻譯】
為移動應用提供以下規范。
**Font and color -字體和顏色 **

Text: Roboto Regular 16sp, #000 87%
Title (optional): Roboto Regular 16sp, #000 54%
Default bottom sheet background fill: #FFF
Transparent overlay fill: #000 20%

【翻譯】
文字：Roboto Regular 16sp，＃000 87％
標題（可選）：Roboto Regular 16sp，＃000 54％
默認底部表單背景填充：#FFF 透明覆蓋填充：＃000 20％

****List-style bottom sheet - 列表式底部表單****
Screen edge left & right margins: 16dp
Top and bottom margins: 8dp
List-item height: 48dp
List icons: 24x24dp, middle vertical alignment
Text associated with icon: 32dp horizontal padding

【翻譯】
屏幕邊緣左右邊距：16dp 頂部和底部邊距：8dp
列表項高度：48dp
列表圖標：24x24dp，中間垂直對齊
與圖標相關聯的文字：32dp水平填充

Keylines for list-style bottom sheet in a mobile app

【翻譯】
在移動應用程序中的列表式底部表單

List-style bottom sheet in a mobile app

【翻譯】
移動應用中的列表樣式底部表單

****List-style sheet with header - 帶標題的列表樣式表****
Screen edge left & right margins: 16dpSpace below the top list: 7dpDivider line: 1dpSpace above second bottom sheet: 8dpList-item height: 48dpList icons: 24x24dp, middle vertical alignmentText associated with icon: 32dp horizontal paddingList title height: 56dp

【翻譯】
屏幕邊緣左右邊距：16dp
頂部列表下方的空間：7dp
分隔線：1dp
第二底層上方的空間：8dp
列表項高度：48dp

列表圖標：24x24dp，中間垂直對齊
與圖標相關聯的文字：32dp水平填充
列表標題高度：56dp

Keylines for list-style sheet with header

【翻譯】
列表樣式表的標題

List-style sheet with header

【翻譯】
帶標題的列表樣式表

Grid-style bottom sheet with icons - 網格樣式底部工作表與圖標
Screen edge left & right margins: 24dpVertical space between grid lists: 16dpGrids list icons: 48x48dp, middle vertical alignment, equally distributed across the gridGrid list label: 16dp tall, center-aligned below each iconPadding below grid: 24dp

【翻譯】
屏幕邊緣左右邊距：24dp
網格列表之間的垂直間距：16dp
網格列表圖標：48x48dp，中間垂直對齊，均勻分布在網格上
網格列表標簽：16dp高，每個圖標下方中心對齊
網格下面的填充：24dp

Keylines for grid-style bottom sheet that contains a standard set of actions for other apps

【翻譯】
用于網格樣式底部工作表的Keylines，包含其他應用程序的一組標準操作

Grid-style bottom sheet that contains a standard set of actions for other apps

【翻譯】
網格樣式的底部表單，包含其他應用程序的一組標準操作

Bottom sheets slide up from the bottom of the screen and initially cover a portion of the screen.

The initial height of a bottom sheet is relative to the height of the list items (or grid rows) it contains. A bottom sheet should not initially have a height beyond its 16:9 ratio keyline, depending on how much content it contains. Bottom sheets may be swiped up to fill the height of the screen, with content that then scrolls internally.

【翻譯】
從屏幕的底部向上滑動并且最初覆蓋屏幕的一部分。
底部表單的初始高度相對于其包含的列表項（或網格行）的高度。 底部紙張最初不應該具有超過其16：9比率關鍵線的高度，這取決于它包含多少內容。 底部頁可以向上滑動以填充屏幕的高度，然后內容在內部滾動。

The initial height of a bottom sheet should not extend beyond the 16:9 ratio keyline.

【翻譯】
底部菜單的初始高度不應超過16：9比率。

The minimum height of a bottom sheet is relative to the height of the list items it contains.

【翻譯】
底部表單的最小高度相對于其包含的列表項的高度。

****Specs for desktop and tablet apps - 桌面設備和平板電腦應用的規格****
Modal and Inset persistent bottom sheets on desktop and tablet use these minimum and maximum widths.
The width of a bottom sheet is determined by the structure of the overall interface, which is typically based on increments. On a page grid, the maximum width of the bottom sheet is relative to the page grid and content it rests on.
For example, on a 960dp wide screen, if you use the height of the app bar (64dp) as your increment, it would result in fifteen total increments wide. A minimum of one increment should separate your bottom sheet from the screen edge, and the bottom sheet itself should be at least six increments wide.

【翻譯】
桌面和平板電腦上的模態和插入持續底頁使用這些最小和最大寬度。
底部菜單的寬度由整個界面的結構確定，其通常基于增量。 在頁面網格上，底部工作表的最大寬度相對于頁面網格及其所依賴的內容。
例如，在960dp的寬屏幕上，如果使用應用程序欄的高度（64dp）作為增量，則會導致十五個總增量寬。 最少一個增量應該將底部紙張與屏幕邊緣分開，底部紙張本身應至少有六個增量寬度。

Breakpoints for various desktop screen sizes

【翻譯】
各種桌面屏幕尺寸的斷點