Ovládací prvok Tlačidlo v PowerAppsButton control in PowerApps

Ovládací prvok pre interakciu s aplikáciou, na ktorý môže používateľ kliknúť alebo ťuknúť.A control that the user can click or tap to interact with the app.

PopisDescription

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.Configure the OnSelect property of a Button control to run one or more formulas when the user clicks or taps the control.

Základné vlastnostiKey properties

OnSelect – spôsob reakcie aplikácie na ťuknutie alebo kliknutie používateľa na ovládací prvok.OnSelect – How the app responds when the user taps or clicks a control.

Text – text, ktorý sa v ovládacom prvku zobrazuje alebo ktorý zadáva do ovládacieho prvku používateľ.Text – Text that appears on a control or that the user types into a control.

Ďalšie vlastnostiAdditional properties

Align – vodorovné umiestnenie textu vo vzťahu ku stredu ovládacieho prvku.Align – The location of text in relation to the horizontal center of its control.

AutoDisableOnSelect – automaticky zakáže ovládací prvok v čase spustenia vlastnosti OnSelect.AutoDisableOnSelect – Automatically disables the control while the OnSelect behavior is running.

BorderColor – farba orámovania ovládacieho prvku.BorderColor – The color of a control's border.

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

BorderThickness – hrúbka ohraničenia ovládacieho prvku.BorderThickness – The thickness of a control's border.

Color – farba textu ovládacieho prvku.Color – The color of text in a control.

DisplayMode – údaj o tom, či ovládací prvok umožňuje zadávanie používateľom (Edit), iba zobrazuje údaje (View) alebo je zakázaný (Disabled).DisplayMode – Whether the control allows user input (Edit), only displays data (View), or is disabled (Disabled).

DisabledBorderColor – farba orámovania ovládacieho prvku v prípade, že je vlastnosť DisplayMode nastavená na Disabled (Zakázané).DisabledBorderColor – The color of a control's border if the control's DisplayMode property is set to Disabled.

DisabledColor – farba textu ovládacieho prvku v prípade, že je vlastnosť DisplayMode nastavená na Disabled (Zakázané).DisabledColor – The color of text in a control if its DisplayMode property is set to Disabled.

DisabledFill – farba pozadia ovládacieho prvku v prípade, že je vlastnosť DisplayMode nastavená na Disabled (Zakázané).DisabledFill – The background color of a control if its DisplayMode property is set to Disabled.

FocusedBorderColor – farba orámovania zameraného ovládacieho prvku.FocusedBorderColor – The color of a control's border when the control is focused.

FocusedBorderThickness – hrúbka orámovania zameraného ovládacieho prvku.FocusedBorderThickness – The thickness of a control's border when the control is focused.

Fill – farba pozadia ovládacieho prvku.Fill – The background color of a control.

Font – názov skupiny písiem pre zobrazenie textu.Font – The name of the family of fonts in which text appears.

FontWeight – hrúbka textu v ovládacom prvku: Bold (Tučné), Semibold (Polotučné), Normal (Normálne) alebo Lighter (Tenšie).FontWeight – The weight of the text in a control: Bold, Semibold, Normal, or Lighter.

Height – vzdialenosť medzi horným a dolným okrajom ovládacieho prvku.Height – The distance between a control's top and bottom edges.

HoverBorderColor – farba orámovania ovládacieho prvku pri umiestnení ukazovateľa myši na ovládací prvok.HoverBorderColor – The color of a control's border when the user keeps the mouse pointer on that control.

HoverColor – farba textu v ovládacom prvku pri umiestnení ukazovateľa myši na ovládací prvok.HoverColor – The color of the text in a control when the user keeps the mouse pointer on it.

HoverFill – farba pozadia ovládacieho prvku pri umiestnení ukazovateľa myši na ovládací prvok.HoverFill – The background color of a control when the user keeps the mouse pointer on it.

Italic – možnosť zobrazenia textu v ovládacom prvku kurzívou.Italic – Whether the text in a control is italic.

PaddingBottom – vzdialenosť medzi textom v ovládacom prvku a dolným okrajom rovnakého prvku.PaddingBottom – The distance between text in a control and the bottom edge of that control.

PaddingLeft – vzdialenosť medzi textom v ovládacom prvku a ľavým okrajom rovnakého prvku.PaddingLeft – The distance between text in a control and the left edge of that control.

PaddingRight – vzdialenosť medzi textom v ovládacom prvku a pravým okrajom rovnakého prvku.PaddingRight – The distance between text in a control and the right edge of that control.

PaddingTop – vzdialenosť medzi textom v ovládacom prvku a horným okrajom rovnakého prvku.PaddingTop – The distance between text in a control and the top edge of that control.

Pressed – v prípade stlačenia ovládacieho prvku má hodnotu true, inak má hodnotu false.PressedTrue while a control is being pressed, false otherwise.

PressedBorderColor – farba orámovania ovládacieho prvku po ťuknutí alebo kliknutí používateľa na ovládací prvok.PressedBorderColor – The color of a control's border when the user taps or clicks that control.

PressedColor – farba textu v ovládacom prvku po ťuknutí alebo kliknutí na ovládací prvok používateľom.PressedColor – The color of text in a control when the user taps or clicks that control.

PressedFill – farba pozadia ovládacieho prvku po ťuknutí alebo kliknutí na ovládací prvok používateľom.PressedFill – The background color of a control when the user taps or clicks that control.

RadiusBottomLeft – polomer zaoblenia ľavého dolného rohu ovládacieho prvku.RadiusBottomLeft – The degree to which the bottom-left corner of a control is rounded.

RadiusBottomRight – polomer zaoblenia pravého dolného rohu ovládacieho prvku.RadiusBottomRight – The degree to which the bottom-right corner of a control is rounded.

RadiusTopLeft – polomer zaoblenia ľavého horného rohu ovládacieho prvku.RadiusTopLeft – The degree to which the top-left corner of a control is rounded.

RadiusTopRight – polomer zaoblenia pravého horného rohu ovládacieho prvku.RadiusTopRight – The degree to which the top-right corner of a control is rounded.

Size – veľkosť písma textu zobrazeného v ovládacom prvku.Size – The font size of the text that appears on a control.

Strikethrough – možnosť zobrazenia prečiarknutého textu v ovládacom prvku.Strikethrough – Whether a line appears through the text that appears on a control.

TabIndex – príkaz na navigáciu pomocou klávesnice vo vzťahu k iným ovládacím prvkom.TabIndex – Keyboard navigation order in relation to other controls.

Tooltip – vysvetľujúci text, ktorý sa zobrazí, keď používateľ ukáže myšou na ovládací prvok.Tooltip – Explanatory text that appears when the user hovers over a control.

Underline – možnosť zobrazenia podčiarknutého textu v ovládacom prvku.Underline – Whether a line appears under the text that appears on a control.

VerticalAlign – zvislé umiestnenie textu vo vzťahu k stredu ovládacieho prvku.VerticalAlign – The location of text on a control in relation to the vertical center of that control.

Visible – možnosť zobrazenia alebo skrytia ovládacieho prvku.Visible – Whether a control appears or is hidden.

Width – vzdialenosť medzi ľavým a pravým okrajom ovládacieho prvku.Width – The distance between a control's left and right edges.

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).X – The distance between the left edge of a control and the left edge of its parent container (screen if no parent container).

Y – vzdialenosť medzi horným okrajom ovládacieho prvku a horným okrajom jeho nadradeného kontajnera (alebo obrazovky, ak sa nadriadený kontajner nepoužíva).Y – The distance between the top edge of a control and the top edge of the parent container (screen if no parent container).

Navigate (ScreenName, ScreenTransitionValue)Navigate( ScreenName, ScreenTransitionValue )

PríkladyExamples

Pridanie základného vzorca k tlačidluAdd a basic formula to a button

  1. Pridajte ovládací prvok Vstup textu a pomenujte ho ako Source (Zdroj).Add a Text input control, and name it Source.

    Pozrite sa, ako pridať, pomenovať a nakonfigurovať ovládací prvok.Don't know how to add, name, and configure a control?

  2. Pridajte ovládací prvok Tlačidlo, pre jeho vlastnosť Text zadajte hodnotu „Add“ (Pridať) a pre jeho vlastnosť OnSelect zadajte tento vzorec:Add a Button control, set its Text property to "Add", and set its OnSelect property to this formula:
    UpdateContext({Total:Total + Value(Source.Text)})UpdateContext({Total:Total + Value(Source.Text)})

    Prečítajte si ďalšie informácie o funkcii UpdateContext a ďalších funkciách?Want more information about the UpdateContext function or other functions?

  3. Pridajte ovládací prvok Označenie, nastavte jeho vlastnosť Text na Total a potom stlačte F5.Add a Label control, set its Text property to Total, and then press F5.

  4. Vymažte predvolený text v ovládacom prvku Source, zadajte číslo a potom kliknite alebo ťuknite na Add.Clear the default text from Source, type a number in it, and then click or tap Add.

    Na ovládacom prvku Označenie sa zobrazuje zadané číslo.The Label control shows the number that you typed.

  5. Vymažte číslo v ovládacom prvku Source, zadajte iné číslo a potom kliknite alebo ťuknite na Add.Clear the number from Source, type another number in it, and then click or tap Add.

    Ovládací prvok Označenie zobrazí súčet oboch zadaných čísel.The Label control shows the sum of the two numbers that you typed.

  6. (voliteľné) Zopakujte predchádzajúci krok raz alebo viackrát.(optional) Repeat the previous step one or more times.

  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).To return to the default workspace, press Esc (or click or tap the close icon in the upper-right corner).

Konfigurácia tlačidla s viacerými vzorcamiConfigure a button with multiple formulas

Pridajte vzorec, ktorý medzi jednotlivými zadaniami vymaže ovládací prvok Textový vstup.Add a formula that clears the Text input control between entries.

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

  2. Nastavte vlastnosť OnSelect ovládacieho prvku Add na tento vzorec:Set the OnSelect property of Add to this formula:

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

    Poznámka

    Ak zadávate viacero vzorcov, oddeľujte ich bodkočiarkou „;“.Separate multiple formulas with a semi-colon “;”.

  3. Nastavte vlastnosť Default (Predvolené) ovládacieho prvku Source na ClearInput.Set the Default property of Source to ClearInput.

  4. Stlačte kláves F5 a otestujte aplikáciu sčítaním niekoľkých čísel.Press F5, and then test the app by adding several numbers together.

Obnovenie súčtu pridaním ďalšieho tlačidlaAdd another button to reset the total

Pridajte druhé tlačidlo na vymazanie súčtu pred začatím ďalšieho výpočtu.Add a second button to clear the total between calculations.

  1. Pridajte ovládací prvok Tlačidlo, nastavte vlastnosť Text na hodnotu „Clear“ (Vymazať) a pre vlastnosť OnSelect zadajte nasledujúci vzorec:Add another Button control, set its Text property to "Clear", and set its OnSelect property to this formula:

    UpdateContext({Total:0})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.Press F5, add several numbers together, and then click or tap Clear to reset the total.

Zmena vzhľadu tlačidlaChange a button's appearance

Zmena tvaru tlačidlaChange a button's shape

Ovládací prvok Tlačidlo má v PowerApps v predvolenom nastavení obdĺžnikový tvar a zaoblené rohy.By default, PowerApps creates a rectangular Button control with rounded corners. Tvar ovládacieho prvku Tlačidlo môžete meniť nastavením jeho vlastností Height (Výška), Width (Šírka) a Radius (Polomer).You can make basic modifications to the shape of a Button control by setting its Height, Width, and Radius properties.

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.Icons and Shapes provide a wide variety of designs and can perform some of the same basic functions that Button controls do. Ikony a tvary však nemajú vlastnosť Text.However, Icons and Shapes don’t have a Text property.

  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.Add a Button control, and set its Height and Width properties to 300 to make a large square button.

  2. Zmeňte hodnoty vlastností RadiusTopLeft, RadiusTopRight, RadiusBottomLeft a RadiusBottomRight a upravte tak zaoblenie jednotlivých rohov.Modify the RadiusTopLeft, RadiusTopRight, RadiusBottomLeft, and RadiusBottomRight properties to adjust the amount of curvature on each corner. Nižšie sú uvedené príklady vytvorenia rôznych tvarov. Každý vychádza zo štvorcového tlačidla s rozmermi 300 x 300:Here are some examples of different shapes, each one starting from a 300 x 300 square button:

Zmena farby tlačidla pri prechode myšouChange a button's color when you hover over it

V predvolenom nastavení sa farba výplne ovládacieho prvku Tlačidlo pri prejdení myšou stlmí o 20 %.By default, the fill color of a Button control will dim by 20% when you hover over it with a mouse. Toto správanie môžete upraviť zmenou vlastnosti HoverFill, ktorá používa funkciu ColorFade.You can adjust this behavior by changing the HoverFill property, which uses the ColorFade function. 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.If you set the ColorFade formula to a positive percentage, the color becomes lighter when you hover over the button, while a negative percentage makes the color darker.

  • Zmeňte percento ColorFade vo vlastnosti HoverFill niektorého tlačidla, ktoré ste vytvorili, a pozrite sa, ako sa táto zmena prejaví.Change the ColorFade percentage in the HoverFill property of one of the buttons that you created, and observe the effects.

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").You can also specify the color of a Button control by setting its HoverFill property to a formula that contains the ColorValue function instead of the ColorFade function, as in ColorValue("Red").

Poznámka

Hodnota farby môže byť ľubovoľná farebná definícia štýlov CSS – názov alebo šestnástková hodnota.The color value can be any CSS color definition, either a name or a hex value.

  • Nahraďte funkciu ColorFade funkciou ColorValue pre ľubovoľné vytvorené tlačidlo a pozrite sa, ako sa zmena prejaví.Replace the ColorFade function with a ColorValue function in one of the buttons that you created, and observe the effects.

Pokyny na zjednodušenie ovládaniaAccessibility guidelines

Farebný kontrastColor contrast

Podpora čítačiek obrazovkyScreen reader support

  • Musí existovať vlastnosť Text.Text must be present.

Podpora klávesniceKeyboard support