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

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

WvdS.UI.Controls.Navigation

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

TWvdSTabItem = class(TWvdSContentControl)
  property Header: string;
  property Content: TWvdSFrameworkElement;
  property IsEnabled: Boolean;
  property Icon: TWvdSImageSource;
end;

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

WvdS.Runtime.Navigation.PageControl

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, '', '');

<!-- 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>

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

// 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);
  });
});

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

TWvdSRtPageControlRenderer wird in WvdS.Runtime.Register registriert:

RuntimeRegistry.Register('TWvdSPageControl',
  TWvdSRtPageControlRenderer.Create);

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

Einklappbare Panels.

WvdS.UI.Controls.Navigation

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

Breadcrumb-Navigation.

WvdS.UI.Controls.Navigation

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

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

• Control-Bibliothek
• Basic Controls API
• Bars/Ribbon API