如何在 Stimulsoft JavaScript 报表组件中，设置设计器与查看器主题风格
<p><img src="https://image.evget.com/attachment/keditor/image/20250723/102103_1.jpeg"></p><p>在现代软件开发中，图形用户界面（GUI）不仅仅是功能的承载体，更是用户体验的关键组成部分。一个美观、统一且具备高度可定制性的界面，能够显著提升系统的专业感和使用效率。</p>
<p>Stimulsoft 作为功能强大的报表和仪表板解决方案提供商，其 JavaScript 版本（<strong><u>Stimulsoft Reports.JS</u></strong> 与 <strong><u>Stimulsoft Dashboards.JS</u></strong>）为开发者提供了丰富的内置主题支持，助力快速构建符合品牌风格的交互界面。本文将围绕报表设计器与查看器两大核心组件，详细介绍如何设置和动态更换主题样式。</p>
<p><strong>Stimulsoft Ultimate （原Stimulsoft Reports.Ultimate）是用于创建报表和仪表板的通用工具集。该产品包括用于WinForms、ASP.NET、.NET Core、JavaScript、WPF、PHP、Java和其他环境的完整工具集。无需比较产品功能，Stimulsoft Ultimate包含了所有内容！</strong></p>
<p><strong>Stimulsoft Reports.JS官方正版下载 Stimulsoft Dashboards.JS官方正版下载</strong></p>
<hr>
<h2>一、如何设置查看器（Viewer）主题</h2>
<p>在使用StiViewer组件时，可以通过StiViewerOptions类设置theme属性，来指定默认主题样式。若未指定，则系统默认使用Office2022WhiteBlue风格。</p>
<p>以下是通过代码设置查看器主题为深色风格Office2022BlackBlue的示例：</p>
<div class="contain-inline-size rounded-2xl relative bg-token-sidebar-surface-primary">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between h-9 bg-token-sidebar-surface-primary select-none rounded-t-2xl">
<pre class="prettyprint lang-js highlighter-hljs"><code>let options = new Stimulsoft.Viewer.StiViewerOptions();
options.appearance.theme = Stimulsoft.Viewer.StiViewerTheme.Office2022BlackBlue;
let viewer = new Stimulsoft.Viewer.StiViewer(options, "StiViewer", false);
viewer.renderHtml();</code></pre>
</div>
</div>
<p>执行后，报表查看器将以指定的深色主题进行渲染展示。</p>
<hr>
<h2>二、如何设置报表设计器（Designer）主题</h2>
<p>与 Viewer 类似，StiDesigner组件也支持通过StiDesignerOptions来设置主题风格。下面示例展示了如何为设计器设置深色主题：</p>
<pre class="prettyprint lang-js highlighter-hljs"><code>let options = new Stimulsoft.Designer.StiDesignerOptions();
options.appearance.theme = Stimulsoft.Designer.StiDesignerTheme.Office2022BlackBlue;
let designer = new Stimulsoft.Designer.StiDesigner(options, "StiDesigner", false);
designer.renderHtml();</code></pre>
<p>这样，用户在使用报表设计器时，将体验到统一的深色界面风格，提升视觉一致性。</p>
<hr>
<h2>三、如何动态切换主题（运行时切换）</h2>
<p>除了在初始化阶段设置主题外，Stimulsoft 也支持运行时动态切换界面风格，非常适合需要根据用户行为或配置调整样式的场景。例如可通过按钮、下拉框让用户自定义界面样式：</p>
<pre class="prettyprint lang-js highlighter-hljs"><code>viewer.applyTheme(StiViewerTheme.Office2022WhiteBlue);
designer.applyTheme(StiDesignerTheme.Office2022WhiteBlue);</code></pre>
<p>这一特性为打造个性化或多皮肤系统提供了极大的灵活性。</p>
<hr>
<h2>四、在 React、Vue、Angular 框架中使用主题设置</h2>
<p><strong>Stimulsoft</strong> 全面支持主流前端框架，开发者在 React、Vue.js 和 Angular 项目中同样可以设置或动态更改组件的主题风格。</p>
<p>官方文档与示例提供了框架专属的实现方式：</p>
<ul>
<li>
<p><strong>React 示例</strong>：设置报表设计器与查看器主题</p>
</li>
<li>
<p><strong>Angular 示例</strong>：设置报表设计器与查看器主题</p>
</li>
<li>
<p><strong>Vue.js 示例</strong>：设置报表设计器与查看器主题</p>
</li>
</ul>
<p>您可以通过慧都提供的示例代码和技术支持快速上手。</p>
<hr>
<h2>结语：统一灵活的界面主题机制，提升项目整体体验</h2>
<p>Stimulsoft 报表与仪表板组件不仅功能全面、可视化强，还提供了跨框架、可定制的主题系统，帮助开发者轻松打造风格统一、体验优良的前端界面。无论是在 JavaScript 原生项目，还是现代前端框架中，Stimulsoft 都能灵活应对不同的 UI 个性化需求。</p><br><br>
来源：https://www.cnblogs.com/software-Development/p/19000294
頁:
[1]