Die Anpassung der Benutzeroberfläche spielt eine entscheidende Rolle bei der Entwicklung von Software. Tatsächlich ist das GUI das „Gesicht“ eines Produkts für die Benutzer. Daher ist es wichtig, dass es ansprechend, anpassungsfähig, benutzerfreundlich und einfach zu bedienen ist. Die Stimulsoft-Komponenten bieten die Möglichkeit, das Benutzeroberflächendesign mithilfe vordefinierter Themen und verschiedener Farbtöne zu ändern.
In diesem Artikel wird erläutert, wie Sie die Design-Themen für den Designer und den Viewer von Berichten in den Stimulsoft-Produkten Reports.JS und Dashboards.JS ändern können.
In diesem Artikel wird erläutert, wie Sie die Design-Themen für den Designer und den Viewer von Berichten in den Stimulsoft-Produkten Reports.JS und Dashboards.JS ändern können.
Ändern des Viewer-Themas
Um das Design-Thema bei der Erstellung der Komponente StiViewer zu ändern, wählen Sie eines der Enumerationen von StiViewerTheme für die Eigenschaft theme in der Klasse StiViewerOptions aus. Standardmäßig wird, wenn die Eigenschaft theme nicht definiert ist, der Wert StiViewerTheme.Office2022WhiteBlue verwendet. Nachfolgend ein Beispiel für das Ändern des Viewer-Themas:...
let options = new Stimulsoft.Viewer.StiViewerOptions();
options.appearance.theme = Stimulsoft.Viewer.StiViewerTheme.Office2022BlackBlue;
let viewer = new Stimulsoft.Viewer.StiViewer(options, "StiViewer", false);
viewer.renderHtml();
...Ändern des Designer-Themas
Ähnlich kann das Design-Thema für die Komponente StiDesigner geändert werden, wobei die Klasse StiDesignerOptions verwendet wird. Nachfolgend ein Beispiel für das Ändern des Designer-Themas:...
let options = new Stimulsoft.Designer.StiDesignerOptions();
options.appearance.theme = Stimulsoft.Designer.StiDesignerTheme.Office2022BlackBlue;
let designer = new Stimulsoft.Designer.StiDesigner(options, "StiDesigner", false);
designer.renderHtml();
...Dynamisches Ändern des Themas zur Laufzeit
Manchmal besteht die Notwendigkeit, das Design-Thema der GUI nicht zum Zeitpunkt der Initialisierung der Komponenten, sondern unter bestimmten Umständen zu ändern. Beispielsweise könnte der Benutzer über die Benutzeroberfläche (z. B. über ein Dropdown-Menü oder eine Schaltfläche) das Thema auswählen. Das Design-Thema kann zur Laufzeit mit der speziellen Methode applyTheme geändert werden, die als Argument eines der Enumerationen von StiViewerTheme oder StiDesignerTheme akzeptiert....
viewer.applyTheme(StiViewerTheme.Office2022WhiteBlue);
...
designer.applyTheme(StiDesignerTheme.Office2022WhiteBlue);
...Ändern des Themas in React-, Vue.js- und Angular-Anwendungen
Bei der Integration von Stimulsoft-Komponenten in React-, Vue.js- oder Angular-Anwendungen besteht ebenfalls die Möglichkeit, das Design-Thema zu ändern. Der Prozess des Änderns des Themas ist ähnlich wie in JavaScript, jedoch unter Berücksichtigung der Besonderheiten des jeweiligen Frameworks. Weitere Informationen zum Themawechsel in React-, Vue.js- oder Angular-Komponenten finden Sie in unseren Beispielen:- React: Ändern des Designer-Themas und Ändern des Viewer-Themas.
- Angular: Ändern des Designer-Themas und Ändern des Viewer-Themas.
- Vue.js: Ändern des Designer-Themas und Ändern des Viewer-Themas.
Stimulsoft bietet einen einheitlichen und flexiblen Mechanismus für das Design-Theming, der sowohl in reinem JavaScript als auch in React-, Vue.js- und Angular-Anwendungen unterstützt wird. Design-Themen können sowohl bei der Initialisierung der Komponenten als auch dynamisch zur Laufzeit angewendet werden, was die Integration und Anpassung des Benutzeroberflächen-Designs an die spezifischen Anforderungen des Projekts erleichtert.