Kontrol tombol di Power Apps

Kontrol yang dapat diklik atau diketam pengguna untuk berinteraksi dengan aplikasi.

Description

Konfigurasikan properti OnSelect dari kontrol Tombol untuk menjalankan satu atau beberapa rumus saat pengguna mengklik atau mengetuk kontrol.

Properti kunci

OnSelect – Tindakan yang harus dilakukan saat pengguna mengetuk atau mengklik kontrol.

Teks – Teks yang muncul pada kontrol atau jenis pengguna ke dalam kontrol.

Properti tambahan

Ratakan – Lokasi teks terkait dengan pusat horizontal kontrolnya.

AutoDisableOnSelect – Secara otomatis menonaktifkan kontrol saat perilaku OnSelect sedang berjalan.

BorderColor – Warna batas kontrol.

BorderStyle – Apakah batas kontrol Solid, Dashed, Dotted, atau None.

BorderThickness – Ketebalan batas kontrol.

Warna – Warna teks dalam kontrol.

ContentLanguage - Bahasa konten kontrol, jika berbeda dari kontainer kontrol.

DisplayMode – Apakah kontrol mengizinkan input pengguna (Edit), hanya menampilkan data (Tampilan), atau dinonaktifkan (Dinonaktifkan).

DisabledBorderColor – Warna batas kontrol jika properti DisplayMode kontrol diatur ke Dinonaktifkan.

DisabledColor – Warna teks dalam kontrol jika properti DisplayMode diatur ke Dinonaktifkan.

DisabledFill – Warna latar belakang kontrol jika properti DisplayMode diatur ke Dinonaktifkan.

FocusedBorderColor – Warna batas kontrol saat kontrol difokuskan.

FocusedBorderThickness – Ketebalan batas kontrol saat kontrol difokuskan.

Isi – Warna latar belakang kontrol.

Font – Nama keluarga font tempat teks muncul.

FontWeight – Bobot teks dalam kontrol: Tebal, Semibold, Normal, atau Lebih Terang.

Tinggi – Jarak antara tepi atas dan bawah kontrol.

HoverBorderColor – Warna batas kontrol saat pengguna menyimpan penunjuk mouse pada kontrol tersebut.

HoverColor – Warna teks dalam kontrol saat pengguna menyimpan penunjuk mouse di atasnya.

HoverFill – Warna latar belakang kontrol saat pengguna menyimpan penunjuk mouse di atasnya.

Miring – Apakah teks dalam kontrol miring.

PaddingBottom – Jarak antara teks dalam kontrol dan tepi bawah kontrol tersebut.

PaddingLeft – Jarak antara teks dalam kontrol dan tepi kiri kontrol tersebut.

PaddingRight – Jarak antara teks dalam kontrol dan tepi kanan kontrol tersebut.

PaddingTop – Jarak antara teks dalam kontrol dan tepi atas kontrol tersebut.

DitekanBenar saat kontrol sedang ditekan, salah jika tidak.

PressedBorderColor – Warna batas kontrol saat pengguna mengetuk atau mengklik kontrol tersebut.

PressedColor – Warna teks dalam kontrol saat pengguna mengetuk atau mengklik kontrol tersebut.

PressedFill – Warna latar belakang kontrol saat pengguna mengetuk atau mengklik kontrol tersebut.

RadiusBottomLeft – Tingkat di mana sudut kiri bawah kontrol dibulatkan.

RadiusBottomRight – Tingkat di mana sudut kanan bawah kontrol dibulatkan.

RadiusTopLeft – Tingkat di mana sudut kiri atas kontrol dibulatkan.

RadiusTopRight – Tingkat di mana sudut kanan atas kontrol dibulatkan.

Ukuran – Ukuran font teks yang muncul pada kontrol.

Coretan – Apakah garis muncul melalui teks yang muncul pada kontrol.

TabIndex – Urutan navigasi keyboard dalam kaitannya dengan kontrol lain.

Tipsalat – Teks penjelasan yang muncul saat pengguna mengarahkan kumparan ke kontrol.

Garis bawah – Apakah garis muncul di bawah teks yang muncul pada kontrol.

VerticalAlign – Lokasi teks pada kontrol sehubungan dengan pusat vertikal kontrol tersebut.

Terlihat – Apakah kontrol muncul atau disembunyikan.

Lebar – Jarak antara tepi kiri dan kanan kontrol.

X – Jarak antara tepi kiri kontrol dan tepi kiri kontainer induknya (layar jika tidak ada kontainer induk).

Y – Jarak antara tepi atas kontrol dan tepi atas kontainer induk (layar jika tidak ada kontainer induk).

Navigasi( ScreenName, ScreenTransitionValue )

Examples

Menambahkan rumus dasar ke tombol

  1. Tambahkan kontrol Text input dan beri nama Sumber.

    Tidak tahu cara menambahkan, memberi nama, dan mengonfigurasi kontrol?

  2. Tambahkan kontrol Tombol , atur properti Teks-nya ke "Tambahkan", dan atur properti OnSelect-nya ke rumus ini:
    UpdateContext({Total:Total + Value(Source.Text)})

    Ingin informasi selengkapnya tentang fungsi UpdateContext atau fungsi lainnya?

  3. Tambahkan kontrol Label , atur properti Teksnya di bilah rumus ke Nilai(Total), lalu tekan F5.

  4. Kosongkan teks default dari Sumber, ketik angka di dalamnya, lalu klik atau ketuk Tambahkan.

    Kontrol Label memperlihatkan nomor yang Anda ketik.

  5. Kosongkan nomor dari Sumber, ketik nomor lain di dalamnya, lalu klik atau ketuk Tambahkan.

    Kontrol Label memperlihatkan jumlah dua angka yang Anda ketik.

  6. (opsional) Ulangi langkah sebelumnya satu atau beberapa kali.

  7. Untuk kembali ke ruang kerja default, tekan Esc (atau klik atau ketuk ikon tutup di sudut kanan atas).

Mengonfigurasi tombol dengan beberapa rumus

Tambahkan rumus yang menghapus kontrol input Teks di antara entri.

  1. Atur properti HintTextsumber ke "Masukkan angka".

  2. Atur properti OnSelectdari Tambahkan ke rumus ini:

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

    Nota

    Pisahkan beberapa rumus dengan titik koma ";".

  3. Atur properti DefaultSumber ke ClearInput.

  4. Tekan F5, lalu uji aplikasi dengan menambahkan beberapa angka bersama-sama.

Tambahkan tombol lain untuk mereset total

Tambahkan tombol kedua untuk menghapus total antara perhitungan.

  1. Tambahkan kontrol Tombol lain, atur properti Teksnya ke "Hapus", dan atur properti OnSelect-nya ke rumus ini:

    UpdateContext({Total:0})

  2. Tekan F5, tambahkan beberapa angka bersama-sama, lalu klik atau ketuk Hapus untuk mengatur ulang total.

Mengubah tampilan tombol

Mengubah bentuk tombol

Secara default, Power Apps membuat kontrol Tombol persegi panjang dengan sudut bulat. Anda dapat membuat modifikasi dasar pada bentuk kontrol Tombol dengan mengatur properti Tinggi, Lebar, dan Radiusnya .

Nota

Ikon dan Bentuk menyediakan berbagai desain dan dapat melakukan beberapa fungsi dasar yang sama dengan yang dilakukan kontrol Tombol . Namun, Ikon dan Bentuk tidak memiliki properti Teks .

  1. Tambahkan kontrol Tombol , dan atur properti Tinggi dan Lebarnya ke 300 untuk membuat tombol persegi besar.

  2. Ubah properti RadiusTopLeft, RadiusTopRight, RadiusBottomLeft, dan RadiusBottomRight untuk menyesuaikan jumlah kelengkungan di setiap sudut. Berikut adalah beberapa contoh bentuk yang berbeda, masing-masing mulai dari tombol persegi 300 x 300:

Mengubah warna tombol saat Anda mengarahkan mouse ke atasnya

Secara default, warna isian kontrol Tombol akan redup sebesar 20% saat Anda mengarahkan kursor ke atasnya dengan mouse. Anda dapat menyesuaikan perilaku ini dengan mengubah properti HoverFill , yang menggunakan fungsi ColorFade . Jika Anda mengatur rumus ColorFade ke persentase positif, warna menjadi lebih terang saat Anda mengarahkan mouse ke atas tombol, sementara persentase negatif membuat warna lebih gelap.

  • Ubah persentase ColorFade di properti HoverFill dari salah satu tombol yang Anda buat, dan amati efeknya.

Anda juga dapat menentukan warna kontrol Tombol dengan mengatur properti HoverFill-nya ke rumus yang berisi fungsi ColorValue alih-alih fungsi ColorFade , seperti dalam ColorValue("Red").

Nota

Nilai warna dapat berupa definisi warna CSS apa pun, baik nama atau nilai hex.

  • Ganti fungsi ColorFade dengan fungsi ColorValue di salah satu tombol yang Anda buat, dan amati efeknya.

Panduan aksesibilitas

Kontras warna

Dukungan pembaca layar

Dukungan keyboard