Kontrolka Button w Power Apps

Kontrolka, którą użytkownik naciska lub klika, aby wchodzić w interakcję z aplikacją.

Opis

Skonfigurowanie właściwości OnSelect kontrolki Button pozwala uruchomić jedną lub więcej formuł po kliknięciu lub naciśnięciu kontrolki przez użytkownika.

Właściwości klucza

OnSelect — akcje do wykonania po naciśnięciu lub kliknięciu formantu przez użytkownika.

Text — tekst widoczny na kontrolce lub wpisywany przez użytkownika do kontrolki.

Dodatkowe właściwości

Align — lokalizacja tekstu w odniesieniu do środka kontrolki w poziomie.

AutoDisableOnSelect — automatycznie wyłącza kontrolkę, gdy działanie OnSelect jest w toku.

BorderColor – kolor obramowania kontrolki.

BorderStyle – rodzaj obramowania kontrolki: Ciągłe, Kreskowane, Kropkowane lub Brak.

BorderThickness – grubość obramowania kontrolki.

Color – kolor tekstu w kontrolce.

DisplayMode – czy kontrolka zezwala na wprowadzanie danych wejściowych przez użytkownika (Edytuj), czy tylko wyświetla dane (Wyświetl) lub jest wyłączona (Wyłączone).

DisabledBorderColor – kolor obramowania kontrolki, jeśli właściwość DisplayMode kontrolki jest ustawiona na wartość Wyłączone.

DisabledColor – kolor tekstu w kontrolce, jeśli jej właściwość DisplayMode jest ustawiona na wartość Wyłączone.

DisabledFill – kolor tła kontrolki, jeśli jej właściwość DisplayMode jest ustawiona na wartość Wyłączone.

FocusedBorderColor – kolor obramowania kontrolki z fokusem.

FocusedBorderThickness – grubość obramowania kontrolki z fokusem.

Fill – kolor tła kontrolki.

Font — nazwa rodziny czcionek używanej do wyświetlania tekstu.

FontWeight — grubość tekstu w kontrolce: Pogrubiony, Półpogrubiony, Normalny lub Cieńszy.

Height – odległość między górną i dolną krawędzią kontrolki.

HoverBorderColor – kolor obramowania kontrolki po umieszczeniu na niej wskaźnika myszy.

HoverColor – kolor tekstu w kontrolce po umieszczeniu na niej wskaźnika myszy.

HoverFill – kolor tła kontrolki po umieszczeniu na niej wskaźnika myszy.

Italic — czy tekst w kontrolce jest pochylony.

PaddingBottom — odległość między tekstem w kontrolce a dolną krawędzią tej kontrolki.

PaddingLeft — odległość między tekstem w kontrolce a lewą krawędzią tej kontrolki.

PaddingRight — odległość między tekstem w kontrolce a prawą krawędzią tej kontrolki.

PaddingTop — odległość między tekstem w kontrolce a górną krawędzią tej kontrolki.

Pressed — wartość Prawda, gdy kontrolka jest naciskana, w przeciwnym razie wartość fałsz.

PressedBorderColor — kolor krawędzi kontrolki, gdy użytkownik naciśnie lub kliknie tę kontrolkę.

PressedColor— kolor tekstu w kontrolce, gdy użytkownik naciśnie lub kliknie tę kontrolkę.

PressedFill — kolor tła kontrolki, gdy użytkownik naciśnie lub kliknie tę kontrolkę.

RadiusBottomLeft — stopień zaokrąglenia lewego dolnego rogu kontrolki.

RadiusBottomRight — stopień zaokrąglenia prawego dolnego rogu kontrolki.

RadiusTopLeft — stopień zaokrąglenia lewego górnego rogu kontrolki.

RadiusTopRight — stopień zaokrąglenia prawego górnego rogu kontrolki.

Size — rozmiar czcionki tekstu wyświetlanego w kontrolce.

Strikethrough — czy przez tekst widoczny na kontrolce przebiega linia.

TabIndex — kolejność nawigacji za pomocą klawiatury w odniesieniu do innych kontrolek.

Tooltip – tekst objaśnienia wyświetlany po umieszczeniu wskaźnika myszy na kontrolce.

Underline — czy pod tekstem widocznym na kontrolce przebiega linia.

VerticalAlign — lokalizacja tekstu na kontrolce względem środka kontrolki w pionie.

Visible – czy kontrolka jest widoczna, czy ukryta.

Width – odległość między lewą i prawą krawędzią kontrolki.

X — odległość między lewą krawędzią kontrolki a lewą krawędzią jej kontenera nadrzędnego (ekranu, jeśli brak kontenera nadrzędnego).

Y — odległość między górną krawędzią kontrolki a górną krawędzią kontenera nadrzędnego (ekranu, jeśli brak kontenera nadrzędnego).

Navigate( ScreenName, ScreenTransitionValue )

Przykłady

Dodawanie podstawowej formuły do przycisku

  1. Dodaj kontrolkę Text input i nadaj jej nazwę Źródło.

    Nie wiesz, jak dodać, nazwać i skonfigurować kontrolkę?

  2. Dodaj kontrolkę Button, ustaw jej właściwość Text na wartość „Add” i ustaw jej właściwość OnSelect na następującą formułę:
    UpdateContext({Total:Total + Value(Source.Text)})

    Potrzebujesz dalszych informacji na temat funkcji UpdateContext lub innych funkcji?

  3. Dodaj kontrolkę Label, ustaw jej właściwość Text na pasku formuł na Value(Total), a następnie naciśnij klawisz F5.

  4. Wyczyść domyślny tekst z pola Źródło, wpisz w nim liczbę, a następnie kliknij lub naciśnij przycisk Dodaj.

    W kontrolce Label zostanie wyświetlona wpisana przez Ciebie liczba.

  5. Wyczyść liczbę z pola Źródło, wpisz w nim inną liczbę, a następnie kliknij lub naciśnij przycisk Dodaj.

    Kontrolka Label pokaże sumę dwóch wpisanych przez Ciebie liczb.

  6. (Opcjonalnie) Powtórz poprzedni krok jeszcze jeden raz lub więcej.

  7. Aby powrócić do domyślnego obszaru roboczego, naciśnij klawisz Esc (lub kliknij albo naciśnij ikonę zamykania w prawym górnym rogu).

Konfigurowanie przycisku z wieloma formułami

Dodaj formułę, która czyści kontrolkę Text input między kolejnymi wpisami.

  1. Ustaw właściwość HintText pola Źródło na „Enter a number”.

  2. Ustaw właściwość OnSelect przycisku Dodaj na tę formułę:

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

    Uwaga

    Kolejne formuły oddzielaj średnikami „;”.

  3. Ustaw właściwość Default pola Źródło na wartość ClearInput.

  4. Naciśnij klawisz F5, a następnie przetestuj aplikację, dodając kilka liczb jednocześnie.

Dodawanie kolejnego przycisku zerującego sumę

Dodaj drugi przycisk, który będzie czyścił sumę między obliczeniami.

  1. Dodaj kolejną kontrolkę Button, ustaw jej właściwość Text na wartość „Wyczyść” i ustaw jej właściwość OnSelect na następującą formułę:

    UpdateContext({Total:0})

  2. Naciśnij klawisz F5, dodaj kilka liczb jednocześnie, a następnie kliknij lub naciśnij przycisk Wyczyść w celu wyzerowania sumy.

Zmienianie wyglądu przycisku

Zmienianie kształtu przycisku

Domyślnie usługa Power Apps tworzy kontrolkę Button o kształcie prostokąta z zaokrąglonymi rogami. Do kształtu kontrolki Button można wprowadzić podstawowe modyfikacje, ustawiając jej właściwości Height, Width i Radius.

Uwaga

Icons and Shapes oferują szeroki wybór projektów i mogą wykonywać niektóre z podstawowych funkcji kontrolek Button. Icons and Shapes nie mają jednak właściwości Text.

  1. Dodaj kontrolkę Button i ustaw jej właściwości Height oraz Width na wartość 300, aby utworzyć duży, kwadratowy Button.

  2. Zmodyfikuj właściwości RadiusTopLeft, RadiusTopRight, RadiusBottomLeft i RadiusBottomRight, aby dostosować krzywiznę każdego rogu. Oto kilka przykładów różnych kształtów, każdy bazujący na kwadratowym przycisku o rozmiarach 300 x 300:

Zmienianie koloru przycisku po zatrzymaniu na nim wskaźnika myszy

Domyślnie kolor wypełnienia kontrolki Button jest przyciemniany o 20% po zatrzymaniu na niej wskaźnika myszy. To zachowanie można dostosować, modyfikując właściwość HoverFill, która korzysta z funkcji ColorFade. Jeśli ustawisz formułę ColorFade na dodatnią wartość procentową, po wskazaniu przycisku wskaźnikiem myszy kolor stanie się jaśniejszy. Ujemna wartość procentowa sprawi, że kolor stanie się ciemniejszy.

  • Zmień wartość procentową ColorFade we właściwości HoverFill jednego z utworzonych przycisków i zobacz, jakie będą efekty.

Możesz również określić kolor kontrolki Button, ustawiając jej właściwość HoverFill na formułę zawierającą funkcję ColorValue zamiast funkcji ColorFade, tak jak w zapisie ColorValue("Red").

Uwaga

Wartość koloru może być dowolną definicją koloru CSS w postaci nazwy lub wartości szesnastkowej.

  • Zastąp funkcję ColorFade funkcją ColorValue dla jednego z utworzonych przycisków i zobacz, jakie będą efekty.

Wytyczne dotyczące ułatwień dostępu

Kontrast kolorów

Obsługa czytników ekranu

  • Właściwość Text musi być wypełniona.

Obsługa klawiatury

  • Właściwość TabIndex musi mieć wartość zero lub większą, dzięki czemu użytkownicy korzystający z klawiatury mogą przejść do kontrolki.
  • Wskaźniki fokusu muszą być wyraźnie widoczne. Aby to zapewnić, skorzystaj z właściwości FocusedBorderColor i FocusedBorderThickness.

Uwaga

Czy możesz poinformować nas o preferencjach dotyczących języka dokumentacji? Wypełnij krótką ankietę. (zauważ, że ta ankieta jest po angielsku)

Ankieta zajmie około siedmiu minut. Nie są zbierane żadne dane osobowe (oświadczenie o ochronie prywatności).