Элемент управления "Кнопка" в Power Apps

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

Description

Настройте свойство OnSelect элемента управления Button , чтобы запустить одну или несколько формул, когда пользователь щелкает или нажимает элемент управления.

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

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

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

Дополнительные свойства

Выравнивание — расположение текста относительно горизонтального центра его элемента управления.

AutoDisableOnSelect — автоматически отключает элемент управления во время выполнения поведения OnSelect .

BorderColor — цвет границы элемента управления.

BorderStyle — является ли граница элемента управления твердым, дефишированным, dotted или None.

BorderThickness — толщина границы элемента управления.

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

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

DisplayMode — разрешает ли элемент управления входные данные (изменить), отображается только данные (вид) или отключен (отключено).

DisabledBorderColor — цвет границы элемента управления, если для свойства DisplayMode элемента управления задано значение "Отключено".

DisabledColor — цвет текста в элементе управления, если для свойства DisplayModeзадано значение Disabled.

DisabledFill — цвет фона элемента управления, если его свойство DisplayMode имеет значение Disabled.

FocusedBorderColor — цвет границы элемента управления при фокусе элемента управления.

FocusedBorderThickness — толщина границы элемента управления при фокусе элемента управления.

Fill — цвет фона элемента управления.

Шрифт — имя семейства шрифтов, в которых отображается текст.

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

Высота — расстояние между верхними и нижними краями элемента управления.

HoverBorderColor — цвет границы элемента управления, когда пользователь сохраняет указатель мыши на этом элементе управления.

HoverColor — цвет текста в элементе управления, когда пользователь сохраняет указатель мыши на нем.

HoverFill — цвет фона элемента управления, когда пользователь сохраняет указатель мыши на него.

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

PaddingBottom — расстояние между текстом в элементе управления и нижней краю этого элемента управления.

PaddingLeft — расстояние между текстом в элементе управления и левым краем этого элемента управления.

PaddingRight — расстояние между текстом в элементе управления и правым краем этого элемента управления.

PaddingTop — расстояние между текстом в элементе управления и верхним краем этого элемента управления.

Нажмитеклавишу TRUE , пока элемент управления нажимается, значение false в противном случае.

Нажатие клавишиBorderColor — цвет границы элемента управления, когда пользователь нажимает или щелкает этот элемент управления.

Нажатие клавишиColor — цвет текста в элементе управления, когда пользователь нажимает или щелкает этот элемент управления.

Нажатие клавиши PressedFill — цвет фона элемента управления, когда пользователь нажимает или щелкает этот элемент управления.

RadiusBottomLeft — степень, в которой округляется левый нижний угол элемента управления.

RadiusBottomRight — степень, в которой округляется нижний правый угол элемента управления.

RadiusTopLeft — степень, к которой округляется верхний левый угол элемента управления.

RadiusTopRight — степень, к которой округляется правый верхний угол элемента управления.

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

Зачеркнутое. Отображается ли строка с помощью текста, отображаемого на элементе управления.

TabIndex — порядок навигации клавиатуры относительно других элементов управления.

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

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

VerticalAlign — расположение текста в элементе управления относительно вертикального центра этого элемента управления.

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

Ширина — расстояние между левыми и правыми краями элемента управления.

X — расстояние между левым краем элемента управления и левым краем родительского контейнера (экран, если родительский контейнер отсутствует).

Y — расстояние между верхним краем элемента управления и верхним краем родительского контейнера (экран, если родительский контейнер отсутствует).

Navigate( ScreenName, ScreenTransitionValue )

Примеры

Добавление базовой формулы в кнопку

  1. Добавьте элемент управления ввода текста и назовите его Source.

    Не знаете, как добавить, назвать и настроить элемент управления?

  2. Добавьте элемент управления Button , задайте для свойства Text значение Add и задайте для свойства OnSelect следующую формулу:
    UpdateContext({Total:Total+Value(Source.Text)})

    Хотите получить дополнительные сведения о функции UpdateContext или других функциях?

  3. Добавьте элемент управления Label , задайте для свойства Text в строке формул значение Value(Total) и нажмите клавишу F5.

  4. Снимите текст по умолчанию из источника, введите в него число, а затем нажмите кнопку "Добавить".

    В элементе управления "Метка" показан номер, который вы ввели.

  5. Снимите номер из источника, введите другое число и нажмите кнопку "Добавить".

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

  6. (необязательно) Повторите предыдущий шаг один или несколько раз.

  7. Чтобы вернуться в рабочую область по умолчанию, нажмите клавишу ESC (или щелкните значок закрытия в правом верхнем углу).

Настройка кнопки с несколькими формулами

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

  1. Задайте свойству HintTextsource значение "Ввод числа".

  2. Задайте свойство OnSelectдля add to this formula:

    UpdateContext({Total:Total+Value(Source.Text)});
    UpdateContext({ClearInput: ""})

    Замечание

    Разделите несколько формул с запятой ";".

  3. Задайте для свойства Defaultsource значение ClearInput.

  4. Нажмите клавишу F5, а затем протестируйте приложение, добавив несколько чисел вместе.

Добавьте еще одну кнопку, чтобы сбросить общую сумму

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

  1. Добавьте другой элемент управления Button , задайте для свойства Text значение Clear и задайте для свойства OnSelect следующую формулу:

    UpdateContext({Total:0})

  2. Нажмите клавишу F5, добавьте несколько чисел вместе, а затем нажмите кнопку "Очистить ", чтобы сбросить общую сумму.

Изменение внешнего вида кнопки

Изменение фигуры кнопки

По умолчанию Power Apps создает прямоугольный элемент управления Button с округленными углами. Вы можете внести основные изменения в форму элемента управления Button , задав его свойства Height, Width и Radius .

Замечание

Значки и фигуры предоставляют широкий спектр конструкций и могут выполнять одни и те же основные функции, которые выполняют элементы управления Button . Однако значки и фигуры не имеют свойства Text .

  1. Добавьте элемент управления Button и задайте для свойств "Высота и ширина " значение 300 , чтобы сделать большую квадратную кнопку.

  2. Измените свойства RadiusTopLeft, RadiusTopRight, RadiusBottomLeft и RadiusBottomRight, чтобы настроить количество кривизны на каждом углу. Ниже приведены некоторые примеры разных фигур, каждый из которых начинается с 300 x 300 квадратных кнопок:

    • Задайте для всех четырех значений Radius значение 150 , чтобы создать круг.
    • Задайте для значений RadiusTopLeft и RadiusBottomRightзначение 300 , чтобы создать конечную кнопку.
    • Задайте значения radiusTopLeft и RadiusTopRight равным 300, а значения radiusBottomLeft и RadiusBottomRightравным 100 , чтобы создать кнопку с фигурой табуляции.

Изменение цвета кнопки при наведении указателя мыши на него

По умолчанию цвет заливки элемента управления Button будет выглушен на 20% при наведении на него указателя мыши. Это поведение можно изменить, изменив свойство HoverFill , которое использует функцию ColorFade . Если формула ColorFade имеет положительный процент, цвет становится светлее при наведении указателя мыши на кнопку, а отрицательный процент делает цвет темнее.

  • Измените процент ColorFade в свойстве HoverFill одной из созданных кнопок и просмотрите эффекты.

Вы также можете указать цвет элемента управления Button , задав его свойство HoverFill формуле, содержащей функцию ColorValue вместо функции ColorFade , как в ColorValue("Red").

Замечание

Значение цвета может быть любым определением цвета CSS, именем или шестнадцатеричным значением.

  • Замените функцию ColorFade функцией ColorValue на одну из созданных кнопок и просмотрите эффекты.

Руководство по настройке специальных возможностей

Контрастность цветов

Поддержка средства чтения с экрана

  • Текст должен присутствовать.

Поддержка клавиатуры

  • TabIndex должен быть равен нулю или больше, чтобы пользователи клавиатуры могли перейти к нему.
  • Индикаторы фокуса должны быть четко видимыми. Для этого используйте FocusedBorderColor и FocusedBorderThickness .
  • Last updated on