Desain responsif dengan container

Pengantar Power Apps

Luise Freese

Azure & Power Platform Architect

Mengapa responsif?

 

  • Aplikasi yang sama dibuka di ponsel, tablet, laptop
  • Tata letak tetap akan terpotong di layar kecil, terlihat kosong di layar besar
  • Responsif = tata letak beradaptasi

$$

Ponsel, tablet, dan laptop menampilkan aplikasi yang sama beradaptasi dari satu kolom ke multi-kolom.

Pengantar Power Apps

Container layout modern

Ilustrasi membandingkan container Layout vertikal dan horizontal dengan kontrol anak ditumpuk vs berdampingan.

 

  • Container layout vertikal, menumpuk anak dari atas ke bawah
  • Container layout horizontal, menyusun anak dari kiri ke kanan
  • Kontrol modern mengalir sesuai ruang yang ada
Pengantar Power Apps

Lebar dan tinggi fleksibel

 

  • FlexibleWidth dan FlexibleHeight
  • On, kontrol melar memenuhi containernya
  • Off, kontrol mempertahankan ukuran tetap

$$

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

LayoutMinWidth dan LayoutMinHeight

Ponsel vs tablet menampilkan LayoutMinWidth sebagai breakpoint saat tata letak beralih dari satu kolom ke panel samping plus konten.

 

  • Container butuh cukup ruang agar tertata dengan baik
  • LayoutMinWidth = lebar minimum sebelum ditata ulang
  • Memicu tata letak berbeda untuk ponsel vs tablet
Pengantar Power Apps

Pengaturan tampilan aplikasi

 

  • Settings → Display mengatur orientasi dan ukuran
  • App layout: Fixed mengikuti satu rasio, Responsive menyesuaikan ke layar
  • Uji pada berbagai ukuran

$$

Dialog Settings Power Apps Studio pada tab Display, menampilkan opsi layout, orientasi, dan ukuran kanvas

Pengantar Power Apps

Layout bawaan

Tangkapan layar nyata panel New screen di Power Apps Studio menampilkan templat layout siap pakai: Blank, Split screen, Sidebar, Header and footer, Approval request, dan Welcome screen, masing-masing dengan pratinjau kecil

 

  • + New screen menyertakan templat layout siap pakai
  • Sidebar, Header and footer, Split screen, sudah responsif
  • Titik awal yang direkomendasikan untuk aplikasi responsif pertama Anda
Pengantar Power Apps

Apa yang akan Anda buat

$$

Bungkus kontrol dalam Layout container · Beralih antar ukuran perangkat · Lihat aplikasi merespons

Ilustrasi aplikasi pada ponsel, tablet, dan laptop, menunjukkan galeri beradaptasi ke setiap ukuran layar.

Pengantar Power Apps

Ayo berlatih!

Pengantar Power Apps

Preparing Video For Download...