Freigeben über

Stilkomponenten mit modernem Design (Vorschauversion)

  • Artikel

[Dieses Thema ist Teil der Dokumentation zur Vorabversion und kann geändert werden.]

Entwickler müssen in der Lage sein, ihre Komponenten so zu gestalten, dass sie wie der Rest der Anwendung aussehen, in der sie enthalten sind. Sie können dies tun, wenn moderne Designs entweder für eine Canvas-App (über die Funktion Moderne Steuerelemente und Designs) oder eine modellgesteuerte App (über die Funktion neuer, aufgefrischter Look) in Kraft sind. Verwenden Sie modernes Design, das auf Fluent UI React v9 basiert, um Ihre Komponente zu gestalten. Dieser Ansatz wird empfohlen, um die beste Leistung und das beste Designerlebnis für Ihre Komponente zu erzielen.

Es gibt vier verschiedene Möglichkeiten, ein modernes Design auf Ihre Komponente anzuwenden.

Fluent UI v9-Steuerelemente

Das Einschließen von Fluent UI v9-Steuerelementen als Komponente ist die einfachste Möglichkeit, moderne Designs zu nutzen, da das moderne Design automatisch auf diese Steuerelemente angewendet wird. Die einzige Voraussetzung besteht darin, sicherzustellen, dass Ihre Komponente eine Abhängigkeit von den React-Steuerungen und Plattformbibliotheken (Vorschauversion) wie unten gezeigt hinzufügt. Dieser Ansatz ermöglicht es Ihrer Komponente, dieselben React- und Fluent-Bibliotheken wie die Plattform zu verwenden und daher denselben React-Kontext zu teilen, der die Design-Token an die Komponente weitergibt.

<resources>
  <code path="index.ts" order="1"/>
  <!-- Dependency on React controls & platform libraries -->
  <platform-library name="React" version="16.8.6" />
  <platform-library name="Fluent" version="9.46.2" />
</resources>

Fluent UI v8-Steuerelemente

Fluent bietet einen Migrationspfad zum Anwenden von v9-Designkonstrukten, wenn Sie Fluent UI v8-Steuerelemente in Ihrer Komponente verwenden. Verwenden Sie die createV8Theme-Funktion, die im Fluent-Migrationspaket von v8 zu v9 enthalten ist, um ein v8-Design basierend auf v9-Designtoken zu erstellen, wie im folgenden Beispiel gezeigt:

const theme = createV8Theme(
  context.fluentDesignLanguage.brand,
  context.fluentDesignLanguage.theme
);
return <ThemeProvider theme={theme}></ThemeProvider>;

Nicht Fluent UI-Steuerelemente

Wenn Ihre Komponente keine Fluent-Benutzeroberfläche verwendet, können Sie eine Abhängigkeit direkt von den v9-Designtoken erstellen, die über den Kontextparameter fluentDesignLanguage verfügbar sind. Verwenden Sie diesen Parameter, um Zugriff auf alle theme-Token zu erhalten, sodass es jeden Aspekt des Designs referenzieren kann, um sich selbst zu gestalten.

<span style={{ fontSize: context.fluentDesignLanguage.theme.fontSizeBase300 }}>
  {"Stylizing HTML with platform provided theme."}
</span>

Benutzerdefinierte Designanbieter

Wenn Ihre Komponente einen anderen Stil als das aktuelle Design der App erfordert, erstellen Sie Ihren eigenen FluentProvider und übergeben Sie Ihren eigenen Satz von Design-Token, die von Ihrer Komponente verwendet werden sollen.

<FluentProvider theme={context.fluentDesignLanguage.tokenTheme}>
  {/* your control */}
</FluentProvider>

Beispielkontrollen

Beispiele für jeden dieser Anwendungsfälle finden Sie unter API-Steuerelement für modernes Design.

Häufig gestellte Fragen

Dieser Abschnitt enthält häufig gestellte Fragen. Wenn Sie eine Frage zu dieser Funktion haben, verwenden Sie die Schaltfläche Feedback für Diese Seite unten auf dieser Seite, um ein GitHub-Problem zu erstellen.

F: Mein Steuerelement verwendet Fluent UI v9 und ist von den Plattformbibliotheken abhängig, aber ich möchte kein modernes Design verwenden. Wie kann ich es für meine Komponente deaktivieren?

A: Sie können dies auf zweierlei Weise tun:

  1. Sie können Ihren eigenen FluentProvider auf Komponentenebene erstellen

    <FluentProvider theme={customFluentV9Theme}>
  {/* your control */}
</FluentProvider>

  2. Sie können Ihr Steuerelement in IdPrefixContext.Provider einschließen und Ihren eigenen idPrefix-Wert festlegen. Dadurch wird verhindert, dass Ihre Komponente Design-Token von der Plattform erhält.

    <IdPrefixProvider value="custom-control-prefix">
  <Label weight="semibold">This label is not getting Modern Theming</Label>
</IdPrefixProvider>

F: Einige meiner Fluent UI v9-Steuerelemente erhalten keine Stile

A: Fluent v9-Steuerelemente, die auf dem React Portal basieren, müssen im Designanbieter neu verpackt werden, um sicherzustellen, dass der Stil ordnungsgemäß angewendet wird. Sie können FluentProvider verwenden.

F: Wie kann ich überprüfen, ob modernes Design aktiviert ist?

A: Sie können überprüfen, ob Token verfügbar sind: context.fluentDesignLanguage?.tokenTheme. Oder Sie können in modellgesteuerten Anwendungen die App-Einstellungen überprüfen: context.appSettings.getIsFluentThemingEnabled().

Design (Power Apps Component Framework-API-Referenz)
API-Steuerelement für modernes Design
Moderne Designs in Canvas Apps verwenden (Vorschau)

Hinweis

Können Sie uns Ihre Präferenzen für die Dokumentationssprache mitteilen? Nehmen Sie an einer kurzen Umfrage teil. (Beachten Sie, dass diese Umfrage auf Englisch ist.)

Die Umfrage dauert etwa sieben Minuten. Es werden keine personenbezogenen Daten erhoben. (Datenschutzbestimmungen).