Bottom sheets - 底部菜單

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

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

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.

【翻譯】
模態(tài)底部菜單主要用于移動設(shè)備掩蛤，還可以顯示來自其他應(yīng)用的深層鏈接內(nèi)容陈肛。
持久性底部表單與應(yīng)用程序集成以顯示支持內(nèi)容句旱。

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

【翻譯】
模態(tài)底部菜單：高于應(yīng)用程序
持久的底部表單：與應(yīng)用程序相同的高度

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.

【翻譯】
有兩種主要類型的底層：
模態(tài)底部菜單是菜單或簡單對話框的替代選項(xiàng)畅涂。他們還可以提供其他應(yīng)用程序的深層鏈接內(nèi)容。它們主要用于移動立宜。
持久的底部表單提供應(yīng)用程序內(nèi)容臊岸。

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.

【翻譯】
從高度區(qū)分模態(tài)和持久性底部表單帅戒。 模態(tài)底部頁面的高度高于應(yīng)用程序的內(nèi)容; 而持久性底部表單與應(yīng)用程序保持在相同的高度逻住，并與其內(nèi)容集成。
在較大的屏幕上瞎访，空間較少受限制扒秸，使用替代的表面和組件冀瓦，如簡單的對話框和菜單可能比底部表更合適翼闽。

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

【翻譯】
模式底部滑塊在應(yīng)用程序的內(nèi)容肄程。

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

【翻譯】
持久的底部圖是應(yīng)用程序布局的一個(gè)組成部分选浑。

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.

【翻譯】
持久性底部表單顯示補(bǔ)充主視圖的應(yīng)用內(nèi)內(nèi)容古徒。它仍然可見，即使不常使用代态，停留在同一高度作為一個(gè)應(yīng)用程序蹦疑，并與其內(nèi)容集成萨驶。

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

【翻譯】
在獨(dú)特的表面上引入新內(nèi)容
顯示與主要內(nèi)容的價(jià)值相等的內(nèi)容

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

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

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

【翻譯】
持久的底部表單使地圖細(xì)節(jié)在屏幕上保持在地圖上核畴。

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

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

Mobile - 移動設(shè)備
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.

【翻譯】
持久的底部表單是全寬或插入花鹅，由其包含的內(nèi)容的寬度枫浙，整體UI，基本內(nèi)容和風(fēng)格選擇決定真友。

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.

【翻譯】
在桌面上桅打，持久的底部表單可以轉(zhuǎn)變成另一表面或片材愈案。

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.

【翻譯】
在桌面上站绪，通常在持久性底部表單中呈現(xiàn)的內(nèi)容可能移動到新的材料片上恢准。 在較大的屏幕上，可能更適合在位于界面左側(cè)的材料片上顯示底部表單的內(nèi)容涂召。

Modal bottom sheets - 模態(tài)底部菜單

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.

【翻譯】
模態(tài)底部菜單是菜單或簡單對話框的替代選項(xiàng)芹扭，可以顯示來自其他應(yīng)用程序的深層鏈接內(nèi)容赦抖。 它們顯示在其他UI元素上方队萤，必須將其關(guān)閉才能與底層內(nèi)容進(jìn)行交互矫钓。 當(dāng)模態(tài)底部頁面滑入屏幕時(shí)新娜，屏幕的其余部分變暗，使焦點(diǎn)對準(zhǔn)底部頁面还惠。

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

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

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

【翻譯】
模態(tài)底部菜單蚕键，在網(wǎng)格中有一組動作

****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.

【翻譯】
模態(tài)底部菜單可能：
將列表或網(wǎng)格中的操作替換為菜單或簡單對話框锣光。
當(dāng)菜單沒有明顯的入口點(diǎn)時(shí)，顯示上下文菜單蹬刷。
優(yōu)先考慮它們包含的元素的可見性办成。
模態(tài)底部表可以顯示長菜單項(xiàng)名稱椎镣，帶有子文本的菜單項(xiàng)状答，以及與菜單項(xiàng)相關(guān)聯(lián)的圖標(biāo)。
顯示菜單項(xiàng)時(shí)拍摇，完全展開的模態(tài)底部頁面與應(yīng)用欄底部保持最小8dp的距離充活。

The bottom sheet may associate icons with menu items.

【翻譯】
底部工作表可以將圖標(biāo)與菜單項(xiàng)相關(guān)聯(lián)蜡娶。

Menu items with subtext

【翻譯】
帶子文本的菜單項(xiàng)

****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.

【翻譯】
模態(tài)底部菜單可用于提供與來自其他應(yīng)用程序的內(nèi)容或控件的深層鏈接窖张。這些跨越了全屏幕寬度宿接。

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

【翻譯】
深層鏈接的模態(tài)底部工作表顯示一個(gè)術(shù)語的定義睦霎，而用戶不必打開字典應(yīng)用程序。

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.

【翻譯】
右側(cè)的應(yīng)用程序顯示包含左側(cè)應(yīng)用程序內(nèi)容的底部工作表蛤高。這允許用戶在不離開當(dāng)前應(yīng)用的情況下查看來自另一應(yīng)用的內(nèi)容襟齿。

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.

【翻譯】
底部工作表可能包含在其他應(yīng)用程式內(nèi)執(zhí)行深層導(dǎo)覽的連結(jié)猜欺。
這些鏈接可能：
允許用戶在其他應(yīng)用內(nèi)深入多個(gè)級別
返回到他們開始的水平
然而开皿，這些深層鏈接可能不允許用戶在層次結(jié)構(gòu)中向上導(dǎo)航：它們可以僅停留在初始級別，更深或返回到初始級別笋妥。
或者春宣，深層鏈接可以將用戶從底部頁面完全導(dǎo)航到另一視圖嫉你。
要從底部工作表的深層鏈接啟用向上導(dǎo)航幽污，請?zhí)峁┮粋€(gè)顯式鏈接距误，通過溢出菜單打開應(yīng)用程序。 深層鏈接的底部工作表中的操作可能導(dǎo)致打開父應(yīng)用程序趁俊，例如使用“添加聯(lián)系人”操作刑然。

正確的示范

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

【翻譯】
正確的示范
完全展開的模態(tài)底部頁面在應(yīng)用欄中提供一個(gè)X.

錯誤的示范

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

【翻譯】
錯誤的示范
當(dāng)向下導(dǎo)航到內(nèi)容層次結(jié)構(gòu)中時(shí)，顯示向上箭頭是適當(dāng)?shù)摹?/p>

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

【翻譯】
模態(tài)底部菜單主要是一個(gè)移動組件武鲁，它們在縱向和橫向視圖中跨越全屏幕寬度蝠检。

正確的示范

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

【翻譯】
正確的示范
對于模態(tài)底部菜單理卑，最初不應(yīng)用程序欄重疊。允許用戶點(diǎn)按/滑動即可關(guān)閉憔涉。

錯誤的示范

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

【翻譯】
錯誤的示范
底部菜單的高度應(yīng)由其包含的內(nèi)容物的量決定兜叨。

正確的示范

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

【翻譯】
正確的示范
當(dāng)顯示長列表時(shí)国旷，模態(tài)底部菜單可以在內(nèi)部滾動，并擴(kuò)展超過16：9關(guān)鍵點(diǎn)履羞。

錯誤的示范

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.

【翻譯】
錯誤的示范
對于模態(tài)底部菜單忆首，最初不應(yīng)用程序欄重疊涂身。保留一個(gè)區(qū)域供用戶點(diǎn)擊底部工作表外部以將其關(guān)閉蛤售。

****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.

【翻譯】
在更大的屏幕上考慮模態(tài)底部表格的替代方案。 因?yàn)榈撞宽撁婵赡艹霈F(xiàn)在遠(yuǎn)離用戶點(diǎn)擊或觸摸以召喚它們的位置揣钦，所以它將用戶的注意力分割在屏幕的兩個(gè)不同部分上冯凹。
因?yàn)樽烂婵臻g不太受約束炒嘲，所以它可以支持多種替代模態(tài)底部表單夫凸。

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

【翻譯】
菜單保持接近交互點(diǎn)的動作選擇夭拌。不建議將這些菜單選項(xiàng)放在底部工作表中。

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

【翻譯】
在大屏幕上使用模式底部頁面使用適當(dāng)?shù)牟季譃轭~外的空間量镶骗。

A grid list bottom sheet on tablet

【翻譯】
平板電腦上的網(wǎng)格列表底部菜單

A long list bottom sheet on tablet

【翻譯】
平板電腦上的一個(gè)長列表

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.

【翻譯】
通過觸摸應(yīng)用欄中的顯式控件（例如X）或觸摸系統(tǒng)后退按鈕（Android）鼎姊，可以向下滑動底部窗格來關(guān)閉底部窗格此蜈。
模態(tài)底部菜單也可以通過觸摸底部菜單的外側(cè)來消除噪生。

Dismiss by swiping the bottom sheet down

【翻譯】
通過向下滑動底部窗格來關(guān)閉

Dismiss by touching outside of the bottom sheet surface

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

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

【翻譯】
觸摸“X”關(guān)閉操作即可關(guān)閉（如果有應(yīng)用欄）

Specs - 規(guī)格

The following specs are provided for mobile apps.

【翻譯】
為移動應(yīng)用提供以下規(guī)范战授。
**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％
標(biāo)題（可選）：Roboto Regular 16sp璃吧，＃000 54％
默認(rèn)底部表單背景填充：#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
列表項(xiàng)高度：48dp
列表圖標(biāo)：24x24dp畜挨，中間垂直對齊
與圖標(biāo)相關(guān)聯(lián)的文字：32dp水平填充

Keylines for list-style bottom sheet in a mobile app

【翻譯】
在移動應(yīng)用程序中的列表式底部表單

List-style bottom sheet in a mobile app

【翻譯】
移動應(yīng)用中的列表樣式底部表單

****List-style sheet with header - 帶標(biāo)題的列表樣式表****
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
列表項(xiàng)高度：48dp

列表圖標(biāo)：24x24dp巴元，中間垂直對齊
與圖標(biāo)相關(guān)聯(lián)的文字：32dp水平填充
列表標(biāo)題高度：56dp

Keylines for list-style sheet with header

【翻譯】
列表樣式表的標(biāo)題

List-style sheet with header

【翻譯】
帶標(biāo)題的列表樣式表

Grid-style bottom sheet with icons - 網(wǎng)格樣式底部工作表與圖標(biāo)
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
網(wǎng)格列表之間的垂直間距：16dp
網(wǎng)格列表圖標(biāo)：48x48dp逮刨，中間垂直對齊修己，均勻分布在網(wǎng)格上
網(wǎng)格列表標(biāo)簽：16dp高，每個(gè)圖標(biāo)下方中心對齊
網(wǎng)格下面的填充：24dp

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

【翻譯】
用于網(wǎng)格樣式底部工作表的Keylines，包含其他應(yīng)用程序的一組標(biāo)準(zhǔn)操作

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

【翻譯】
網(wǎng)格樣式的底部表單，包含其他應(yīng)用程序的一組標(biāo)準(zhǔn)操作

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.

【翻譯】
從屏幕的底部向上滑動并且最初覆蓋屏幕的一部分啥刻。
底部表單的初始高度相對于其包含的列表項(xiàng)（或網(wǎng)格行）的高度。 底部紙張最初不應(yīng)該具有超過其16：9比率關(guān)鍵線的高度娄涩，這取決于它包含多少內(nèi)容映跟。 底部頁可以向上滑動以填充屏幕的高度努隙，然后內(nèi)容在內(nèi)部滾動。

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

【翻譯】
底部菜單的初始高度不應(yīng)超過16：9比率咽斧。

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

【翻譯】
底部表單的最小高度相對于其包含的列表項(xiàng)的高度张惹。

****Specs for desktop and tablet apps - 桌面設(shè)備和平板電腦應(yīng)用的規(guī)格****
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.

【翻譯】
桌面和平板電腦上的模態(tài)和插入持續(xù)底頁使用這些最小和最大寬度宛逗。
底部菜單的寬度由整個(gè)界面的結(jié)構(gòu)確定盾剩，其通潮肭唬基于增量。 在頁面網(wǎng)格上恭垦，底部工作表的最大寬度相對于頁面網(wǎng)格及其所依賴的內(nèi)容格嗅。
例如屯掖，在960dp的寬屏幕上，如果使用應(yīng)用程序欄的高度（64dp）作為增量粪摘，則會導(dǎo)致十五個(gè)總增量寬。 最少一個(gè)增量應(yīng)該將底部紙張與屏幕邊緣分開苔悦，底部紙張本身應(yīng)至少有六個(gè)增量寬度椎咧。

Breakpoints for various desktop screen sizes

【翻譯】
各種桌面屏幕尺寸的斷點(diǎn)