Freigeben über

Theming

  • Artikel

Mithilfe des Design-Mechanismus kann ein einheitliches Erscheinungsbild auf alle Komponenten einer Seite angewendet werden. In diesem Fall bedeutet es, dass ein gemeinsames Farbschema für die gesamte Seite verwendet wird.

Notiz

Ein Design-JSON-Objekt ist ein Codeblock, der eine Reihe von Farben enthält. Ersteller-Kit-Komponenten sind so konzipiert, dass sie den speziell über die Fluent-Themen-Designer-App generierten Design-Codeblock akzeptieren und seine Farbwerte den Komponenteneigenschaften zuordnen. Speichern Sie das Objekt als Variable in Ihrer App (wie in der folgenden Anleitung beschrieben). Obwohl ein Design-JSON-Objekt so konzipiert ist, dass es einfach mit Kit-Komponenten referenziert werden kann, kann auch jede Komponente außerhalb des Kits auf diese Werte verweisen, wodurch die Konsistenz über alle App-Komponenten einfach aufrechterhalten werden kann.

Generieren des Designs

Verwenden Sie die Fluent-Themen-Designer-App (in CreatorKitReferences(Canvas)-Lösung bereitgestellt), um ein Design-JSON-Objekt zu generieren, auf das von Ersteller-Kit-Komponenten verwiesen werden kann.

  1. Führen Sie die Fluent-Themen-Designer-App aus.

  2. Ändern Sie die Werte für primäre Farbe, Textfarbe und Hintergrundfarbe.

    Design-Editor-App.

  3. Wählen Sie in der rechten oberen Ecke Design exportieren aus, um die Power Fx-Ausdrucksversion des Design-JSON zu generieren, und kopieren Sie dann den Wert aus dem Bereich.

    Die Design-Editor-App generierte Design-JSON.

  4. Speichern Sie das Design als globale Variable in einer App (nächster Abschnitt).

Festlegen des Designs

Die nachfolgende Power Fx-Formel zeigt ein Beispiel dafür, wie eine globale Variable mithilfe der Ausgabe der Fluent-UI-Themen-Designer-App festgelegt wird. Auf diese Variable kann von allen Komponenten der App verwiesen werden.

  • Platzieren Sie diese Power Fx-Formel so, daass sie in der OnStart-Eigenschaft der App ausgeführt wird.
  • Ersetzen Sie den Wert in den /* THEME OBJECT */-Kommentaren mit Ihrem eigenen Designobjekt aus dem 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
    )
);

Verweisendes Design aus Ersteller-Kit-Komponenten

Ein Design kann an die Theme-Eigenschaft jeder Komponente übertragen werden.

  • Canvas Komponenten müssen auf die AppTheme Variable verweisen.
  • Code- Komponenten müssen auf die AppThemeJson Variable verweisen.

Verweisendes Design aus nativen Power Apps-Komponenten

Alle Kernkomponenten in Canvas-Apps oder benutzerdefinierten Seiten können auf Elemente des AppTheme-Objekts verweisen (darf nicht im JSON-Format formatiert sein). Diese Steuerelemente müssen auf die gewünschten palette-Eigenschaften verweisen und mithilfe der ColorValue()-Formel in den Datentyp „Farbe“ umgewandelt werden.

Beispiel Button.Fill Power Fx Formel mit Bezug auf die Primärfarbe des Themas:

ColorValue(AppTheme.palette.themePrimary)

Design verwendende Schaltfläche