Ovládacie prvky Tvar a Ikona v službe PowerAppsShape controls and Icon controls in PowerApps

Grafické prvky, pre ktoré môžete nakonfigurovať vlastnosti vzhľadu a správania.Graphics for which you can configure appearance and behavior properties.

PopisDescription

Tieto ovládacie prvky obsahujú šípky, geometrické tvary, ikony akcie a symboly, pre ktoré môžete nakonfigurovať vlastnosti, ako sú výplň, veľkosť a umiestnenie.These controls include arrows, geometric shapes, action icons, and symbols for which you can configure properties such as fill, size, and location. Môžete tiež nastaviť ich vlastnosť OnSelect tak, aby aplikácia reagovala, ak používateľ klikne alebo ťukne na ovládací prvok.You can also configure their OnSelect property so that the app responds if the user clicks or taps the control.

Základné vlastnostiKey properties

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

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

Ďalšie vlastnostiAdditional properties

AccessibleLabel – označenie pre čítačky obrazovky.AccessibleLabel – Label for screen readers.

DisplayMode – údaj o tom, či ovládací prvok umožňuje vstup používateľa (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).

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.

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

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.

PressedBorderColor – farba orámovania ovládacieho prvku po ťuknutí alebo kliknutí na ovládací prvok používateľom.PressedBorderColor – The color of a control's border 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.

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.

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( NázovObrazovky, ScreenTransition )Navigate( ScreenName, ScreenTransition )

PríkladExample

  1. Pomenujte predvolený ovládací prvok Obrazovka názvom Cieľ, pridajte ovládací prvok Označenie a nastavte jeho vlastnosť Text tak, aby zobrazovala názov Cieľ.Name the default Screen control Target, add a Label control, and set its Text property to show Target.

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

  2. Pridajte ovládací prvok Obrazovka a pomenujte ho Zdroj.Add a Screen control, and name it Source.

  3. Do prvku Source pridajte ovládací prvok Tvar a jeho vlastnosť OnSelect nastavte na tento vzorec:In Source, add a Shape control, and set its OnSelect property to this formula:
    Navigate(Cieľ, ScreenTransition.Fade)Navigate(Target, ScreenTransition.Fade)

  4. Stlačte kláves F5 a potom kliknite alebo ťuknite na ovládací prvok Tvar.Press F5, and then click or tap the Shape control.

    Spustí sa obrazovka Target.The Target screen appears.

  5. (voliteľné) Stlačením klávesu Esc sa vráťte do predvoleného pracovného priestoru, pridajte ovládací prvok Tvar do ovládacieho prvku Target a nastavte vlastnosť OnSelect ovládacieho prvku Tvar na tento vzorec:(optional) Press Esc to return to the default workspace, add a Shape control to Target, and set the OnSelect property of the Shape control to this formula:
    Navigate(Zdroj, ScreenTransition.Fade)Navigate(Source, ScreenTransition.Fade)

Pokyny na zjednodušenie ovládaniaAccessibility guidelines

Farebný kontrastColor contrast

Nasledujúce informácie sa vzťahujú len na grafické prvky, ktoré slúžia ako tlačidlá alebo nie sú určené len na dekoráciu.The following applies only to graphics that are used as buttons or are otherwise not just for decoration.

Ikony:For icons:

Tvary s orámovaním:For shapes with borders:

Tvary bez orámovania:For shapes without borders:

  • Fill a farba okolo ovládacieho prvkuFill and the color outside the control
  • PressedFill a farba okolo ovládacieho prvku (ak sa používa ako tlačidlo)PressedFill and the color outside the control (if used as a button)
  • HoverFill a farba okolo ovládacieho prvku (ak sa používa ako tlačidlo)HoverFill and the color outside the control (if used as a button)

Podpora čítačiek obrazovkyScreen reader support

  • Musí existovať vlastnosť AccessibleLabel, ak grafika slúži ako tlačidlo alebo nie je určená len na dekoráciu.AccessibleLabel must be present, if the graphic is used as a button or is otherwise not just for decoration.

  • Vlastnosť AccessibleLabel musí byť prázdna alebo musí obsahovať prázdny reťazec "", ak je grafika určená len na dekoráciu.AccessibleLabel must be empty or the empty string "", if the graphic is purely for decoration. Čítačky obrazovky tak budú grafiku ignorovať.This causes screen readers to ignore the graphic.

  • Vlastnosť AccessibleLabel môže byť prázdna alebo môže obsahovať prázdny reťazec "", ak grafika poskytuje nadbytočné informácie.AccessibleLabel can be empty or the empty string "", if the graphic provides redundant information.

    Príkladom je ikona Nastavenia s vlastnosťou AccessibleLabel nastavenou na hodnotu Nastavenia.For example, a Settings icon with its AccessibleLabel set to Settings. Táto ikona sa nepoužíva ako tlačidlo.This icon is not used as a button. Nachádza sa vedľa ovládacieho prvku Označenie, ktorý má takisto text Nastavenia.It is next to a Label that also says Settings. Čítačky obrazovky budú ikonu čítať ako Nastavenia a označenie znova ako Nastavenia.Screen readers will read the icon as Settings, and the label as Settings again. To je zbytočné.This is unnecessarily verbose. V takom prípade ikona nevyžaduje vlastnosť AccessibleLabel.In this case, the icon does not need an AccessibleLabel.

    Dôležité

    Čítačky obrazovky budú vždy čítať ikony alebo tvary, ktoré majú vlastnosť TabIndex nastavenú na nulu alebo väčšiu hodnotu, aj keď je vlastnosť AccessibleLabel prázdna.Screen readers will always read icons or shapes that have TabIndex of zero or greater, even if AccessibleLabel is empty. Je to pretože sa vykresľujú ako tlačidlá.This is because they are rendered as buttons. Ak nie je zadaná žiadna vlastnosť AccessibleLabel, čítačky obrazovky budú jednoducho grafiku čítať ako tlačidlo.If no AccessibleLabel is provided, screen readers will simply read the graphic as button.

Podpora klávesniceKeyboard support

  • Ak sa grafika používa ako tlačidlo, vlastnosť TabIndex musí byť nastavená na nulu alebo väčšiu hodnotu.TabIndex must be zero or greater, if the graphic is used as a button. Používateľom klávesnica to umožní na ňu prejsť.This allows keyboard users to navigate to it.

  • Ak sa grafika používa ako tlačidlo, ukazovatele zamerania musia byť zreteľne vidieť.Focus indicators must be clearly visible, if the graphic is used as a button. Dosiahnete to použitím vlastností FocusedBorderColor a FocusedBorderThickness.Use FocusedBorderColor and FocusedBorderThickness to achieve this.

    Poznámka

    Ak je vlastnosť TabIndex nastavená na nulu alebo väčšiu hodnotu, ikona alebo tvar sa vykreslí ako tlačidlo.When TabIndex is zero or greater, the icon or shape is rendered as a button. Vzhľad sa nezmení, ale čítačky obrazovky budú obrázok správne identifikovať ako tlačidlo.There is no change to the visual appearance, but screen readers will correctly identify the image as a button. Ak je vlastnosť TabIndex nastavená na menšiu hodnotu ako nula, ikona alebo tvar sa identifikuje ako obrázok.When TabIndex is less than zero, the icon or shape is identified as an image.