Поля и всплывающие окнаFields 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.

Мы используем регулярный пользовательский интерфейс в 12 пт (заголовок) и $app-серый-02 для меток.We use Segoe UI Regular at 12 pt (caption) and $app-gray-02 for labels. Чтобы получить текст справки, мы используем пользовательский интерфейс Segoe с частотой 14 пт (базовый) и $app-серый-02.For help text, we use Segoe UI Regular at 14 pt (base) and $app-gray-02.


Всплывающие окна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.

РазмещениеPlacement

Всплывающие окна являются контекстными, и их следует поместить над элементом, вызвавшим его, под ним или рядом с ним.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.

MobileMobile

Поля — это поля ввода текста, которые принимают ввод от пользователей.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