Theming

Uporaba tem je mehanizem, s katerim je mogoče uporabiti dosleden videz in občutek za vse komponente na strani. Za zdaj to pomeni skupno rabo barvne sheme na celotni strani.

opomba,

Objekt teme Json je blok kode, ki vsebuje nabor barv. Komponente kompleta za ustvarjalce so zasnovane tako, da sprejmejo blok kode teme, ki ga ustvari aplikacija Fluent Theme Designer, in preslikajo njegove barvne vrednosti v lastnosti komponente. Shranite predmet kot spremenljivko v svoji aplikaciji (kot je opisano v naslednjih navodilih). Čeprav je objekt teme Json zasnovan tako, da se komponente kompleta preprosto sklicujejo nanj, se lahko katera koli komponenta zunaj kompleta prav tako sklicuje na te vrednosti, kar pomaga enostavno vzdrževati doslednost v vseh komponentah aplikacije.

Ustvarjanje teme

Uporabite aplikacijo Fluent Theme Designer (na voljo v rešitvi CreatorKitReferences(Canvas) ) za ustvarjanje objekta Json teme, na katerega se lahko sklicujejo komponente kompleta za ustvarjalce.

1. Uporabite aplikacijo Fluent Theme Designer.

2. Spremenite vrednosti Primarna barva, Barva besedilain Barva ozadja.

   

3. V zgornjem desnem kotu izberite možnost Izvozi temo, da ustvarite različico izraza Power Fx teme JSON, in nato kopirajte vrednost s plošče.

   

4. Shranite temo kot globalno spremenljivko v aplikaciji (naslednji razdelek).

Nastavitev teme

Spodnja formula Power Fx prikazuje primer, kako nastaviti globalno spremenljivko z uporabo izhoda iz aplikacije Fluent UI Theme Designer. Na to spremenljivko se lahko sklicujejo vse komponente v aplikaciji.

• Postavite to formulo Power Fx za izvajanje v lastnini aplikacije OnStart.
• Zamenjajte vrednost med komentarji /* THEME OBJECT */ z lastnim predmetom teme oblikovalca.

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
    )
);

Sklicevanje na temo iz komponent kompleta za ustvarjalce

Temo lahko prenesete na lastnost Theme vsake komponente.

• Komponente delovnega območja se morajo sklicevati na spremenljivko AppTheme.
• Komponente kode se morajo sklicevati na spremenljivko AppThemeJson.

Sklicevanje na temo iz izvornih komponent Power Apps

Katera koli osnovna komponenta v aplikacijah s platnom ali straneh po meri se lahko sklicuje na elemente iz predmeta AppTheme (ni mogoče oblikovati Json). Ti kontrolniki se morajo sklicevati na želene lastnosti palette in biti ustvarjeni kot barvna vrsta podatkov s formulo ColorValue().

Primer Button. Formula Fill Power Fx, ki se nanaša na primarno barvo teme:

ColorValue(AppTheme.palette.themePrimary)