ตัวควบคุม Dialog (ทดลอง)

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

ตัวควบคุมที่ใช้ในการจัดกลุ่มเนื้อหา

สำคัญ

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

Description

กล่องโต้ตอบ (Dialog) คือหน้าต่างป๊อปอัปชั่วคราวที่โฟกัสจากหน้าหรือแอป และต้องการให้ผู้คนโต้ตอบ ส่วนใหญ่จะใช้สำหรับการยืนยันการดำเนินการ เช่น การลบไฟล์ หรือการขอให้ผู้อื่นทำการเลือก

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

ดูส่วนประกอบในคลังที่เก็บ GitHub ของชุดผู้สร้าง

คุณสมบัติ

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

คุณสมบัติ	Description
Buttons	ชุดข้อมูลที่กำหนดปุ่ม (เรียนรู้เพิ่มเติมใน คุณสมบัติของปุ่ม)
Title	ข้อความที่แสดงในส่วนชื่อเรื่อง
OverlayColor	สีที่แสดงในพื้นที่ซ้อนทับ
DialogWidth	ความกว้างของกล่องโต้ตอบ (อย่าสับสนกับความกว้างของตัวควบคุม ซึ่งควรขยายความกว้างของแอป)
DialogHeight	ความสูงของกล่องโต้ตอบ (อย่าสับสนกับความสูงของตัวควบคุม ซึ่งควรขยายความสูงของแอป)
SubTitle	ข้อความที่แสดงภายใต้ชื่อ

คุณสมบัติของปุ่ม

คุณสมบัติ	Description
Label	ป้ายกำกับแสดงบนปุ่ม
ButtonType	ตัวระบุที่กำหนดรูปแบบของปุ่ม เลือกระหว่าง Standard และ Primary

Table(
    {
        Label: "Cancel", 
        ButtonType:'Microsoft.CoreControls.Button.ButtonType'.Standard 
    },{
        Label: "Ok", 
        ButtonType:'Microsoft.CoreControls.Button.ButtonType'.Primary
    }
)

คุณสมบัติรูปแบบ

คุณสมบัติ	Description
Theme	วัตถุของธีม เรียนรู้เพิ่มเติมเกี่ยวกับ การกำหนดธีม

เรียนรู้เกี่ยวกับการจัดรูปแบบในส่วนเนื้อหาของแผงรูปแบบใน แผง

คุณสมบัติเหตุการณ์

คุณสมบัติ	Description
OnCloseSelect	คำสั่งที่ทำงานเมื่อลือกปุ่มปิด
OnButtonSelect	นิพจน์การดำเนินการจะถูกเรียกใช้งานเมื่อเลือกหนึ่งในปุ่มการดำเนินการ

พฤติกรรม

กำหนดค่าการแสดงผลกล่องโต้ตอบ

ทำให้ตัวควบคุม Dialog เอง (หรือพื้นผิวที่อยู่ภายใน) มองเห็นได้เมื่อตัวแปรแบบบูลีน (true/false) เปลี่ยนเป็น true กำหนดตัวแปรนั้นให้กับคุณสมบัติการมองเห็นของกล่องโต้ตอบ หากต้องการซ่อนกล่องโต้ตอบหลังจากที่แสดง ให้อัปเดตตัวแปรในคุณสมบัติ reset ซึ่งจะทำงานเมื่อมีการเลือกไอคอนปิด

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

UpdateContext({ showHideDialog: true })

รายการต่อไปนี้คือสูตร Power Fx เพื่อปิดกล่องโต้ตอบ ในคุณสมบัติ OnCloseSelect ของกล่องโต้ตอบ:

UpdateContext({ showHideDialog: false })

กำหนดตัวแปรให้กับคุณสมบัติ Visible ของกล่องโต้ตอบ:

showHideDialog

กำหนดค่าการดำเนินการของปุ่ม

ในคุณสมบัติ OnButtonSelect ของกล่องโต้ตอบ ให้การดำเนินการในเงื่อนไข If() หรือ Switch() ตามค่าข้อความ Self.SelectedButton.Label เพื่อกำหนดการดำเนินการ ทั้งนี้ขึ้นอยู่กับการดำเนินการ การปิดกล่องโต้ตอบหลังจากดำเนินการเสร็จสิ้นแล้วอาจเป็นเรื่องที่สมเหตุสมผล

    If( Self.SelectedButton.Label = "Send", 
        Notify("Email Sent")
    );
    UpdateContext({ showHideDialog: false })

ข้อจำกัด

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