Theming

إن النسق عبارة عن آلية يمكن من خلالها تطبيق شكل وأسلوب عرض متناسقين على جميع مكونات الصفحة. الآن، يعني ذلك مشاركة مخطط ألوان عبر الصفحة بالكامل.

‏‫ملاحظة‬

إن كائن Theme Json هو كتلة تعليمات برمجية تحتوي على مجموعة من الألوان. تم تصميم مكونات مجموعة أدوات المنشئ لقبول كتلة التعليمات البرمجية "النسق" التي يتم إنشاؤها بواسطة تطبيق مصمم نسق Fluent، وتعيين قيم ألوانها إلى خصائص المكونات. احفظ الكائن كمتغير في تطبيقك (كما هو موضح في التعليمات التالية). على الرغم من أن كائن Theme Json مصمم بحيث يمكن الرجوع إليه بسهولة مع مكونات المجموعة، يمكن لأي مكون خارج المجموعة أيضًا الرجوع إلى هذه القيم، مما يساعد بسهولة في الحفاظ على الاتساق عبر جميع مكونات التطبيق.

إنشاء النسق

استخدم تطبيق مصمم نسق Fluent (المتوفر في الحل CreatorKitReferences(Canvas)) لإنشاء كائن theme Json يمكن الإشارة إليه بواسطة مكونات مجموعة أدوات المنشئ.

1. شغّل التطبيق مصمم نسق Fluent.

2. قم بتعديل قيم اللون الرئيسي، ولون النص، ولون الخلفية.

   

3. في الزاوية العلوية اليمنى، حدد تصدير النسق لإنشاء إصدار تعبير Power Fx من Theme JSON، ثم انسخ القيمة من اللوحة.

   

4. احفظ النسق كمتغير عام في التطبيق (القسم التالي).

تعيين النسق

توضح صيغة 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)