====== API: Navigation Controls ======

API-Referenz für Navigation und Wizard-Controls.

===== TWvdSTabControl =====

Tab-basierte Navigation (Design-Time). Wird im Web Form Designer als PXAML-Komponente platziert.

==== Namespace ====

''WvdS.UI.Controls.Navigation''

==== PXAML ====

<code xml>
<TabControl SelectedIndex="{Binding ActiveTab}">
  <TabItem Header="General">
    <GeneralSettings />
  </TabItem>
  <TabItem Header="Advanced">
    <AdvancedSettings />
  </TabItem>
</TabControl>
</code>

==== Properties ====

| Property | Typ | Default | Beschreibung |
^ Items | TWvdSTabItemCollection | nil | Tab-Items |
^ SelectedIndex | Integer | 0 | Aktiver Tab-Index |
^ SelectedItem | TWvdSTabItem | nil | Aktives Tab-Item |
^ TabStripPlacement | TWvdSPlacement | pTop | Top, Bottom, Left, Right |
^ IsClosable | Boolean | False | Tabs schließbar |

==== Events ====

| Event | Signatur | Beschreibung |
^ OnSelectionChanged | TSelectionChangedEvent | Tab gewechselt |
^ OnTabClosing | TTabClosingEvent | Tab wird geschlossen |

==== TWvdSTabItem ====

<code pascal>
TWvdSTabItem = class(TWvdSContentControl)
  property Header: string;
  property Content: TWvdSFrameworkElement;
  property IsEnabled: Boolean;
  property Icon: TWvdSImageSource;
end;
</code>

----

===== TWvdSPageControl =====

Runtime-Renderer fuer Tab-Navigation in WebView-Panels. Serverseitig generiert (Extension Host), kein Design-Time-Control.

==== Namespace ====

''WvdS.Runtime.Navigation.PageControl''

==== Verwendung (Pascal) ====

<code pascal>
uses Services.WebViewPanel;

// Tabs als JS-Objekte vorbereiten
TabGeneral := TJSObject.new;
TabGeneral.Properties['Id'] := 'general';
TabGeneral.Properties['Caption'] := 'General';
TabGeneral.Properties['Content'] := GetGeneralTabHtml;

TabCompiler := TJSObject.new;
TabCompiler.Properties['Id'] := 'compiler';
TabCompiler.Properties['Caption'] := 'Compiler';
TabCompiler.Properties['Content'] := GetCompilerTabHtml;

Tabs := TJSArray.new;
Tabs.push(TabGeneral);
Tabs.push(TabCompiler);

// Rendern
BodyHtml := RtTabPanel(Tabs);
Result := BuildWebViewDocument('Title', BodyHtml, '', '');
</code>

==== Tab-Objekt Properties ====

| Property | Typ | Default | Beschreibung |
^ Id | string | ''tab'' + Index | Eindeutige Tab-ID (wird zu ''tab-{Id}'' als DOM-ID) |
^ Caption | string | ''Tab N'' | Angezeigter Tab-Text |
^ Content | string | '''' | HTML-Inhalt des Tab-Panels |

==== Generierte HTML-Struktur ====

<code html>
<!-- Tab-Leiste -->
<div class="rt-tabs" role="tablist">
  <button class="rt-tab active" role="tab"
          data-tab="general" aria-selected="true">General</button>
  <button class="rt-tab" role="tab"
          data-tab="compiler" aria-selected="false">Compiler</button>
</div>

<!-- Tab-Inhalte -->
<div id="tab-general" class="rt-tab-content active" role="tabpanel">
  [General-Inhalt]
</div>
<div id="tab-compiler" class="rt-tab-content" role="tabpanel">
  [Compiler-Inhalt]
</div>
</code>

==== CSS-Klassen ====

| Klasse | Element | Beschreibung |
^ ''.rt-tabs'' | Container | Flex-Container fuer Tab-Buttons (''role="tablist"'') |
^ ''.rt-tab'' | Button | Einzelner Tab-Button mit Hover/Focus-States |
^ ''.rt-tab.active'' | Button | Aktiver Tab (unterer Rand, andere Farbe) |
^ ''.rt-tab-content'' | Div | Tab-Inhalt (''display: none'' per Default) |
^ ''.rt-tab-content.active'' | Div | Sichtbarer Tab-Inhalt (''display: block'') |

==== Tab-Wechsel (JavaScript) ====

Der Standard-WebView-Script (''Services.WebViewScript'') bindet automatisch Click-Handler:

<code javascript>
// Automatisch gebunden durch TabClickBindingJs
document.querySelectorAll(".rt-tab").forEach(function(tab) {
  tab.addEventListener("click", function() {
    var id = this.getAttribute("data-tab");
    if (id) switchTab(id, this);
  });
});
</code>

''switchTab(id, tabEl)'' entfernt ''active'' von allen Tabs/Inhalten und setzt es auf den ausgewaehlten.

==== CSP-Hinweis ====

<WRAP important>
Keine ''style''-Attribute auf Elementen verwenden! Die Content Security Policy erlaubt nur ''style-src 'nonce-xxx' '', was inline ''style="..."'' Attribute blockiert. Sichtbarkeit ausschliesslich ueber CSS-Klassen steuern (''active''-Pattern).
</WRAP>

==== Renderer-Registrierung ====

''TWvdSRtPageControlRenderer'' wird in ''WvdS.Runtime.Register'' registriert:

<code pascal>
RuntimeRegistry.Register('TWvdSPageControl',
  TWvdSRtPageControlRenderer.Create);
</code>

Alle Units, die ''RuntimeRegistry.RenderNode'' aufrufen, muessen vorher ''EnsureRenderersRegistered'' aus ''WvdS.Runtime.Register'' aufrufen, um sicherzustellen dass die Renderer registriert sind.

==== Dateien ====

| Datei | Beschreibung |
^ ''pas2js/Components/Runtime/WvdS.Runtime.Navigation.PageControl.pas'' | Renderer-Implementierung |
^ ''pas2js/Components/Runtime/WvdS.Runtime.Register.pas'' | Registrierung aller Renderer |
^ ''pas2js/Components/Runtime/WvdS.Runtime.Registry.pas'' | Registry-Singleton |
^ ''fpc-core/services/Services.WebViewPanel.pas'' | ''RtTabPanel()'' Hilfsfunktion |
^ ''fpc-core/services/Services.WebViewCss.pas'' | CSS fuer ''.rt-tab*'' Klassen |
^ ''fpc-core/services/Services.WebViewScript.pas'' | ''switchTab()'' JavaScript |
^ ''fpc-core/services/Services.WebViewDocument.pas'' | ''BuildWebViewDocument()'' mit CSP/Nonce |

----

===== TWvdSAccordion =====

Einklappbare Panels.

==== Namespace ====

''WvdS.UI.Controls.Navigation''

==== PXAML ====

<code xml>
<Accordion ExpandMode="Single">
  <AccordionItem Header="Section 1" IsExpanded="True">
    <ContentPanel1 />
  </AccordionItem>
  <AccordionItem Header="Section 2">
    <ContentPanel2 />
  </AccordionItem>
</Accordion>
</code>

==== Properties ====

| Property | Typ | Default | Beschreibung |
^ Items | TWvdSAccordionItemCollection | nil | Accordion-Items |
^ ExpandMode | TWvdSExpandMode | emSingle | Single, Multiple |
^ SelectedItem | TWvdSAccordionItem | nil | Aktives Item |

==== TWvdSAccordionItem ====

| Property | Typ | Beschreibung |
^ Header | string | Überschrift |
^ Content | TWvdSFrameworkElement | Inhalt |
^ IsExpanded | Boolean | Aufgeklappt |
^ Icon | TWvdSImageSource | Icon |

----

===== TWvdSBreadcrumb =====

Breadcrumb-Navigation.

==== Namespace ====

''WvdS.UI.Controls.Navigation''

==== PXAML ====

<code xml>
<Breadcrumb Path="{Binding CurrentPath}"
            Separator=">"
            OnPathChanged="OnNavigate" />
</code>

==== Properties ====

| Property | Typ | Default | Beschreibung |
^ Path | string | '' | Aktueller Pfad |
^ Items | TWvdSBreadcrumbItemCollection | nil | Pfad-Elemente |
^ Separator | string | '/' | Trennzeichen |
^ IsEditable | Boolean | False | Pfad editierbar |

==== Events ====

| Event | Signatur | Beschreibung |
^ OnPathChanged | TPathChangedEvent | Pfad geändert |
^ OnItemClick | TItemClickEvent | Item geklickt |

----

===== TWvdSPager =====

Seiten-Navigation für Listen.

==== Namespace ====

''WvdS.UI.Controls.Navigation''

==== PXAML ====

<code xml>
<Pager CurrentPage="{Binding CurrentPage}"
       TotalPages="{Binding TotalPages}"
       PageSize="25" />
</code>

==== Properties ====

| Property | Typ | Default | Beschreibung |
^ CurrentPage | Integer | 1 | Aktuelle Seite |
^ TotalPages | Integer | 1 | Gesamtseiten |
^ PageSize | Integer | 10 | Einträge pro Seite |
^ TotalItems | Integer | 0 | Gesamteinträge |
^ DisplayMode | TWvdSPagerMode | pmNumeric | Numeric, NextPrev, Full |

==== Events ====

| Event | Signatur | Beschreibung |
^ OnPageChanged | TPageChangedEvent | Seite gewechselt |

----

===== TWvdSWizard =====

Schritt-für-Schritt Assistent.

==== Namespace ====

''WvdS.UI.Controls.Navigation''

==== PXAML ====

<code xml>
<Wizard SelectedPageIndex="{Binding CurrentStep}"
        OnFinish="OnWizardComplete">
  <WizardPage Title="Welcome" CanNext="True">
    <WelcomeContent />
  </WizardPage>
  <WizardPage Title="Configuration" CanBack="True" CanNext="{Binding IsValid}">
    <ConfigContent />
  </WizardPage>
  <WizardPage Title="Finish" CanBack="True" CanFinish="True">
    <SummaryContent />
  </WizardPage>
</Wizard>
</code>

==== Properties ====

| Property | Typ | Default | Beschreibung |
^ Pages | TWvdSWizardPageCollection | nil | Wizard-Seiten |
^ SelectedPageIndex | Integer | 0 | Aktive Seite |
^ SelectedPage | TWvdSWizardPage | nil | Aktive Seite |
^ ShowNavigationButtons | Boolean | True | Nav-Buttons anzeigen |
^ CanCancel | Boolean | True | Abbrechen möglich |

==== Events ====

| Event | Signatur | Beschreibung |
^ OnPageChanging | TPageChangingEvent | Vor Seitenwechsel |
^ OnFinish | TNotifyEvent | Wizard abgeschlossen |
^ OnCancel | TNotifyEvent | Wizard abgebrochen |

==== TWvdSWizardPage ====

| Property | Typ | Beschreibung |
^ Title | string | Seitentitel |
^ Description | string | Beschreibung |
^ Content | TWvdSFrameworkElement | Inhalt |
^ CanBack | Boolean | Zurück möglich |
^ CanNext | Boolean | Weiter möglich |
^ CanFinish | Boolean | Fertigstellen möglich |

----

===== TWvdSNavBar =====

Vertikale Navigationsleiste.

==== Namespace ====

''WvdS.UI.Controls.Navigation''

==== PXAML ====

<code xml>
<NavBar SelectedItem="{Binding SelectedMenu}">
  <NavBarGroup Header="Main">
    <NavBarItem Caption="Dashboard" Icon="home" />
    <NavBarItem Caption="Orders" Icon="list" />
  </NavBarGroup>
  <NavBarGroup Header="Settings">
    <NavBarItem Caption="Preferences" Icon="settings" />
  </NavBarGroup>
</NavBar>
</code>

==== Properties ====

| Property | Typ | Default | Beschreibung |
^ Groups | TWvdSNavBarGroupCollection | nil | Gruppen |
^ SelectedItem | TWvdSNavBarItem | nil | Ausgewähltes Item |
^ IsCollapsed | Boolean | False | Eingeklappt |
^ CollapsedWidth | Integer | 50 | Breite eingeklappt |
^ ExpandedWidth | Integer | 200 | Breite ausgeklappt |

==== Events ====

| Event | Signatur | Beschreibung |
^ OnItemSelected | TItemSelectedEvent | Item ausgewählt |

----

===== TWvdSTileControl =====

Kachel-basierte Navigation (Metro-Stil).

==== Namespace ====

''WvdS.UI.Controls.Navigation''

==== PXAML ====

<code xml>
<TileControl>
  <TileGroup Header="Applications">
    <Tile Caption="Mail" Icon="mail" Size="Large"
          Background="Blue" Command="{Binding OpenMail}" />
    <Tile Caption="Calendar" Icon="calendar" Size="Normal" />
    <Tile Caption="Tasks" Icon="check" Size="Small" />
  </TileGroup>
</TileControl>
</code>

==== Properties ====

| Property | Typ | Default | Beschreibung |
^ Groups | TWvdSTileGroupCollection | nil | Kachel-Gruppen |
^ ItemSize | TWvdSTileSize | tsNormal | Default-Größe |
^ Orientation | TWvdSOrientation | oHorizontal | Anordnung |

==== TWvdSTile ====

| Property | Typ | Beschreibung |
^ Caption | string | Titel |
^ Icon | TWvdSImageSource | Icon |
^ Size | TWvdSTileSize | Small, Normal, Wide, Large |
^ Background | TWvdSBrush | Hintergrund |
^ Command | IWvdSCommand | Click-Command |
^ Badge | string | Badge-Text |

----

===== Siehe auch =====

  * [[.:control-bibliothek|Control-Bibliothek]]
  * [[.:api-controls-basic|Basic Controls API]]
  * [[.:api-controls-bars|Bars/Ribbon API]]