Ovládací prvok Tlačidlo v Power Apps

  • Článok

Ovládací prvok pre interakciu s aplikáciou, na ktorý môže používateľ kliknúť alebo ťuknúť.

Popis

Môžete konfigurovať vlastnosť OnSelect ovládacieho prvku Tlačidlo tak, aby sa pri kliknutí alebo ťuknutí na ovládací prvok spustil jeden alebo viacero vzorcov.

Vlastnosti kľúča

OnSelect – Akcie, ktoré sa majú vykonať, keď používateľ klepne alebo klikne na ovládací prvok.

Text – text, ktorý sa v ovládacom prvku zobrazuje alebo ktorý zadáva do ovládacieho prvku používateľ.

Ďalšie vlastnosti

Align – umiestnenie textu vo vzťahu k vodorovnému stredu ovládacieho prvku.

AutoDisableOnSelect – automaticky zakáže ovládací prvok v čase spustenia vlastnosti OnSelect.

BorderColor – farba orámovania ovládacieho prvku.

BorderStyle – štýl orámovania ovládacieho prvku Solid (Plné), Dashed (Prerušované), Dotted (Bodkované) alebo None (Žiadne).

BorderThickness – hrúbka orámovania ovládacieho prvku.

Color – farba textu v ovládacom prvku.

DisplayMode – údaj o tom, či ovládací prvok umožňuje vstup používateľa (Edit), iba zobrazuje údaje (View) alebo je zakázaný (Disabled).

DisabledBorderColor – farba orámovania ovládacieho prvku v prípade, že je vlastnosť DisplayMode nastavená na možnosť Disabled.

DisabledColor – farba textu ovládacieho prvku v prípade, že je vlastnosť DisplayMode nastavená na Disabled.

DisabledFill – farba pozadia ovládacieho prvku v prípade, že je vlastnosť DisplayMode nastavená na Disabled.

FocusedBorderColor – farba orámovania zameraného ovládacieho prvku.

FocusedBorderThickness – hrúbka orámovania zameraného ovládacieho prvku.

Fill – farba pozadia ovládacieho prvku.

Font – názov skupiny písiem na zobrazenie textu.

FontWeight – hrúbka textu v ovládacom prvku: Bold (Tučné), Semibold (Polotučné), Normal (Normálne) alebo Lighter (Tenšie).

Height – vzdialenosť medzi horným a dolným okrajom ovládacieho prvku.

HoverBorderColor – farba orámovania ovládacieho prvku pri umiestnení ukazovateľa myši na ovládací prvok.

HoverColor – farba textu v ovládacom prvku pri umiestnení ukazovateľa myši na ovládací prvok.

HoverFill – farba pozadia ovládacieho prvku pri umiestnení ukazovateľa myši na ovládací prvok.

Italic – možnosť zobrazenia textu v ovládacom prvku kurzívou.

PaddingBottom – vzdialenosť medzi textom v ovládacom prvku a dolným okrajom rovnakého prvku.

PaddingLeft – vzdialenosť medzi textom v ovládacom prvku a ľavým okrajom rovnakého prvku.

PaddingRight – vzdialenosť medzi textom v ovládacom prvku a pravým okrajom rovnakého prvku.

PaddingTop – vzdialenosť medzi textom v ovládacom prvku a horným okrajom rovnakého prvku.

Pressed – v prípade stlačenia ovládacieho prvku má hodnotu pravda, inak má hodnotu nepravda.

PressedBorderColor – farba orámovania ovládacieho prvku po ťuknutí alebo kliknutí používateľa na ovládací prvok.

PressedColor – farba textu v ovládacom prvku po ťuknutí alebo kliknutí používateľa na ovládací prvok.

PressedFill – farba pozadia ovládacieho prvku po ťuknutí alebo kliknutí používateľa na ovládací prvok.

RadiusBottomLeft – polomer zaoblenia ľavého dolného rohu ovládacieho prvku.

RadiusBottomRight – polomer zaoblenia pravého dolného rohu ovládacieho prvku.

RadiusTopLeft – polomer zaoblenia ľavého horného rohu ovládacieho prvku.

RadiusTopRight – polomer zaoblenia pravého horného rohu ovládacieho prvku.

Size – veľkosť písma textu zobrazeného v ovládacom prvku.

Strikethrough – možnosť zobrazenia prečiarknutého textu v ovládacom prvku.

TabIndex – príkaz na navigáciu pomocou klávesnice vo vzťahu k iným ovládacím prvkom.

Tooltip – vysvetľujúci text, ktorý sa zobrazí, keď používateľ prejde myšou na ovládací prvok.

Underline – možnosť zobrazenia podčiarknutia textu v ovládacom prvku.

VerticalAlign – umiestnenie textu vo vzťahu k zvislému stredu ovládacieho prvku.

Visible – možnosť zobrazenia alebo skrytia ovládacieho prvku.

Width – vzdialenosť medzi ľavým a pravým okrajom ovládacieho prvku.

X – vzdialenosť medzi ľavým okrajom ovládacieho prvku a ľavým okrajom jeho nadradeného kontajnera (alebo obrazovky, ak sa nadradený kontajner nepoužíva).

Y – vzdialenosť medzi horným okrajom ovládacieho prvku a horným okrajom jeho nadriadeného kontajnera (alebo obrazovky, ak sa nadradený kontajner nepoužíva).

Navigate( ScreenName, ScreenTransitionValue )

Príklady

Pridanie základného vzorca k tlačidlu

  1. Pridajte ovládací prvok Text input a pomenujte ho Source (Zdroj).

    Pozrite sa, ako pridať, pomenovať a nakonfigurovať ovládací prvok.

  2. Pridajte ovládací prvok Tlačidlo, pre jeho vlastnosť Text zadajte hodnotu „Add“ (Pridať) a pre jeho vlastnosť OnSelect zadajte tento vzorec:
    UpdateContext({Total:Total + Value(Source.Text)})

    Chcete si prečítať ďalšie informácie o funkcii UpdateContext a ďalších funkciách?

  3. Pridajte ovládací prvok Štítok, nastavte jeho vlastnosť Text v riadku vzorcov na Hodnota celkom a potom stlačte F5.

  4. Vymažte predvolený text v ovládacom prvku Source, zadajte číslo a potom kliknite alebo ťuknite na Add.

    Na ovládacom prvku Label sa zobrazuje zadané číslo.

  5. Vymažte číslo v ovládacom prvku Source, zadajte iné číslo a potom kliknite alebo ťuknite na Add.

    Ovládací prvok Label zobrazí súčet oboch zadaných čísel.

  6. (voliteľné) Zopakujte predchádzajúci krok raz alebo viackrát.

  7. Ak sa chcete vrátiť na predvolený pracovný priestor, stlačte kláves Esc (alebo kliknite či ťuknite v pravom hornom rohu na ikonu zavretia).

Konfigurácia tlačidla s viacerými vzorcami

Pridajte vzorec, ktorý medzi jednotlivými zadaniami vymaže ovládací prvok Textový vstup.

  1. Nastavte vlastnosť HintText (Text tipu) ovládacieho prvku Source na „Enter a number“ (Zadajte číslo).

  2. Nastavte vlastnosť OnSelect ovládacieho prvku Add na tento vzorec:

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

    Poznámka

    Ak zadávate viacero vzorcov, oddeľujte ich bodkočiarkou „;“.

  3. Nastavte vlastnosť Default (Predvolené) ovládacieho prvku Source na ClearInput.

  4. Stlačte kláves F5 a otestujte aplikáciu sčítaním niekoľkých čísel.

Obnovenie súčtu pridaním ďalšieho tlačidla

Pridajte druhé tlačidlo na vymazanie súčtu pred začatím ďalšieho výpočtu.

  1. Pridajte ovládací prvok Tlačidlo, nastavte vlastnosť Text na hodnotu „Clear“ (Vymazať) a pre vlastnosť OnSelect zadajte nasledujúci vzorec:

    UpdateContext({Total:0})

  2. Stlačte kláves F5, spočítajte niekoľko čísel a potom kliknutím alebo ťuknutím na Clear súčet vynulujte.

Zmena vzhľadu tlačidla

Zmena tvaru tlačidla

Ovládací prvok Tlačidlo má v Power Apps v predvolenom nastavení obdĺžnikový tvar a zaoblené rohy. Tvar ovládacieho prvku Tlačidlo môžete meniť nastavením jeho vlastností Height (Výška), Width (Šírka) a Radius (Polomer).

Poznámka

Ikony a tvary poskytujú širokú škálu návrhov a umožňujú vykonávať niektoré základné funkcie ovládacieho prvku Tlačidlo. Ikony a tvary však nemajú vlastnosť Text.

  1. Pridajte ovládací prvok Tlačidlo a jeho vlastnosti Height (Výška) a Width (Šírka) nastavte na hodnotu 300 a vytvorte tak veľké štvorcové tlačidlo.

  2. Zmeňte hodnoty vlastností RadiusTopLeft, RadiusTopRight, RadiusBottomLeft a RadiusBottomRight a upravte tak zaoblenie jednotlivých rohov. Nižšie sú uvedené príklady vytvorenia rôznych tvarov. Každý vychádza zo štvorcového tlačidla s rozmermi 300 x 300:

Zmena farby tlačidla pri prechode myšou

V predvolenom nastavení sa farba výplne ovládacieho prvku Tlačidlo pri prejdení myšou stlmí o 20 %. Toto správanie môžete upraviť zmenou vlastnosti HoverFill, ktorá používa funkciu ColorFade. Ak pre percento ColorFade zadáte kladnú hodnotu, bude farba pri prejdení ukazovateľom myši na tlačidlo svetlejšia, zatiaľ čo v prípade zápornej hodnoty bude tmavšia.

  • Zmeňte percento ColorFade vo vlastnosti HoverFill niektorého tlačidla, ktoré ste vytvorili, a pozrite sa, ako sa táto zmena prejaví.

Môžete tiež zadať farbu ovládacieho prvku Tlačidlo tak, že jeho vlastnosť HoverFill nastavíte na vzorec, ktorý bude miesto funkcie ColorFade obsahovať funkciu ColorValue, napríklad ColorValue("Red").

Poznámka

Hodnota farby môže byť ľubovoľná farebná definícia štýlov CSS – názov alebo šestnástková hodnota.

  • Nahraďte funkciu ColorFade funkciou ColorValue pre ľubovoľné vytvorené tlačidlo a pozrite sa, ako sa zmena prejaví.

Pokyny na zjednodušenie ovládania

Farebný kontrast

Podpora čítača obrazovky

  • Musí existovať vlastnosť Text.

Podpora klávesnice

  • Vlastnosť TabIndex musí mat hodnotu nula alebo väčšiu, aby používatelia klávesnice na ňu mohli prejsť.
  • Indikátory zamerania musia byť jasne viditeľné. Dosiahnete to použitím vlastností FocusedBorderColor a FocusedBorderThickness.

Poznámka

Môžete nás informovať o svojich voľbách jazyka pre dokumentáciu? Absolvujte krátky prieskum. (upozorňujeme, že tento prieskum je v angličtine)

Prieskum bude trvať približne sedem minút. Nezhromažďujú sa žiadne osobné údaje (vyhlásenie o používaní osobných údajov).