Partajați prin

Theming

  • Articol

Utilizarea temelor este un mecanism prin care un aspect coerent poate fi aplicat tuturor componentelor dintr-o pagină. Pentru moment, aceasta înseamnă partajarea unei scheme de culori pe întreaga pagină.

Notă

Un obiect Temă Json este un bloc de cod care conține un set de culori. Componentele Kitului Creator sunt concepute pentru a accepta blocul de cod al temei generat special de aplicația Fluent Theme Designer și pentru a mapa valorile de culori ale acestuia la proprietățile componentelor. Salvați obiectul ca variabilă în aplicația dvs. (așa cum este descris în următoarele instrucțiuni). Deși un obiect Temă Json este proiectat pentru a fi ușor de referit de către componentele kit-ului, orice componentă din afara kitului poate face referire și la aceste valori, ceea ce ajută la menținerea cu ușurință a coerenței în toate componentele aplicației.

Generarea temei

Utilizați aplicația Fluent Theme Designer (furnizată în soluția CreatorKitReferences(Canvas)) pentru a genera un obiect temă Json la care pot face referite componentele kitului creator.

  1. Rulați aplicația Fluent Theme Designer.

  2. Modificați valorile pentru Culoare primară, Culoare text, și Culoare fundal.

    Aplicația Editor de teme.

  3. În colțul din dreapta-sus, selectați Exportați tema pentru a genera versiunea de expresie Power Fx a temei JSON, iar apoi copiați valoarea din panou.

    Tema JSON generată de aplicația Editor de teme.

  4. Salvați tema ca variabilă globală într-o aplicație (secțiunea următoare).

Setarea temei

Formula Power Fx de mai jos prezintă un exemple de setare a unei variabile globale folosind rezultatul din aplicația Fluent UI Theme Designer. La această variabilă fac referire toate componentele din aplicație.

  • Plasați această formulă Power Fx pentru a rula pe proprietatea OnStart a aplicației.
  • Înlocuiți valoarea dintre comentariile /* THEME OBJECT */ cu propriul obiect temă de la designer.
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
    )
);

Temă de referință din componentele Kitului creator

O temă poate fi transmisa proprietății Theme a fiecărei componente.

  • Componentele planșei de lucru trebuie să facă referire la variabila AppTheme.
  • Componentele codului trebuie să facă referire la variabila AppThemeJson.

Temă de referință din componentele Power Apps nativ

Oricare dintre componentele de bază din aplicațiile proiectate pe pânză sau paginile personalizate poate face referire la elemente din obiectul AppTheme (nu poate fi formatat Json). Aceste comenzi trebuie să facă referire la proprietățile palette dorite și să fie proiectate ca tip de date Culoare folosind formula ColorValue().

Examplu Button. Formula Fill Power Fx face referire la culoarea primară a temei:

ColorValue(AppTheme.palette.themePrimary)

Buton folosind tema.