Theming
ชุดรูปแบบเป็นกลไกที่ทำให้รูปลักษณ์และความรู้สึกสอดคล้องกันสามารถนำไปใช้กับส่วนประกอบทั้งหมดบนหน้าได้ สำหรับตอนนี้ นี่หมายถึงการแบ่งปันชุดสีทั่วทั้งหน้า
หมายเหตุ
ออบเจ็กต์ Theme JSON คือบล็อกรหัสที่มีชุดสี ส่วนประกอบของชุดผู้สร้างได้รับการออกแบบให้ยอมรับบล็อครหัสธีที่สร้างโดยเฉพาะโดยแอปตัวออกแบบธีม Fluent และจับคู่ค่าสีกับคุณสมบัติ component บันทึกวัตถุเป็นตัวแปรในแอปของคุณ (ตามที่อธิบายไว้ในคำแนะนำต่อไปนี้) แม้ว่าออบเจ็กต์ Theme JSON จะได้รับการออกแบบมาเพื่อให้อ้างอิงกับส่วนประกอบของชุดได้ง่าย แต่ส่วนประกอบใดๆ ก็ตามที่อยู่นอกชุดก็สามารถอ้างอิงค่าเหล่านี้ได้ ซึ่งช่วยให้รักษาความสอดคล้องกันในทุกส่วนประกอบของแอปได้อย่างง่ายดาย
กำลังสร้างธีม
ใช้แอป ตัวออกแบบธีม Fluent (ที่มีให้ในโซลูชัน CreatorKitReferences (พื้นที่ทำงาน)) เพื่อสร้างอ็อบเจ็กต์ธีม Json ที่ส่วนประกอบชุดผู้สร้างอ้างอิงได้
เล่นแอป ตัวออกแบบธีม Fluent
แก้ไขค่า สีหลักสีข้อความ และ สีพื้นหลัง
ในมุมบนขวาของแอป เลือก ส่งออกธีม เพื่อสร้างรุ่นนิพจน์ Power Fx ของ Theme JSON และจากนั้นคัดลอกค่าจากแผงควบคุม
บันทึกธีมเป็นตัวแปรส่วนกลางในแอป (ส่วนถัดไป)
การตั้งค่าธีม
สูตร Power Fx ด้านล่างแสดงตัวอย่างวิธีตั้งค่าตัวแปรส่วนกลางโดยใช้เอาต์พุตจากแอปตัวออกแบบธีม Fluent UI องค์ประกอบทั้งหมดในแอปสามารถอ้างอิงตัวแปรนี้ได้
- วางสูตร Power Fx นี้ให้รันบนคุณสมบัติ
OnStart
ของแอป - แทนที่ค่าระหว่างความคิดเห็น
/* THEME OBJECT */
ด้วยวัตถุธีมของคุณเองจากตัวออกแบบ
Set(
AppTheme,
/* START THEME OBJECT */
{
palette: {
themePrimary: "#0078d4",
themeLighterAlt: "#eff6fc",
themeLighter: "#deecf9",
themeLight: "#c7e0f4",
themeTertiary: "#71afe5",
themeSecondary: "#2b88d8",
themeDarkAlt: "#106ebe",
themeDark: "#005a9e",
themeDarker: "#004578",
neutralLighterAlt: "#faf9f8",
neutralLighter: "#f3f2f1",
neutralLight: "#edebe9",
neutralQuaternaryAlt: "#e1dfdd",
neutralQuaternary: "#d0d0d0",
neutralTertiaryAlt: "#c8c6c4",
neutralTertiary: "#a19f9d",
neutralSecondary: "#605e5c",
neutralPrimaryAlt: "#3b3a39",
neutralPrimary:"#323130",
neutralDark: "#201f1e",
black: "#000000",
white: "#ffffff"
}
}
/* END THEME OBJECT */
);
Set(
AppThemeJson,
JSON(
AppTheme,
JSONFormat.IndentFour
)
);
อ้างอิงธีมจากส่วนประกอบชุดผู้สร้าง
ธีมสามารถส่งไปยังคุณสมบัติ Theme
ของแต่ละส่วนประกอบได้
-
ส่วนประกอบ พื้นที่ทำงาน ต้องอ้างอิงตัวแปร
AppTheme
-
ส่วนประกอบ โค้ด ต้องอ้างอิงตัวแปร
AppThemeJson
อ้างอิงธีมจากส่วนประกอบ Power Apps เดิม
ส่วนประกอบหลักใดๆ ในแอปพื้นที่ทำงานหรือหน้าที่กำหนดเองสามารถอ้างอิงองค์ประกอบจากอออบเจ็กต์ AppTheme
(ไม่สามารถจัดรูปแบบ Json) การควบคุมเหล่านี้ต้องอ้างอิงถึงความต้องการคุณสมบัติ palette
และถูกแคสต์เป็นประเภทข้อมูลสีโดยใช้สูตร ColorValue()
ตัวอย่าง Button
Fill
สูตร Power Fx อ้างอิงสีหลักของธีม:
ColorValue(AppTheme.palette.themePrimary)
คำติชม
https://aka.ms/ContentUserFeedback
เร็วๆ นี้: ตลอดปี 2024 เราจะขจัดปัญหา GitHub เพื่อเป็นกลไกคำติชมสำหรับเนื้อหา และแทนที่ด้วยระบบคำติชมใหม่ สำหรับข้อมูลเพิ่มเติม ให้ดู:ส่งและดูข้อคิดเห็นสำหรับ