feat: SplitView phase 1

NativeScript · NathanWalker · Jan 4, 2026 · Dec 3, 2025 · Dec 3, 2025 · Dec 8, 2025
commit 104e23ec5a28ebaf06f9931846c96b275272a42b
diff --git a/apps/nativescript-demo-ng/src/app/app.routes.ts b/apps/nativescript-demo-ng/src/app/app.routes.ts
@@ -2,6 +2,7 @@ import { Routes } from '@angular/router';
 import { ItemDetailComponent } from './item/item-detail.component';
 import { ItemsComponent } from './item/items.component';
 import { ListViewStickyComponent } from './list-view-sticky/list-view-sticky.component';
+import { SPLIT_VIEW_ROUTES } from './split-view-demo/split-view.routes';
 // import { HomeComponent } from './home/home.component';
 // import { BootGuardService } from './boot-guard.service';
 
@@ -15,6 +16,10 @@ export const routes: Routes = [
     path: 'list-view-sticky',
     component: ListViewStickyComponent,
   },
+  {
+    path: 'split-view-demo',
+    children: SPLIT_VIEW_ROUTES,
+  },
 
   /**
    * Test tab named outlets

diff --git a/apps/nativescript-demo-ng/src/app/split-view-demo/split-view-demo.component.html b/apps/nativescript-demo-ng/src/app/split-view-demo/split-view-demo.component.html
@@ -0,0 +1,17 @@
+<ActionBar title="SplitView Demo"></ActionBar>
+
+<GridLayout rows="*, *" columns="*">
+  <SplitView
+    row="0"
+    displayMode="twoBesideSecondary"
+    splitBehavior="tile"
+    preferredPrimaryColumnWidthFraction="0.25"
+    preferredSupplementaryColumnWidthFraction="0.33"
+    preferredInspectorColumnWidthFraction="0.2"
+  >
+    <page-router-outlet name="primary"></page-router-outlet>
+    <page-router-outlet name="secondary"></page-router-outlet>
+    <page-router-outlet name="supplementary"></page-router-outlet>
+    <page-router-outlet name="inspector"></page-router-outlet>
+  </SplitView>
+</GridLayout>
diff --git a/apps/nativescript-demo-ng/src/app/split-view-demo/split-view-demo.component.ts b/apps/nativescript-demo-ng/src/app/split-view-demo/split-view-demo.component.ts
@@ -0,0 +1,11 @@
+import { Component, NO_ERRORS_SCHEMA } from '@angular/core';
+import { NativeScriptCommonModule, NativeScriptRouterModule } from '@nativescript/angular';
+
+@Component({
+  selector: 'ns-split-view-demo',
+  templateUrl: './split-view-demo.component.html',
+  imports: [NativeScriptCommonModule, NativeScriptRouterModule],
+  standalone: true,
+  schemas: [NO_ERRORS_SCHEMA],
+})
+export class SplitViewDemoComponent {}
diff --git a/apps/nativescript-demo-ng/src/app/split-view-demo/split-view-inspector.component.ts b/apps/nativescript-demo-ng/src/app/split-view-demo/split-view-inspector.component.ts
@@ -0,0 +1,14 @@
+import { Component, NO_ERRORS_SCHEMA } from '@angular/core';
+import { NativeScriptCommonModule } from '@nativescript/angular';
+
+@Component({
+  selector: 'ns-split-view-inspector',
+  template: `<GridLayout rows="auto,*" class="p-16">
+    <Label row="0" text="Inspector" class="h2 mb-8"></Label>
+    <Label row="1" text="This is the inspector column." class="text-center"></Label>
+  </GridLayout>`,
+  standalone: true,
+  imports: [NativeScriptCommonModule],
+  schemas: [NO_ERRORS_SCHEMA],
+})
+export class SplitViewInspectorComponent {}
diff --git a/apps/nativescript-demo-ng/src/app/split-view-demo/split-view-primary.component.ts b/apps/nativescript-demo-ng/src/app/split-view-demo/split-view-primary.component.ts
@@ -0,0 +1,14 @@
+import { Component, NO_ERRORS_SCHEMA } from '@angular/core';
+import { NativeScriptCommonModule } from '@nativescript/angular';
+
+@Component({
+  selector: 'ns-split-view-primary',
+  template: `<GridLayout rows="auto,*" class="p-16">
+    <Label row="0" text="Primary" class="h2 mb-8"></Label>
+    <Label row="1" text="This is the primary column." class="text-center"></Label>
+  </GridLayout>`,
+  standalone: true,
+  imports: [NativeScriptCommonModule],
+  schemas: [NO_ERRORS_SCHEMA],
+})
+export class SplitViewPrimaryComponent {}
diff --git a/apps/nativescript-demo-ng/src/app/split-view-demo/split-view-secondary.component.ts b/apps/nativescript-demo-ng/src/app/split-view-demo/split-view-secondary.component.ts
@@ -0,0 +1,14 @@
+import { Component, NO_ERRORS_SCHEMA } from '@angular/core';
+import { NativeScriptCommonModule } from '@nativescript/angular';
+
+@Component({
+  selector: 'ns-split-view-secondary',
+  template: `<GridLayout rows="auto,*" class="p-16">
+    <Label row="0" text="Secondary" class="h2 mb-8"></Label>
+    <Label row="1" text="This is the secondary column." class="text-center"></Label>
+  </GridLayout>`,
+  standalone: true,
+  imports: [NativeScriptCommonModule],
+  schemas: [NO_ERRORS_SCHEMA],
+})
+export class SplitViewSecondaryComponent {}
diff --git a/apps/nativescript-demo-ng/src/app/split-view-demo/split-view-supplementary.component.ts b/apps/nativescript-demo-ng/src/app/split-view-demo/split-view-supplementary.component.ts
@@ -0,0 +1,14 @@
+import { Component, NO_ERRORS_SCHEMA } from '@angular/core';
+import { NativeScriptCommonModule } from '@nativescript/angular';
+
+@Component({
+  selector: 'ns-split-view-supplementary',
+  template: `<GridLayout rows="auto,*" class="p-16">
+    <Label row="0" text="Supplementary" class="h2 mb-8"></Label>
+    <Label row="1" text="This is the supplementary column." class="text-center"></Label>
+  </GridLayout>`,
+  standalone: true,
+  imports: [NativeScriptCommonModule],
+  schemas: [NO_ERRORS_SCHEMA],
+})
+export class SplitViewSupplementaryComponent {}
diff --git a/apps/nativescript-demo-ng/src/app/split-view-demo/split-view.routes.ts b/apps/nativescript-demo-ng/src/app/split-view-demo/split-view.routes.ts
@@ -0,0 +1,40 @@
+import { Routes } from '@angular/router';
+import { SplitViewDemoComponent } from './split-view-demo.component';
+import { SplitViewPrimaryComponent } from './split-view-primary.component';
+import { SplitViewSecondaryComponent } from './split-view-secondary.component';
+import { SplitViewSupplementaryComponent } from './split-view-supplementary.component';
+import { SplitViewInspectorComponent } from './split-view-inspector.component';
+
+export const SPLIT_VIEW_ROUTES: Routes = [
+  {
+    path: '',
+    component: SplitViewDemoComponent,
+    children: [
+      {
+        path: '',
+        redirectTo: '/split-view-demo/(primary:primary//secondary:secondary//supplementary:supplementary//inspector:inspector)',
+        pathMatch: 'full',
+      },
+      {
+        path: 'primary',
+        component: SplitViewPrimaryComponent,
+        outlet: 'primary',
+      },
+      {
+        path: 'secondary',
+        component: SplitViewSecondaryComponent,
+        outlet: 'secondary',
+      },
+      {
+        path: 'supplementary',
+        component: SplitViewSupplementaryComponent,
+        outlet: 'supplementary',
+      },
+      {
+        path: 'inspector',
+        component: SplitViewInspectorComponent,
+        outlet: 'inspector',
+      },
+    ],
+  },
+];
diff --git a/packages/angular/src/lib/element-registry/common-views.ts b/packages/angular/src/lib/element-registry/common-views.ts
@@ -1,4 +1,4 @@
-import { AbsoluteLayout, ActivityIndicator, Button, ContentView, DatePicker, DockLayout, FlexboxLayout, FormattedString, Frame, GridLayout, HtmlView, Image, Label, ListPicker, ListView, Page, Placeholder, Progress, ProxyViewContainer, Repeater, RootLayout, ScrollView, SearchBar, SegmentedBar, SegmentedBarItem, Slider, Span, StackLayout, Switch, TabView, TextField, TextView, TimePicker, WebView, WrapLayout } from '@nativescript/core';
+import { AbsoluteLayout, ActivityIndicator, Button, ContentView, DatePicker, DockLayout, FlexboxLayout, FormattedString, Frame, GridLayout, HtmlView, Image, Label, ListPicker, ListView, Page, Placeholder, Progress, ProxyViewContainer, Repeater, RootLayout, ScrollView, SearchBar, SegmentedBar, SegmentedBarItem, Slider, Span, SplitView, StackLayout, Switch, TabView, TextField, TextView, TimePicker, WebView, WrapLayout } from '@nativescript/core';
 import { formattedStringMeta, frameMeta, textBaseMeta } from './metas';
 import { registerElement } from './registry';
 
@@ -33,6 +33,7 @@ export function registerNativeScriptViewComponents() {
     registerElement('SegmentedBar', () => SegmentedBar);
     registerElement('SegmentedBarItem', () => SegmentedBarItem);
     registerElement('Slider', () => Slider);
+    registerElement('SplitView', () => SplitView);
     registerElement('StackLayout', () => StackLayout);
     registerElement('FlexboxLayout', () => FlexboxLayout);
     registerElement('Switch', () => Switch);