Bagikan melalui

ContextMenu menguasai

  • Artikel

Kontrol yang digunakan untuk memasukkan perintah.

Catatan

Dokumentasi lengkap dan kode sumber yang ditemukan di repositori komponen kode GitHub.

ContextMenu kontrol.

Description

Menu kontekstual (ContextMenu) adalah daftar perintah yang didasarkan pada konteks pilihan, mouse hover, atau fokus keyboard. Merupakan salah satu permukaan perintah yang paling efektif dan sangat digunakan, dan dapat digunakan di berbagai tempat.

Komponen kode ini menyediakan wrapper di sekitar kontrol ContextualMenu Fluent UI yang terikat ke tombol untuk digunakan pada halaman kustom dan aplikasi kanvas.

Properti

Properti kunci

Properti Description
Items Item tindakan untuk ditampilkan. Item pertama dianggap sebagai item root.

Items Properti

Nama Description
ItemDisplayName Nama tampilan item menu.
ItemKey Kunci untuk digunakan guna menunjukkan item mana yang dipilih, dan kapan menambahkan sub-item. Kunci harus unik.
ItemEnabled Diatur ke false jika pilihan dinonaktifkan.
ItemVisible Diatur ke false jika pilihan tidak terlihat.
ItemChecked Diatur ke true jika pilihan dicentang.
ItemIconName Ikon Fluent UI untuk digunakan (lihat Ikon Fluent UI)
ItemIconColor Warna untuk menampilkan ikon sebagai (contoh: bernama, nilai rgb atau digit).
ItemIconOnly Jangan tampilkan label teks - hanya ikon.
ItemHeader Render item sebagai header bagian. Jika ada item yang ItemParentKey-nya ditetapkan ke kunci item ini, maka item akan ditambahkan sebagai item yang dikelompokkan secara semantis di dalam bagian ini.
ItemTopDivider Render pemisah di sebelah atas bagian.
ItemDivider Render item sebagai pemisah bagian - atau jika item adalah header (ItemHeader = true), maka mengontrol apakah akan menyajikan pemisah di bagian bawah bagian.
ItemParentKey Render pilihan sebagai item anak dari pilihan lain.

Catatan

  • ItemIconColor akan mengganti nilai Theme komponen dan mengabaikan warna status lainnya (misalnya, dinonaktifkan).
  • ItemHeader dan ItemDivider harus diatur ke true untuk dirender sebagai pembagi. Jika diatur ke false, ia mengharapkan nilai lain dan akan menampilkan kosong.
  • Menambahkan ItemChecked properti dan perilaku item submenu akan mencegah submenu ditutup saat diklik.

Contoh

Rumus Power Fx contoh untuk Items:

  Table(
      {
          ItemKey: "File",
          ItemIconName: "save",
          ItemDisplayName: "Save",
          ItemOverflow:true
      },
       {
          ItemKey: "Delete",
          ItemIconName: "Delete",
          ItemDisplayName: "Delete",
          ItemOverflow:true
      }
  )

Properti gaya

Properti Description
Theme Menerima string JSON yang dihasilkan menggunakan Desainer Tema Fluent UI (windows.net). Membiarkan ini kosong akan menggunakan tema default yang didefinisikan oleh Power Apps. Membiarkan ini kosong akan menggunakan tema default yang didefinisikan oleh Power Apps. Untuk panduan tentang cara mengkonfigurasi, lihat tema.
Chevron Menampilkan atau menyembunyikan chevron bawah pada tombol root
IconColor Opsional. warna ikon pada tombol menu konteks.
HoverIconColor Opsional. warna ikon jika kursor berada di atas tombol menu konteks.
IconSize Opsional. Dalam piksel, ukuran ikon pada tombol menu konteks.
FontSize Opsional. Dalam piksel, ukuran teks pada tombol menu konteks.
FontColor Opsional. warna teks pada tombol menu konteks.
HoverFontColor Opsional. warna tks jika kursor berada di atas tombol menu konteks.
FillColor Opsional. warna latar belakang pada tombol menu konteks.
HoverFillColor Opsional. warna latar belakang jika kursor berada di atas tombol menu konteks.
TextAlignment Penyelarasan di teks tombol. Nilai yang mungkin: Pusat, Kiri atau Kanan
AccessibilityLabel Aria-label pembaca layar

Properti kejadian

Properti Description
InputEvent Aktivitas untuk dikirim ke kontrol. Misalnya SetFocus. Lihat di bawah.

Perilaku

Mendukung SetFocus sebagai InputEvent.

Mengkonfigurasi perilaku 'On Select'

Gunakan rumus Switch() di properti OnSelect komponen untuk mengkonfigurasi tindakan tertentu untuk tiap item dengan mengacu pada kontrol ItemKey yang dipilih sebagai nilai switch.

Ganti nilai false dengan ekspresi yang sesuai dalam bahasa Power Fx.

  Switch( Self.Selected.ItemKey,
    /* Action for ItemKey 1 */
    "File", false,
    
    /* Action for ItemKey 2 */
    "Delete", false,
  
    /* Default action */
        false
  )

Menetapkan Fokus pada kontrol

Saat dialog baru ditampilkan dan fokus default seharusnya ada pada kontrol, fokus eksplisit yang diatur akan diperlukan.

Untuk melakukan panggilan ke aktivitas input, Anda dapat mengatur variabel konteks yang terikat ke properti Aktivitas Input ke string yang dimulai dengan SetFocus dan diikuti oleh elemen acak untuk memastikan aplikasi mendeteksinya sebagai perubahan.

Misalnya

UpdateContext({ctxResizableTextareaEvent:"SetFocus" & Text(Rand())}));

Selanjutnya, variabel konteks ctxResizableTextareaEvent akan diikat ke properti Input Event dari properti.

Pembatasan

Komponen kode ini hanya dapat digunakan pada aplikasi kanvas dan halaman kustom.