Pages

自定义页面索引（Custom Page Index）

Custom Page Index（自定义页面索引） 是一个用于数字页面指示的控件，允许在用户界面中精确控制导航逻辑。
与基于浏览器的自动页面索引不同，该控件由用户手动定义，开发人员可显式控制页面状态与切换行为。

概述

该控件通过数字索引表示当前页面或视图。
支持自定义逻辑来定义活动页、页码范围以及导航行为，非常适合多页面流程、向导或状态驱动型界面切换。

主要功能

手动页面管理

• 可通过变量或程序控制当前页面索引
• 不依赖浏览器或框架路由机制

自定义页码范围

• 定义最小与最大页码，限制导航边界
• 防止跳转到无效页面状态

导航逻辑支持

• 支持前进、后退、跳转式页面切换
• 可与按钮、变量或逻辑条件绑定

内容映射

• 每个索引可对应唯一内容视图
• 实现多步骤流程或页面集合的完全控制

索引显示样式

• 可选显示当前页码给用户作为反馈
• 可自定义样式以符合 UI 主题风格

应用场景

多步骤向导流程

• 示例：配置 > 预览 > 确认等多个步骤切换

视图切换

• 示例：根据索引切换不同的监控界面或仪表板

状态驱动的界面

• 示例：根据索引加载不同布局或功能页面

SVG ID 参考表

以下 SVG ID 可用于在 Custom Page Index 控件中动态显示或交互控制页码：

代码示例（Code Snippet Example）

<g id="custom_control_root">
<g id="gValue">
<g class="fallback-page-index-value-background custom-control custom-page-index page-index-value-background" id="Rectangle 4708" filter="url(#filter0_ii_337_774)">
<rect class="fallback-page-index-background custom-control custom-page-index page-index-background" x="87" y="25" width="319" height="72" rx="4"/>
</g>
<text  class="fallback-page-index-value custom-control custom-page-index page-index-value"  xml:space="preserve" style="white-space: pre" font-family="Arial" font-size="32" font-weight="bold" letter-spacing="0em"><tspan id="value_tspan" x="204.672" y="71.5938">Value</tspan></text>
</g>
<g id="gButtonPlus">
<rect class="fallback-page-index-btn-color custom-control custom-page-index page-index-btn-background" id="Rectangle 4710" x="413" y="25" width="72" height="72"/>
<g id="btn-chevron-right">
<path class="fallback-page-index-btn-label custom-control custom-page-index page-index-btn-label" id="Vector" d="M444.695 72.382L442.838 70.5253L452.379 60.986L442.868 51.4748L444.724 49.6198L456.091 60.986L444.695 72.382Z" fill="#1F2837"/>
</g>
</g>
<g id="gButtonMinus">
<rect class="fallback-page-index-btn-color custom-control custom-page-index page-index-btn-background" id="Rectangle 4709" x="8" y="25" width="72" height="72"/>
<g id="btn-chevron-right_2">
<path class="fallback-page-index-btn-label custom-control custom-page-index page-index-btn-label" id="Vector_2" d="M48.3054 72.382L50.1621 70.5253L40.6211 60.986L50.1324 51.4748L48.2756 49.6198L36.9094 60.986L48.3054 72.382Z"/>
</g>
</g>
</g>