Steuerung: Benutzerdefinierter Seitenindex（Custom Page Index）

Der Custom Page Index ist ein numerischer Seitenindikator, mit dem sich die Navigation innerhalb einer Benutzeroberfläche gezielt steuern lässt.
Im Gegensatz zu browserbasierten oder automatischen Seitenindizes wird dieses Steuerelement manuell konfiguriert und ermöglicht Entwicklern die volle Kontrolle über Seitenzustände und Übergänge.

Übersicht

Das Steuerelement stellt die aktuelle Seite über einen numerischen Index dar.
Es erlaubt benutzerdefinierte Logiken für aktive Seiten, gültige Seitenbereiche und Navigationsverhalten – ideal für mehrstufige Prozesse, Assistenten oder zustandsgesteuerte Layouts.

Hauptfunktionen

Manuelle Seitensteuerung

Der Seitenindex wird gezielt über Variablen oder Logik gesetzt
Unabhängig von Browser- oder Routingmechanismen

Benutzerdefinierter Bereich

Minimale und maximale Seitenwerte einschränkbar
Verhindert ungültige Seitensprünge

Navigationslogik

Ermöglicht Vor-/Zurück-Sprünge oder direkte Sprünge
Kann mit Buttons, Logik oder Zustandsänderungen verknüpft werden

Inhalts-Zuordnung

Jeder Indexwert entspricht einer eigenen Ansicht
Volle Kontrolle über komplexe Seitenwechselprozesse

Optische Indexanzeige

Optional sichtbare Anzeige des aktuellen Indexwerts
Gestaltbar im Einklang mit der Benutzeroberfläche

Anwendungsbeispiele

Mehrstufige Assistenten

Beispiel: Schritte wie Konfiguration → Vorschau → Bestätigung

Sichtwechsel

Beispiel: Überwachungssichten oder Dashboards über Index umschalten

Zustandsbasierte Interfaces

Beispiel: Unterschiedliche Layouts je nach aktivem Seitenstatus anzeigen

SVG-ID-Referenztabelle

Verwende folgende SVG-IDs für Interaktionen mit dem Seitenindex:

#	Element	SVG ID
1	Minus-Schaltfläche	`gButtonMinus`
2	Aktueller Wert	`value_tspan`
3	Plus-Schaltfläche	`gButtonPlus`

Codebeispiel（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>

Inhaltsangabe: