Использование элементов управления Fluent UI

Создание приложений, которые отлично смотрятся, в Microsoft Teams будет проще с нашими новыми компонентами. Построено на Fluent UI framework, новые компоненты будут отлично смотреться со стилями Teams и автоматически адаптируются к теме Teams по умолчанию. Новые элементы управления: Кнопка, Флажок, Поле со списком, Средство выбора даты, Метка, Группа кнопок-переключателей, Рейтинг, Ползунок, Текстовое поле и Переключатель.

Давайте рассмотрим каждый элемент управления Fluent UI и его наиболее полезные свойства. Полный список элементов управления и свойств в Power Apps см. в Элементы управления и свойства в Power Apps.

Кнопка

Элемент управления, который пользователь выбирает для взаимодействия с приложением.

![Элемент управления "Кнопка".](media/fluent-button.png "Элемент управления "Кнопка"")

Описание

Настройте свойство OnSelect элемента управления Кнопка для выполнения одной или нескольких формул при выборе элемента управления пользователем.

Ключевые свойства

ButtonType — стиль отображаемой кнопки: стандартный или основной. Значение по умолчанию: Стандарт.

OnSelect — поведение приложения, когда пользователь выбирает элемент управления.

Text — текст, отображаемый в элементе управления, или текст, который пользователь вводит в элемент управления.

Флажок

Элемент управления, который пользователь может установить или снять, задавая значение true или false соответственно.

![Элемент управления "Флажок".](media/fluent-check-box.png "Элемент управления "Флажок"")

Описание

Пользователь может указывать логическое значение с помощью этого знакомого элемента управления, который широко используется в пользовательских интерфейсах.

Ключевые свойства

Box side — сторона элемента управления, на которой отображается флажок.

Подпись — Текст, отображаемый на элементе управления.

Checked — Включен ли данный элемент управления.

Поле со списком

Это элемент управления, который позволяет выбирать из доступных вариантов. Поддерживает поиск и выбор нескольких вариантов.

![Элемент управления "Поле со списком".](media/fluent-combo-box.png "Элемент управления "Поле со списком"")

Описание

Элемент управления Поле со списком позволяет пользователю выполнять поиск элементов, которые необходимо выбрать.

Режим одиночного или множественного выбора настраивается с использованием свойства SelectMultiple.

Ключевые свойства

Items — источник данных, в котором можно выбрать элементы.

DefaultSelectedItems — элементы, выбранные изначально до взаимодействия с элементом управления.

SelectMultiple — позволяет определить, сколько элементов можно выбрать: один или несколько.

IsSearchable — позволяет определить, можно ли выполнять поиск элементов, прежде чем их выбрать.

Средство выбора даты

Элемент управления, который выбирается для указания даты.

![Элемент управления "Средство выбора даты".](media/fluent-date-picker.png "Элемент управления "Средство выбора даты"")

Описание

Добавив элемент управления Выбор даты вместо элемента управления "Ввод текста", вы обеспечите ввод даты пользователем в правильном формате.

Ключевые свойства

Value — дата, выбранная в элементе управления датой. Эта дата представлена по местному времени.

Подпись

Поле, в котором отображаются данные, например текст, числа, даты и валюта.

![Элемент управления "Подпись".](media/fluent-label.png "Элемент управления "Метка"")

Описание

Метка показывает данные, которые вы указываете как буквенную строку текста или как формулу, которая вычисляет строку текста. Метки часто отображаются вне других элементов управления (например, заголовок, определяющий экран), в качестве метки для другого элемента управления (например, элемента "Оценка" или "Аудио") или в коллекции для отображения определенного типа сведений об элементе.

Ключевые свойства

Color — цвет текста в элементе управления.

Font — имя семейства шрифтов, используемых для отображения текста.

Text — Текст, отображаемый на элементе управления.

Группа кнопок-переключателей

Элемент ввода, отображающий несколько вариантов, из которых пользователи могут одновременно выбрать только один.

![Элемент управления "Группа кнопок переключателей".](media/fluent-radio-group.png "Элемент управления "Группа кнопок-переключателей"")

Описание

Элемент управления Группа кнопок-переключателей — стандартный HTML-элемента ввода — лучше всего использовать с несколькими взаимоисключающими вариантами.

Ключевые свойства

Items — источник данных, отображаемых в элементе управления, такой как коллекция, список или диаграмма.

Selected — запись данных, представляющая выбранный элемент.

Рейтинг

Элемент управления, позволяющий пользователю указать значение от 0 до заданного вами максимального числа.

![Элемент управления "Оценка".](media/fluent-rating.png "Элемент управления "Оценка"")

Описание

В этом элементе управления пользователь может, например, выбрать определенное количество звездочек, показывая, насколько ему что-либо нравится.

Ключевые свойства

Value — начальное значение элемента управления до его изменения пользователем.

Max — максимальное значение, которое может задать пользователь с помощью ползунка или оценки.

Ползунок

Элемент управления, позволяющий пользователю указывать значение, перетаскивая маркер.

![Элемент управления "Ползунок".](media/fluent-slider.png "Элемент управления "Ползунок"")

Описание

Пользователь может выбрать значение между заданными минимальным и максимальным значениями, передвигая маркер ползунка влево-вправо или вверх-вниз в зависимости от выбранного вами направления.

Ключевые свойства

Max — максимальное значение, которое может задать пользователь с помощью ползунка или оценки.

Min — минимальное значение, которое может задать пользователь с помощью ползунка или оценки.

Value — значение входного элемента управления.

Layout — отображается ли элемент управления по горизонтали или по вертикали.

Show value — должен ли элемент управления отображать значение.

Текстовое поле

Поле, в котором пользователь может вводить текст, числа и другие данные.

Описание

Пользователь может вводить данные в элементе управления Текстовое поле. В зависимости от настройки приложения эти данные могут добавляться в источник, использоваться для вычисления временного значения или применяться иным способом.

Ключевые свойства

Font — имя семейства шрифтов, используемых для отображения текста.

Text — текст, отображаемый в элементе управления, или текст, который пользователь вводит в элемент управления.

Переключатель

Переключатель — это элемент управления, который пользователь может включить или отключить.

![Элемент управления "Переключатель".](media/fluent-toggle.png "Элемент управления "Переключатель"")

Описание

Элемент управления Переключатель разработан для современного пользовательского интерфейса, но ведет себя так же, как флажок.

Ключевые свойства

Checked — Включен ли данный элемент управления.

OffText — Текст выключенного состояния.

OnText — Текст включенного состояния.

Разница между Fluent UI и классическими элементами управления

Свойства элементов управления были упрощены для удобства использования. В следующей таблице перечислены различия между элементами управления Fluent UI и классическими именами свойств элемента управления.

См. также

Создание дополнительных приложений
Общие сведения о Power Apps Studio