Поділитися через

Theming

  • Стаття

Теми – це механізм, за допомогою якого до всіх компонентів на сторінці можна застосувати єдиний зовнішній вигляд. Зараз це означає спільне використання схеми кольорів на всій сторінці.

Нотатка

Об’єкт JSON Theme – це блок коду, який містить набір кольорів. Компоненти авторського пакета готові приймати блок коду Theme, створений спеціально програмою конструктора тем Fluent, і зіставляють значення кольорів із властивостями відповідного компонента. Збережіть об’єкт як змінну у своїй програмі (як описано в наведених нижче інструкціях). Хоча на об’єкт JSON Theme легко посилатися за допомогою компонентів набору, будь-який компонент поза набором також може посилатися на ці значення, що дозволяє підтримувати узгодженість між усіма компонентами програми.

Створення теми

Використовуйте програму Конструктор тем Fluent (надається в рішенні CreatorKitReferences(Canvas)) для створення об’єкта Json Theme, на який можуть посилатися компоненти авторського пакета.

  1. Запустіть програму Конструктор тем Fluent.

  2. Змініть значення Основний колір, Колір тексту та Кольори фону.

    Програма «Редактор тем».

  3. У верхньому правому куті виберіть Експорт теми, щоб створити версію виразу Power Fx теми JSON, а потім скопіюйте значення з панелі.

    Редактор тем 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 кожного компонента.

  • Компоненти Canvas повинні посилатися на AppTheme змінну.
  • Компоненти коду повинні посилатися на змінну AppThemeJson .

Посилання на тему з власних компонентів Power Apps

Будь-який з базових компонентів у компонованих програмах або на настроюваних сторінках може посилатися на елементи з обֹ’єкта AppTheme (не може бути у форматі JSON). Ці елементи керування мають посилатися на необхідні властивості palette і перетворюватися в тип даних Color за допомогою формули ColorValue().

Приклад Button.Fill Power Fx Формула, що посилається на основний колір теми:

ColorValue(AppTheme.palette.themePrimary)

Кнопка з використанням теми.