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

【翻译】
各种桌面屏幕尺寸的断点