CommandBar kontrol (pratinjau)

Artikel
16/10/2024

Kontrol yang digunakan untuk memasukkan perintah.

Catatan

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

CommandBar kontrol.

Description

CommandBar adalah permukaan yang menampung perintah yang beroperasi pada konten jendela, panel, atau wilayah induk yang berada di atasnya.

Komponen kode ini menyediakan wrapper di sekitar kontrol CommandBar Fluent UI untuk digunakan pada aplikasi kanvas dan halaman kustom.

Properti

Properti kunci

Properti	Description
`Items`	Item tindakan untuk ditampilkan

Struktur item

Setiap item menggunakan skema berikut untuk visualisasi data dalam komponen.

Nama	Description
`ItemDisplayName`	Nama tampilan item bilah perintah.
`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 (misalnya tombol terpisah di bilah perintah).
`ItemSplit`	Diatur ke true jika pilihan dapat diklik dan digunakan sebagai menu flyout menurun.
`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.
`ItemOverflow`	Diatur ke true untuk perilaku luapan
`ItemOverflow`	Render pilihan dalam item yang meluap.
`ItemFarItem`	Render pilihan di grup item jauh pada bilah perintah.
`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.

Contoh

Rumus Power Fx contoh untuk Items dasar:

Table(
    {
        ItemKey: "new",
        ItemDisplayName: "New",
        ItemIconName: "Add"
    },
    {
        ItemKey: "edit",
        ItemDisplayName: "Edit",
        ItemIconName: "Edit"
    },{
        ItemKey: "delete",
        ItemDisplayName: "Delete",
        ItemIconName: "Delete"
    },{
        ItemKey: "refresh",
        ItemDisplayName: "Refresh",
        ItemIconName: "refresh"
    },{
        ItemKey: "help",
        ItemDisplayName: "Help",
        ItemIconName: "help"
    }
)

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. Untuk panduan tentang cara mengkonfigurasi, lihat tema.
`AccessibilityLabel`	Aria-label pembaca layar

Properti kejadian

Properti	Description
`InputEvent`	Aktivitas untuk dikirim ke kontrol. Misalnya `SetFocus`.

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 'new' (e.g., Patch function) */
    "new", false,
    
    /* Action for 'edit' (e.g., Patch function) */
    "edit", false,
    
    /* Action for 'delete' (e.g., Remove function ) */
    "delete", false,
    
    /* Action for 'refresh' (e.g., Refresh function) */
    "refresh", false,
    
    /* Action for 'help' (e.g., email support with the Office 365 connector ) */
    "help", 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.

Rumus Power Fx contoh:

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

Selanjutnya, variabel ctxResizableTextareaEvent akan dibatasi ke properti Aktivitas Input properti.

Pembatasan

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

Lihat catatan pembatasan lainnya dalam tantangan desain komponen.

Bagikan melalui