Điều khiển Shimmer

Một điều khiển được sử dụng để hiển thị trải nghiệm tải.

Lưu ý

Toàn bộ hướng dẫn sử dụng và mã nguồn có trong kho lưu trữ thành phần mã GitHub.

Description

Thành phần mã này cung cấp một trình bao bọc xung quanh điều khiển Fluent UI Shimmer được liên kết với một nút để sử dụng trong canvas & các trang tùy chỉnh.

Thuộc tính khóa

Thuộc tính	Description
Items	Các mục hành động cần kết xuất
Rows	Các mục hành động cần kết xuất
SpacebetweenShimmer	Khoảng cách hoặc Khoảng cách giữa mỗi Shimmer trong trường hợp có nhiều hàng.

Thuộc tính mục

Mỗi bản ghi trong Bảng bên dưới chứa các giá trị có thể có sau đây.

Thuộc tính	Description
ItemKey	Yêu cầu. Phím được sử dụng để chỉ ra ShimmerElement cụ thể. Khóa phải là duy nhất.
ItemType	Yêu cầu. Loại phần tử Shimmer từ danh sách ba phần tử lung linh, tức là hình tròn, khoảng trống & đường kẻ.
ItemRowKey	Yêu cầu. Phím được sử dụng để chỉ ra RowKey và thiết lập mối quan hệ.
ItemHeight	Chiều cao của ShimmerElement
ItemWidth	Chiều rộng của ShimmerElement
ItemVerticalAlign	Để chỉ định cách phần tử sẽ căn chỉnh. tức là 'trên cùng', 'chính giữa' hoặc 'dưới cùng'.

Ví dụ về công thức Power Fx:

Table({ItemKey:"1",ItemWidth:"3.8",ItemHeight:60,ItemRowKey:"1",ItemType:"circle"},{ItemKey:"2",ItemWidth:"2",ItemHeight:10,ItemRowKey:"1",ItemType:"gap"},{ItemKey:"3",ItemWidth:"20",ItemHeight:10,ItemRowKey:"1",ItemType:"line"},{ItemKey:"4",ItemWidth:"2",ItemHeight:10,ItemRowKey:"1",ItemType:"gap"},{ItemKey:"5",ItemWidth:"2.8",ItemHeight:30,ItemRowKey:"1",ItemType:"line"},{ItemKey:"6",ItemWidth:"2",ItemHeight:10,ItemRowKey:"1",ItemType:"gap"},{ItemKey:"7",ItemWidth:"20",ItemHeight:10,ItemRowKey:"1",ItemType:"line"},{ItemKey:"8",ItemWidth:"1",ItemHeight:10,ItemRowKey:"1",ItemType:"gap"},{ItemKey:"9",ItemWidth:"3.8",ItemHeight:40,ItemRowKey:"1",ItemType:"line"},{ItemKey:"10",ItemWidth:"2",ItemHeight:10,ItemRowKey:"1",ItemType:"gap"},{ItemKey:"11",ItemWidth:"20",ItemHeight:10,ItemRowKey:"1",ItemType:"line"},{ItemKey:"12",ItemWidth:"2",ItemHeight:10,ItemRowKey:"1",ItemType:"gap"},{ItemKey:"13",ItemWidth:"2.8",ItemHeight:30,ItemRowKey:"1",ItemType:"line"},{ItemKey:"14",ItemWidth:"2",ItemHeight:10,ItemRowKey:"1",ItemType:"gap"},{ItemKey:"15",ItemWidth:"20",ItemHeight:10,ItemRowKey:"1",ItemType:"line"},{ItemKey:"16",ItemWidth:"1",ItemHeight:10,ItemRowKey:"1",ItemType:"gap"})

Giá trị thuộc tính hàng (rows_Items)

Mỗi bản ghi trong Bảng bên dưới chứa các giá trị có thể có sau đây.

Thuộc tính	Description
RowKey	Yêu cầu. Phím sẽ sử dụng để chỉ ra Shimmer cụ thể và khi thêm các mục phụ. Khóa phải là duy nhất.
RowOrder	Thứ tự mà Shimmer sẽ kết xuất
RowCount	Số lượng Shimmers sẽ kết xuất
RowWidth	Chiều rộng của Shimmer

Ví dụ về công thức Power Fx:

Table(
    {
        RowKey: "1",
        RowOrder:1,
        RowCount:5,
        RowWidth: 100
    }
)

Thuộc tính kiểu

Thuộc tính	Description
Theme	Chấp nhận chuỗi JSON được tạo bằng cách sử dụng Fluent UI Theme Designer (windows.net). Để trống phần này sẽ sử dụng chủ đề mặc định được xác định bởi Power Apps. Xem chủ đề để biết hướng dẫn về cách đặt cấu hình.
AccessibilityLabel	Nhãn aria cho trình đọc màn hình

Chủ đề ví dụ

Xâu JSON Chủ đề được chuyển vào thuộc tính thành phần, trong khi varTheme có thể được sử dụng để tạo kiểu cho các thành phần tiêu chuẩn khác, chẳng hạn như các nút bằng cách sử dụng các màu riêng lẻ.

Để biết thêm thông tin về bảng màu sẽ được sử dụng khi làm việc với Shimmer, hãy tham khảo phần IShimmerColors Interface của hướng dẫn sử dụng IShimmerElement.

Giới hạn

Chỉ có thể sử dụng thành phần mã này trong ứng dụng canvas và trang tùy chỉnh.