我爱编程

Material design - Components – P

2017-02-24  本文已影响0人  两个朋友指甲

Pickers - 选择器

Pickers provide a simple way to select a single value from a pre-determined set.

Date pickers use a dialog window to select a single date on mobile.

Time pickers use a dialog to select a single time (in the hours:minutes format) on mobile. They adjust to a user’s preferred time setting.

【翻译】
选择器提供了从预定集合中选择单个值的简单方法。
日期选择器使用对话框窗口在移动设备上选择单个日期。
时间选择器使用对话框在移动设备上选择单一时间(小时:分钟格式)。它们根据用户的首选时间设置进行调整。

Alternatives - 备择方案
Segmented dropdown buttons - 分段下拉按钮

Usage - 用法

On mobile, pickers are best suited for display in a confirmation dialog.
For inline display, such as on a form, consider using compact controls such as segmented dropdown buttons.

【翻译】
在移动设备上,选择器最适合在确认对话框中显示。
对于在线显示(例如在表单上),请考虑使用紧凑控件(例如分段下拉按钮)。

Date pickers - 日期选择器

A dialog picker is used to select a single date on mobile.

The selected day is indicated by a filled circle. The current day is indicated by a different color and type weight.

【翻译】
对话框选择器用于在移动设备上选择单个日期。
所选日期由填充圆圈表示。当前日期由不同的颜色和类型重量表示。


Date and year picker: Light theme, portrait

【翻译】
日期和年份选择器:主题,影像

Swipe left to right to navigate through the months. Touch the year in the title bar to transition to the year view.

【翻译】
从左到右滑动浏览月份。触摸标题栏中的年份可转换到年份视图。


Date picker navigation

【翻译】
日期选择器导航

The picker view adapts to the device’s orientation.

【翻译】
拾取器视图适应设备的方向。

image

Date picker: Light theme, landscape

【翻译】
日期选择器:主题,影像

A dark theme picker can complement apps that have a dark theme.

【翻译】
黑暗的主题选择器可以补充具有黑暗主题的应用程序。

[图片上传失败...(image-46b48-1552294747008)]
Date picker: Dark theme, portrait

【翻译】
日期选择器:黑暗主题,影像

Landscape view of the dark theme picker.

【翻译】
黑暗的题材选择器的风景视图。

image

Date picker: Dark theme, landscape

【翻译】
日期选择器:黑暗主题,影像

Time pickers - 时间选择器

A time picker adjusts to a user’s preferred time setting, i.e. the 12-hour or 24-hour format.

【翻译】
时间选择器调整到用户的优选时间设置,即12小时或24小时格式。

A dialog picker is used to select a single time (hours:minutes) on mobile.

The selected time is indicated by the filled circle at the end of the clock hand.

【翻译】
对话框选择器用于在移动设备上选择单个时间(小时:分钟)。
所选时间由钟针结束处的实心圆圈表示。

[图片上传失败...(image-df7aea-1552294747008)]
Time picker: Light theme, portrait

【翻译】
时间选择器:主题,影像

Tap between the hour and minute label in the title bar to switch between the hour or minute view. Additionally, tap on the AM/PM label in the title bar to switch between AM or PM (in 12-hour clock mode).

【翻译】
在标题栏中的小时和分钟标签之间点击,可在小时或分钟视图之间切换。此外,点击标题栏中的AM / PM标签可在AM或PM之间切换(以12小时时钟模式)。


Time picker navigation

【翻译】
时间选择器导航

The picker view adapts to the device’s orientation.

【翻译】
拾取器视图适应设备的方向。

[图片上传失败...(image-d9b3a1-1552294747008)]
Time picker: Light theme, landscape

【翻译】
时间选择器:主题,影像

A dark theme picker can complement apps that have a dark theme.

【翻译】
黑暗的主题选择器可以补充具有黑暗主题的应用程序。

[图片上传失败...(image-63fb02-1552294747008)]
Time picker: Dark theme, portrait

【翻译】
时间选择器:黑暗的主题,影像

Landscape view of the dark theme picker

【翻译】
黑暗的题材选择器的风景视图

[图片上传失败...(image-31b737-1552294747008)]
Time picker: Dark theme, landscape

【翻译】
时间选择器:黑暗的主题,影像

上一篇下一篇

猜你喜欢

热点阅读