Breadcrumb ตัวควบคุม

ตัวควบคุมที่ใช้ในการนำทาง

หมายเหตุ

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

Description

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

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

คุณสมบัติ

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

คุณสมบัติ	Description
SelectedKey	หมายถึงคีย์ที่เลือก สิ่งนี้จะได้รับการอัปเดตผ่านทางเหตุการณ์ OnChange เมื่อผู้ใช้โต้ตอบกับตัวควบคุม
Items	รายการการดำเนินการที่จะแสดง

Itemsคุณสมบัติ

แต่ละรายการใช้สคีมาต่อไปนี้ เพื่อแสดงภาพข้อมูลในองค์ประกอบ

Name	Description
ItemDisplayName	ชื่อที่แสดงของรายการการแสดงเส้นทาง
ItemKey	คีย์ที่ใช้ระบุรายการที่เลือก และเมื่อเพิ่มรายการย่อย คีย์ต้องไม่ซ้ำกัน
ItemClickable	ตั้งค่าเป็นเท็จในกรณีที่รายการการแสดงเส้นทางเฉพาะไม่สามารถคลิกได้

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

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

คุณสมบัติ Style

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

คุณสมบัติ Event

Name	Description
InputEvent	เหตุการณ์ที่ส่งตัวควบคุม เช่น SetFocus ดูด้านล่างนี้

พฤติกรรม

รองรับ SetFocus เป็น InputEvent

กำหนดค่าลักษณะ "เมื่อเลือก"

ใช้สูตร Switch() ในคุณสมบัติ OnSelect ของส่วนประกอบ เพื่อกำหนดค่าการดำเนินการเฉพาะสำหรับแต่ละรายการโดยอ้างถึง ItemKey ที่เลือกของตัวควบคุมเป็นค่าสวิตช์

แทนที่ค่า false ที่มีนิพจน์ที่เหมาะสมในภาษา Power Fx

เนื่องจากตัวควบคุมนี้ใช้สำหรับการนำทาง จึงต้องใช้การดำเนินการเชิงตรรกะ ฟังก์ชัน navigation (เหมาะกับหน้าจอที่เกี่ยวข้องกับการโหลดข้อมูลที่เกี่ยวข้อง)

  Switch( Self.Selected.ItemKey,
    /* Action for ItemKey 1 */
    "1", false,
    
    /* Action for ItemKey 2 */
    "2", false,
  
    /* Default action */
        false
  )

การตั้งค่าโฟกัสที่ตัวควบคุม

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

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

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

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

ตัวแปรบริบท ctxResizableTextareaEvent สามารถผูกมัดกับคุณสมบัติ Input Event ได้

ข้อจำกัด

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