Responzivní design pomocí kontejnerů

Úvod do Power Apps

Luise Freese

Azure & Power Platform Architect

Proč responzivní design?

Stejná aplikace funguje na telefonech, tabletech i noteboocích
Pevné rozvržení se na malých obrazovkách ořízne, na velkých působí ztraceně
Responzivní = rozvržení se přizpůsobí

Telefon, tablet a notebook ukazující, jak se stejná aplikace přizpůsobuje z jednosloupcového na vícesloupcové rozvržení.

Moderní kontejnery rozvržení

Ilustrace porovnávající svislý a vodorovný kontejner rozvržení s prvky uspořádanými pod sebou a vedle sebe.

Svislý kontejner rozvržení řadí prvky shora dolů
Vodorovný kontejner rozvržení řadí prvky zleva doprava
Moderní prvky vyplňují dostupný prostor

Flexibilní šířka a výška

FlexibleWidth a FlexibleHeight
Když je zapnuto, prvek se roztáhne a vyplní kontejner
Když je vypnuto, prvek si zachová pevnou velikost

Gallery1.FlexibleHeight = true    // stretches with screen
Gallery1.FlexibleWidth  = false   // stays at fixed reading width

LayoutMinWidth a LayoutMinHeight

Telefon vs. tablet znázorňující LayoutMinWidth jako bod zlomu, kdy se rozvržení mění z jednosloupcového na boční panel s obsahem.

Kontejner potřebuje dostatek prostoru, aby se správně rozvrhl
LayoutMinWidth = nejmenší šířka, než se rozvržení přeuspořádá
Spouští jiné rozvržení pro telefony a tablety

Nastavení zobrazení aplikace

Nastavení → Zobrazení určuje orientaci a velikost
Rozvržení aplikace: Pevné přiblíží na jeden poměr stran, Responzivní se přizpůsobí obrazovce
Otestuj na více velikostech

Dialogové okno Nastavení v Power Apps Studio na kartě Zobrazení s možnostmi rozvržení, orientace a velikosti plátna

Předpřipravená rozvržení

Skutečný snímek obrazovky s nabídkou Nová obrazovka v Power Apps Studio, zobrazující předpřipravené šablony rozvržení: Blank, Split screen, Sidebar, Header and footer, Approval request a Welcome screen, každá s malým náhledem

+ New screen obsahuje předpřipravené šablony rozvržení
Sidebar, Header and footer, Split screen jsou už responzivní
Doporučený výchozí bod pro tvoji první responzivní aplikaci

Co si vytvoříš

Zabal prvky do kontejneru rozvržení · Přepínej mezi velikostmi zařízení · Sleduj, jak aplikace reaguje

Ilustrace aplikace na telefonu, tabletu a notebooku ukazující, jak se rozvržení galerie přizpůsobuje každé velikosti obrazovky.

Pojďme cvičit!

Úvod do Power Apps