Bagikan melalui

Breadcrumb menguasai

  • Artikel

kontrol yang digunakan untuk memberikan navigasi.

Catatan

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

Kontrol remah roti.

Description

Breadcrumb Kontrol harus digunakan sebagai alat bantu navigasi di aplikasi atau situs Anda. Halaman ini menunjukkan lokasi halaman saat ini dalam satu hierarki dan membantu pengguna memahami lokasinya terkait dengan hierarki lainnya. Breadcrumb juga menyediakan akses satu klik ke tingkat hierarki yang lebih tinggi.

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

Properti

Properti kunci

Properti Description
SelectedKey Ini menunjukkan kunci yang dipilih. Pembaruan ini akan dilakukan melalui aktivitas OnChange saat pengguna berinteraksi dengan kontrol.
Items Item tindakan untuk ditampilkan

Items Properti

Setiap item menggunakan skema berikut untuk visualisasi data dalam komponen.

Nama Description
ItemDisplayName Nama tampilan item breadcrumb
ItemKey Kunci untuk digunakan guna menunjukkan item mana yang dipilih, dan kapan menambahkan sub-item. Kunci harus unik.
ItemClickable Diatur ke salah jika item breadcrumb tertentu tidak dapat diklik.

Rumus Power Fx contoh:

Table(
    {
        ItemKey: "1",
        ItemDisplayName: "General",
        ItemClickable: true
    },
    {
        ItemKey: "2",
        ItemDisplayName: "Document",
        ItemClickable: true
    }
)

Properti gaya

Nama 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
MaxDisplayedItems Jumlah maksimum breadcrumb untuk ditampilkan sebelum digabung. Jika nol, maka semua breadcrumb akan ditampilkan.
OverflowIndex Indeks opsional dengan item yang meluap akan diciutkan. Secara default, diatur ke nol.

Properti kejadian

Nama 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.

Karena kontrol ini digunakan untuk navigasi, tindakan logis adalah menggunakan fungsi navigasi (idealnya ke layar yang relevan dengan data terkait yang dimuat).

  Switch( Self.Selected.ItemKey,
    /* Action for ItemKey 1 */
    "1", false,
    
    /* Action for ItemKey 2 */
    "2", 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.