Shimmer ตัวควบคุม

ตัวควบคุมที่ใช้เพื่อแสดงประสบการณ์การโหลด

หมายเหตุ

รหัสแหล่งที่มาของส่วนประกอบและข้อมูลเพิ่มเติมใน ที่เก็บส่วนประกอบของโค้ด GitHub

Description

ส่วนประกอบของโค้ดนี้จัดเตรียมแรปเปอร์รอบตัวควบคุม Fluent UI Shimmer ที่ผูกกับปุ่มเพื่อใช้ในพื้นที่ทำงานและหน้าแบบกำหนดเอง

คุณสมบัติที่สำคัญ

คุณสมบัติ	Description
Items	รายการการดำเนินการที่จะแสดง
Rows	รายการการดำเนินการที่จะแสดง
SpacebetweenShimmer	ช่องว่างหรือช่องระหว่าง Shimmer แต่ละตัวในกรณีที่มีหลายแถว

คุณสมบัติสินค้า

แต่ละเรกคอร์ดในตารางด้านล่างประกอบด้วยค่าต่างๆ ดังต่อไปนี้

คุณสมบัติ	Description
ItemKey	จำเป็น ปุ่มที่จะใช้เพื่อระบุ ShimmerElement ที่เฉพาะเจาะจง คีย์ต้องไม่ซ้ำกัน
ItemType	จำเป็น ชนิดองค์ประกอบ Shimmer จากรายการองค์ประกอบระยับสามชนิด ได้แก่ วงกลม ช่องว่าง และเส้น
ItemRowKey	จำเป็น คีย์ที่ใช้เพื่อระบุ RowKey และสร้างความสัมพันธ์
ItemHeight	ความสูงของ ShimmerElement
ItemWidth	ความกว้างของ ShimmerElement
ItemVerticalAlign	เพื่อระบุว่าองค์ประกอบควรจัดตำแหน่งอย่างไร เช่น ด้านบน กึ่งกลาง หรือ ด้านล่าง

ตัวอย่างสูตร 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"})

ค่าคุณสมบัติแถว (rows_Items)

แต่ละเรกคอร์ดในตารางด้านล่างประกอบด้วยค่าต่างๆ ดังต่อไปนี้

คุณสมบัติ	Description
RowKey	จำเป็น คีย์ที่ใช้ระบุ Shimmer เฉพาะ และเมื่อเพิ่มรายการย่อย คีย์ต้องไม่ซ้ำกัน
RowOrder	ลำดับที่ Shimmer ควรแสดง
RowCount	จำนวน Shimmers ที่จะแสดง
RowWidth	ความกว้างของ Shimmer

ตัวอย่างสูตร Power Fx:

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

คุณสมบัติ Style

คุณสมบัติ	Description
Theme	ยอมรับสตริง JSON ที่สร้างขึ้นโดยใช้ ตัวออกแบบธีม Fluent UI (windows.net) การเว้นว่างไว้จะใช้ธีมเริ่มต้นที่กำหนดโดย Power Apps ดูที่ ชุดรูปแบบ สำหรับความช่วยเหลือเกี่ยวกับวิธีกำหนดค่า
AccessibilityLabel	ป้ายชื่อ aria สำหรับโปรแกรมอ่านหน้าจอ

ธีมตัวอย่าง

สตริง JSON ของธีมถูกส่งไปยังคุณสมบัติ component ในขณะที่ varTheme สามารถใช้เพื่อจัดรูปแบบส่วนประกอบมาตรฐานอื่นๆ เช่น ปุ่มที่ใช้สีแต่ละสี

สำหรับข้อมูลเพิ่มเติมเกี่ยวกับจานสีที่จะใช้ในขณะที่ทำงานกับ Shimmer โปรดดูที่ส่วน IShimmerColors Interface ของคู่มือ IShimmerElement

ข้อจำกัด

ส่วนประกอบโค้ดนี้ใช้ได้เฉพาะในแอปพื้นที่ทำงานและหน้าที่กำหนดเองเท่านั้น