แชร์ผ่าน

ตัวควบคุม Persona (ตัวอย่าง)

[บทความนี้เป็นคู่มือรุ่นก่อนวางจำหน่าย และอาจจะมีการเปลี่ยนแปลงในอนาคต]

ตัวควบคุมที่ออกแบบมาเพื่อแสดงข้อมูลที่จัดรูปแบบ

หมายเหตุ

เอกสารฉบับเต็มและซอร์สโค้ดมีอยู่ใน ที่เก็บส่วนประกอบโค้ด GitHub

สำคัญ

  • นี่คือคุณลักษณะพรีวิว
  • คุณลักษณะการแสดงตัวอย่างไม่ได้มีไว้สำหรับการนำไปใช้งานจริง และอาจมีการจำกัดฟังก์ชันการทำงาน คุณลักษณะเหล่านี้สามารถใช้ได้ก่อนการเปิดตัวอย่างเป็นทางการ เพื่อให้ลูกค้าสามารถเข้าใช้งานได้ก่อนเวลาและให้ข้อคิดเห็น

ตัวควบคุม Persona

รายละเอียด

บุคลิกคือการแสดงภาพของบุคคลในผลิตภัณฑ์ ซึ่งโดยทั่วไปแล้วจะแสดงภาพที่บุคคลนั้นอัปโหลด นอกจากนี้ยังสามารถใช้ตัวควบคุมนี้เพื่อแสดงสถานะออนไลน์ของบุคคลนั้นได้อีกด้วย

ตัวควบคุมทั้งหมดรวมถึงอวาตาร์ของแต่ละบุคคล (ภาพที่อัปโหลดหรือองค์ประกอบของชื่อย่อของบุคคลบนสีพื้นหลัง) ชื่อหรือการระบุตัวตน และสถานะออนไลน์

ตัวควบคุม persona ที่ใช้ในตัวควบคุม PeoplePicker และ Facepile

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

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

คุณสมบัติ รายละเอียด
ImageUrl URL ไปยังรูปภาพที่จะใช้ ใช้รูปภาพที่มีอัตราส่วนกว้างยาวเป็นสี่เหลี่ยมจัตุรัสและมีขนาดใหญ่พอที่จะพอดีกับพื้นที่ภาพ
ImageInitials ชื่อย่อของผู้ใช้ที่จะแสดงในพื้นที่รูปภาพเมื่อไม่มีภาพ
Text ข้อความหลักที่จะแสดง ซึ่งมักจะเป็นชื่อของบุคคล
SecondaryText ข้อความรองที่จะแสดง ซึ่งมักจะเป็นบทบาทของผู้ใช้
TertiaryText ข้อความที่สามที่จะแสดง ซึ่งมักจะเป็นสถานะของผู้ใช้ ข้อความระดับสามจะแสดงเมื่อใช้ size72 หรือ size100 เท่านั้น
OptionalText ข้อความที่เป็นตัวเลือกที่จะแสดง ซึ่งมักเป็นชุดข้อความที่กำหนดเอง ข้อความเสริมจะแสดงเมื่อใช้ size100 เท่านั้น
ImageAlt ข้อความสำรองสำหรับรูปภาพ
HidePersonaDetails ระบุว่าจะไม่แสดงรายละเอียดบุคคล และแสดงเฉพาะภาพบุคคล/ชื่อย่อเท่านั้น
PersonaSize ขนาดของบุคคลที่จะปรากฏบนหน้าจอ
Presence การปรากฏตัวของบุคคลที่จะแสดง การแสดงตนจะไม่แสดงขึ้นหากไม่ได้กำหนดไว้ ค่าสามารถเป็นอย่างใดอย่างหนึ่ง: away, blocked, busy, dnd, none, offline หรือ online

คุณสมบัติ Style

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

ตัวอย่างเช่น

ต่อไปนี้คือค่าตัวอย่างบางส่วนสำหรับคอมโพเนนต์ Persona:

คุณสมบัติ มูลค่า
Text "เมแกน บราวน์"
SecondaryText "วิศวกรซอฟต์แวร์"
TertiaryText "กำลังประชุม"
OptionalText "ว่างในเวลา 16:00 น."
HidePersonaDetails เท็จ
ImageUrl User().Image
PersonaSize PowerCAT.Persona.PersonaSize.Size100
Presence PowerCAT.Persona.Presence.Online

ข้อจำกัด

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

  • Last updated on