字段和 flyoutsFields and flyouts


FieldsFields

字段是用户可以在其中输入文本的区域。Fields are areas where users can input text.

填充和大小Padding and size

单行文本字段是32的固定高度,以匹配其他组件的高度。Single-line text fields are a fixed height of 32px to match the height of other components. 一些文本字段(如 "说明" 字段)可能会垂直增加以允许更多的文本。Some text fields such as description fields may be taller vertically to allow more text.

States

这些是文本字段的状态。These are the states of our text fields. 文本字段存在于不同的状态中。Text fields exist in different states. 我们有专用于九种可能的方案的特定设计,包括(从上到下):静止文本字段、焦点上的键盘以及字段中的光标、在焦点内输入文本的键盘、错误处理已成功、错误处理已成功、明文字段(包括 X 图标)、搜索字段(包括搜索图标)、加载字段和禁用的字段。We have specific designs dedicated to nine possible scenarios, including (top to bottom): Resting text field, Keyboard in focus and cursor inside the field, Keyboard in focus with text entered, Error handling has succeeded, Error handling has failed, Clear text field (including an X icon), Search field (including a Search icon), Loading field, and a Disabled field.

设置帮助文本和标签的格式Formatting help text and labels

字段可以包含占位符文本,以提供所需的信息类型的示例。Fields can contain placeholder text to give an example of the kind of information that is required. 他们还可以保留为用户提供更多上下文的标签。They can also hold labels that give the user more context. 在字段中,文本应始终左对齐。Within a field, your text should always be justified left. 我们也在这里使用句子大小写。We use sentence casing throughout here, as well.

我们将 Microsoft Yahei UI 常规的12磅(caption)和 $app-灰色-02 用于标签。We use Segoe UI Regular at 12 pt (caption) and $app-gray-02 for labels. 对于 "帮助" 文本,我们使用的是 14 pt (base)和 $app-灰阶-02 的 Microsoft Yahei UI。For help text, we use Segoe UI Regular at 14 pt (base) and $app-gray-02.


FlyoutsFlyouts

Flyouts 比对话框更轻便,可以快速消除。Flyouts are more lightweight than dialogs and can be dismissed quickly. 它们可以包含按钮、字段和其他组件。They can contain buttons, fields, and other components.

调整大小和填充Sizing and padding

我们建议将16px 填充到内容的左侧和右侧。We recommend a 16px padding to the left and right of the content.

PlacementPlacement

Flyouts 是上下文,应放置在触发它的元素的上方、下方或旁边。Flyouts are contextual and should be placed above, below, or beside the element that triggered it.

上下Scrolling

标头保留在位置,以便为要滚动的内容提供上下文。The header remains in place to give context to the content being scrolled.

移动设备Mobile

字段是接受用户输入的文本输入框。Fields are text-entry boxes that accept input from users. 飞出菜单是显示在顶部窗格中的水平弹出窗口,可用于显示有关项目的更多详细信息。Flyout menus are horizontal pop-up windows that appear from the top pane and can be used to show more detail about an item.

字段控件Field Controls

浮出菜单列表控件Flyout menu list controls