Responsiv design med containrar

Introduktion till Power Apps

Luise Freese

Azure & Power Platform Architect

Varför responsivt?

 

  • Samma app öppnas på telefoner, surfplattor, bärbara datorer
  • En fast layout klipps på små skärmar och ser malplacerad ut på stora
  • Responsiv = layouten anpassar sig

$$

Telefon, surfplatta och bärbar dator som visar samma app anpassa sin layout från en kolumn till flera kolumner.

Introduktion till Power Apps

Moderna layoutcontainrar

Illustration som jämför vertikala och horisontella layoutcontainrar med staplade kontra sida-vid-sida-placerade underkontroller.

 

  • Vertikal layoutcontainer, staplar underkontroller uppifrån och ner
  • Horisontell layoutcontainer, placerar underkontroller från vänster till höger
  • Moderna kontroller anpassar sig till tillgängligt utrymme
Introduktion till Power Apps

Flexibel bredd och höjd

 

  • FlexibleWidth och FlexibleHeight
  • På, kontrollen sträcker ut sig för att fylla sin container
  • Av, kontrollen behåller sin fasta storlek

$$

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

LayoutMinWidth och LayoutMinHeight

Telefon jämfört med surfplatta som visar LayoutMinWidth som brytpunkten där layouten växlar från en kolumn till sidopanel plus innehåll.

 

  • En container behöver tillräckligt med utrymme för att layouta korrekt
  • LayoutMinWidth = den minsta bredd innan den ordnas om
  • Utlöser en annan layout för telefoner jämfört med surfplattor
Introduktion till Power Apps

Appens visningsinställningar

 

  • Settings → Display anger orientering och storlek
  • App layout: Fixed zoomar till ett förhållande, Responsive anpassar sig till skärmen
  • Testa i flera storlekar

$$

Power Apps Studio Settings-dialog på fliken Display, som visar alternativ för layout, orientering och dukstorlek

Introduktion till Power Apps

De fördefinierade layouterna

Verklig skärmdump av Power Apps Studios flyout-meny New screen som visar fördefinierade layoutmallar: Blank, Split screen, Sidebar, Header and footer, Approval request och Welcome screen, var och en med en liten förhandsvisning

 

  • + New screen innehåller färdiga layoutmallar
  • Sidebar, Header and footer, Split screen – redan responsiva
  • Rekommenderad utgångspunkt för din första responsiva app
Introduktion till Power Apps

Det här ska du bygga

$$

Placera kontroller i en layoutcontainer · Växla mellan enhetsstorlekar · Se appen anpassa sig

Illustration av en app på telefon, surfplatta och bärbar dator som visar galleriets layout anpassa sig till varje skärmstorlek.

Introduktion till Power Apps

Nu kör vi en övning!

Introduktion till Power Apps

Preparing Video For Download...