feat: splitview docs

Author: NathanWalker

content/ui/split-view.md

@@ -20,24 +20,19 @@ It is intended to be used as the singular starting root view for the entire app.
 This component is ideal for iPadOS-style apps, admin-style layouts, or any experience where you need a master-detail flow plus an extra contextual pane or inspector.
 :::
 
-## Example
+<Tabs>
+<Tab flavor="typescript">
 
-### Declarative XML
+<<< @/../examples/typescript/src/ui/SplitView/template.xml#example
+
+</Tab>
+<Tab flavor="angular">
+
+<<< @/../examples/angular/src/ui/SplitView/component.html#example
+
+</Tab>
+</Tabs>
 
-```xml
-<SplitView
-  displayMode="twoBesideSecondary"
-  splitBehavior="tile"
-  preferredPrimaryColumnWidthFraction="0.25"
-  preferredSupplementaryColumnWidthFraction="0.33"
-  preferredInspectorColumnWidthFraction="0.20">
-
-  <Frame splitRole="primary" defaultPage="pages/master" />
-  <Frame splitRole="secondary" defaultPage="pages/detail" />
-  <Frame splitRole="supplementary" defaultPage="pages/context" />
-  <Frame splitRole="inspector" defaultPage="pages/inspector" />
-</SplitView>
-```
 This configures a 3–4 column layout (depending on OS support) and assigns each role to its own frame.
 
 ### Programmatic

examples/angular/src/app.routes.ts

@@ -17,6 +17,7 @@ import { ScrollViewComponent } from './ui/ScrollView/component'
 import { SearchBarComponent } from './ui/SearchBar/component'
 import { SegmentedBarComponent } from './ui/SegmentedBar/component'
 import { SliderComponent } from './ui/Slider/component'
+import { SplitViewComponent } from './ui/SplitView/component'
 import { SwitchComponent } from './ui/Switch/component'
 import { TabViewComponent } from './ui/TabView/component'
 import { TextFieldComponent } from './ui/TextField/component'
@@ -44,6 +45,9 @@ export const routes: Routes = [
   { path: 'ui/SearchBar', component: SearchBarComponent },
   { path: 'ui/SegmentedBar', component: SegmentedBarComponent },
   { path: 'ui/Slider', component: SliderComponent },
+  // must be root route to function properly
+  // here for docs template examples only
+  // { path: 'ui/SplitView', component: SplitViewComponent },
   { path: 'ui/Switch', component: SwitchComponent },
   { path: 'ui/TabView', component: TabViewComponent },
   { path: 'ui/TextField', component: TextFieldComponent },

examples/angular/src/ui/SplitView/component.html

@@ -0,0 +1,31 @@
+<!-- #region example -->
+<SplitView
+  displayMode="twoBesideSecondary"
+  splitBehavior="tile"
+  preferredPrimaryColumnWidthFraction="0.22"
+  preferredSupplementaryColumnWidthFraction="0.34"
+  preferredInspectorColumnWidthFraction="0.19"
+  (inspectorChange)="onInspectorChange($event)"
+  navigationBarTintColor="blue"
+>
+  <page-router-outlet 
+    name="primary" 
+    splitRole="primary"
+  ></page-router-outlet>
+
+  <page-router-outlet
+    name="secondary"
+    splitRole="secondary"
+  ></page-router-outlet>
+
+  <page-router-outlet
+    name="supplementary"
+    splitRole="supplementary"
+  ></page-router-outlet>
+
+  <page-router-outlet
+    name="inspector"
+    splitRole="inspector"
+  ></page-router-outlet>
+</SplitView>
+<!-- #endregion example -->

examples/angular/src/ui/SplitView/component.ts

@@ -0,0 +1,10 @@
+import { Component, NO_ERRORS_SCHEMA } from '@angular/core'
+import { NativeScriptCommonModule } from '@nativescript/angular';
+
+@Component({
+  selector: 'ns-split-view',
+  templateUrl: './component.html',
+  imports: [NativeScriptCommonModule],
+  schemas: [NO_ERRORS_SCHEMA]
+})
+export class SplitViewComponent { }

examples/typescript/src/ui/SplitView/template.xml

@@ -0,0 +1,8 @@
+<!-- #region example -->
+<SplitView displayMode="twoBesideSecondary" splitBehavior="tile" preferredPrimaryColumnWidthFraction="0.25" preferredSupplementaryColumnWidthFraction="0.33" preferredInspectorColumnWidthFraction="0.20">
+  <Frame splitRole="primary" defaultPage="pages/master" />
+  <Frame splitRole="secondary" defaultPage="pages/detail" />
+  <Frame splitRole="supplementary" defaultPage="pages/context" />
+  <Frame splitRole="inspector" defaultPage="pages/inspector" />
+</SplitView>
+<!-- #endregion example -->