Skip to content

feat: SplitView #162

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
NathanWalker merged 7 commits into from
Jan 4, 2026
Merged

feat: SplitView #162

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
104e23e
feat: SplitView phase 1
NathanWalker Dec 3, 2025
f934fec
Merge remote-tracking branch 'origin/main' into feat/splitview
NathanWalker Dec 3, 2025
8c1467f
feat: demo wip
NathanWalker Dec 8, 2025
9402cdd
feat: splitview working impl
NathanWalker Dec 19, 2025
df877d3
chore: merge
NathanWalker Dec 20, 2025
dcbd696
chore: merge
NathanWalker Dec 27, 2025
c85314d
chore: leave demo with regular setup
NathanWalker Jan 4, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
feat: splitview working impl
  • Loading branch information
@NathanWalker
NathanWalker committed Dec 19, 2025
commit 9402cdd482b5a1d93ce63040d05235098414ca5b
9 changes: 5 additions & 4 deletions apps/nativescript-demo-ng/src/app/split-view-demo/split-view-demo.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,10 @@
preferredPrimaryColumnWidthFraction="0.25"
preferredSupplementaryColumnWidthFraction="0.33"
preferredInspectorColumnWidthFraction="0.2"
(inspectorChange)="splitViewState.onInspectorChange($event)"
>
<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>
<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>
50 changes: 34 additions & 16 deletions apps/nativescript-demo-ng/src/app/split-view-demo/split-view-demo.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,34 +1,52 @@
import { Component, inject, NO_ERRORS_SCHEMA, OnInit } from '@angular/core';
import { Component, inject, NO_ERRORS_SCHEMA, OnInit, AfterViewInit } from '@angular/core';
import {
NativeScriptCommonModule,
NativeScriptRouterModule,
PageRouterOutlet,
RouterExtensions,
} from '@nativescript/angular';
import { SplitViewState } from './split-view.state';

@Component({
selector: 'ns-split-view-demo',
templateUrl: './split-view-demo.component.html',
imports: [NativeScriptCommonModule, NativeScriptRouterModule, PageRouterOutlet],
schemas: [NO_ERRORS_SCHEMA],
})
export class SplitViewDemoComponent implements OnInit {
export class SplitViewDemoComponent implements OnInit, AfterViewInit {
router = inject(RouterExtensions);
splitViewState = inject(SplitViewState);

ngOnInit() {
this.router.navigate(
[
'/',
{
outlets: {
primary: ['primary'],
secondary: ['secondary'],
supplementary: ['supplementary'],
inspector: ['inspector'],
},
},
],
{ animated: false },
);
console.log('[SplitViewDemo] ngOnInit');
}

ngAfterViewInit() {
console.log('[SplitViewDemo] ngAfterViewInit - view is initialized, navigating to outlets');
// Use setTimeout to ensure the view is fully rendered and outlets are registered
setTimeout(() => {
console.log('[SplitViewDemo] Navigating to outlets...');
this.router
.navigate(
[
'/',
{
outlets: {
primary: ['primary'],
secondary: ['secondary'],
supplementary: ['supplementary'],
inspector: ['inspector'],
},
},
],
{ animated: false },
)
.then((success) => {
console.log(`[SplitViewDemo] navigation result: ${success}`);
})
.catch((err) => {
console.error(`[SplitViewDemo] navigation error: ${err}`);
});
}, 0);
}
}
39 changes: 35 additions & 4 deletions apps/nativescript-demo-ng/src/app/split-view-demo/split-view-inspector.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,41 @@ 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>`,
template: `
<ActionBar title="Inspector" flat="true"></ActionBar>
<GridLayout rows="*" class="h-full bg-slate-50 dark:bg-slate-950">
<ScrollView>
<StackLayout class="p-5">
<StackLayout class="rounded-2xl border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900">
<GridLayout rows="auto" columns="*,auto" class="px-4 py-3 border-b border-slate-200 dark:border-slate-800">
<Label col="0" text="Pinned" class="text-sm text-slate-700 dark:text-slate-200"></Label>
<Switch col="1" checked="true"></Switch>
</GridLayout>
<GridLayout rows="auto" columns="*,auto" class="px-4 py-3 border-b border-slate-200 dark:border-slate-800">
<Label col="0" text="Show badges" class="text-sm text-slate-700 dark:text-slate-200"></Label>
<Switch col="1" checked="false"></Switch>
</GridLayout>
<GridLayout rows="auto" columns="*,auto" class="px-4 py-3">
<Label col="0" text="Compact" class="text-sm text-slate-700 dark:text-slate-200"></Label>
<Switch col="1" checked="true"></Switch>
</GridLayout>
</StackLayout>

<StackLayout
class="mt-5 rounded-2xl border border-slate-200 dark:border-slate-800 bg-slate-50 dark:bg-slate-900 p-4"
>
<Label text="Opacity" class="text-base font-semibold text-slate-900 dark:text-slate-100"></Label>
<Label
text="Use the inspector for controls and metadata."
class="mt-2 text-sm text-slate-700 dark:text-slate-200 leading-[3]"
textWrap="true"
></Label>
<Slider class="mt-3" minValue="0" maxValue="100" value="85"></Slider>
</StackLayout>
</StackLayout>
</ScrollView>
</GridLayout>
`,
imports: [NativeScriptCommonModule],
schemas: [NO_ERRORS_SCHEMA],
})
Expand Down
52 changes: 48 additions & 4 deletions apps/nativescript-demo-ng/src/app/split-view-demo/split-view-primary.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,54 @@ 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>`,
template: `
<ActionBar title="Primary" flat="true"></ActionBar>
<GridLayout rows="auto,*" class="h-full bg-slate-50 dark:bg-slate-950">
<StackLayout row="0" class="px-5 pt-5 pb-4 border-b border-slate-200 dark:border-slate-800">
<Label text="Split View" class="text-xl font-semibold text-slate-900 dark:text-slate-100"></Label>
<Label text="Primary" class="text-sm text-slate-500 dark:text-slate-400"></Label>
</StackLayout>

<ScrollView row="1">
<StackLayout class="p-5">
<GridLayout columns="*,auto" class="mb-4">
<Label col="0" text="Navigation" class="text-base font-semibold text-slate-900 dark:text-slate-100"></Label>
<Label col="1" text="4 items" class="text-xs text-slate-500 dark:text-slate-400"></Label>
</GridLayout>

<StackLayout class="rounded-2xl border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900">
<GridLayout rows="auto" columns="auto,*" class="px-4 py-3 border-b border-slate-200 dark:border-slate-800">
<Label col="0" text="•" class="text-lg text-slate-500 dark:text-slate-400"></Label>
<Label col="1" text="Overview" class="text-base text-slate-900 dark:text-slate-100"></Label>
</GridLayout>
<GridLayout rows="auto" columns="auto,*" class="px-4 py-3 border-b border-slate-200 dark:border-slate-800">
<Label col="0" text="•" class="text-lg text-slate-500 dark:text-slate-400"></Label>
<Label col="1" text="Accounts" class="text-base text-slate-900 dark:text-slate-100"></Label>
</GridLayout>
<GridLayout rows="auto" columns="auto,*" class="px-4 py-3 border-b border-slate-200 dark:border-slate-800">
<Label col="0" text="•" class="text-lg text-slate-500 dark:text-slate-400"></Label>
<Label col="1" text="Reports" class="text-base text-slate-900 dark:text-slate-100"></Label>
</GridLayout>
<GridLayout rows="auto" columns="auto,*" class="px-4 py-3">
<Label col="0" text="•" class="text-lg text-slate-500 dark:text-slate-400"></Label>
<Label col="1" text="Settings" class="text-base text-slate-900 dark:text-slate-100"></Label>
</GridLayout>
</StackLayout>

<StackLayout
class="mt-5 rounded-2xl border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 p-4"
>
<Label text="Tip" class="text-xs font-semibold text-slate-500 dark:text-slate-400"></Label>
<Label
text="On iPad, keep Primary lightweight. Use Secondary for details and Inspector for properties."
class="mt-1 text-sm text-slate-700 dark:text-slate-200 leading-[3]"
textWrap="true"
></Label>
</StackLayout>
</StackLayout>
</ScrollView>
</GridLayout>
`,
imports: [NativeScriptCommonModule],
schemas: [NO_ERRORS_SCHEMA],
})
Expand Down
97 changes: 91 additions & 6 deletions apps/nativescript-demo-ng/src/app/split-view-demo/split-view-secondary.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,98 @@
import { Component, NO_ERRORS_SCHEMA } from '@angular/core';
import { Component, inject, NO_ERRORS_SCHEMA } from '@angular/core';
import { NativeScriptCommonModule } from '@nativescript/angular';
import { SplitViewState } from './split-view.state';

@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>`,
template: `
<GridLayout rows="*" class="h-full bg-white dark:bg-slate-950">
<ScrollView>
<StackLayout class="p-5">
<GridLayout columns="*,*" class="mb-4" columnGap="12">
<StackLayout
col="0"
class="rounded-2xl border border-slate-200 dark:border-slate-800 bg-slate-50 dark:bg-slate-900 p-4 mr-1"
>
<Label text="Active" class="text-xs font-semibold text-slate-500 dark:text-slate-400"></Label>
<Label text="12" class="mt-1 text-3xl font-semibold text-slate-900 dark:text-slate-100"></Label>
<Label text="items" class="text-xs text-slate-500 dark:text-slate-400"></Label>
</StackLayout>
<StackLayout
col="1"
class="rounded-2xl border border-slate-200 dark:border-slate-800 bg-slate-50 dark:bg-slate-900 p-4 ml-1"
>
<Label text="Updated" class="text-xs font-semibold text-slate-500 dark:text-slate-400"></Label>
<Label text="2m" class="mt-1 text-3xl font-semibold text-slate-900 dark:text-slate-100"></Label>
<Label text="ago" class="text-xs text-slate-500 dark:text-slate-400"></Label>
</StackLayout>
</GridLayout>

<StackLayout class="rounded-2xl border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 p-4">
<Label text="Summary" class="text-base font-semibold text-slate-900 dark:text-slate-100"></Label>
<Label
text="This column is ideal for the main content. Put your routed page content here."
class="mt-2 text-sm text-slate-700 dark:text-slate-200 leading-[3]"
textWrap="true"
></Label>

<GridLayout rows="auto,auto,auto" columns="*,auto" class="mt-4" rowGap="10">
<Label row="0" col="0" text="Status" class="text-sm text-slate-500 dark:text-slate-400"></Label>
<Label
row="0"
col="1"
text="Ready"
class="text-sm font-semibold text-slate-900 dark:text-slate-100"
></Label>

<Label row="1" col="0" text="Owner" class="text-sm text-slate-500 dark:text-slate-400"></Label>
<Label
row="1"
col="1"
text="Demo"
class="text-sm font-semibold text-slate-900 dark:text-slate-100"
></Label>

<Label row="2" col="0" text="Mode" class="text-sm text-slate-500 dark:text-slate-400"></Label>
<Label
row="2"
col="1"
text="Two-beside"
class="text-sm font-semibold text-slate-900 dark:text-slate-100"
></Label>
</GridLayout>
</StackLayout>

<StackLayout
class="mt-5 rounded-2xl border border-slate-200 dark:border-slate-800 bg-slate-50 dark:bg-slate-900 p-4"
>
<Label text="Next" class="text-xs font-semibold text-slate-500 dark:text-slate-400"></Label>
<Label
text="Add your real detail view here (lists, charts, forms)."
class="mt-1 text-sm text-slate-700 dark:text-slate-200"
textWrap="true"
></Label>
</StackLayout>

@if (!splitViewState.inspectorVisible()) {
<StackLayout
class="mt-5 rounded-2xl border border-slate-200 dark:border-slate-800 bg-slate-50 dark:bg-slate-900 p-4"
(tap)="splitViewState.setInspectorVisible(true)"
>
<Label text="Open Inspector" class="text-xs font-semibold text-slate-500 dark:text-slate-400"></Label>
<Label
text="You can open the Inspector to adjust properties."
class="mt-1 text-sm text-slate-700 dark:text-slate-200"
textWrap="true"
></Label>
</StackLayout>
}
</StackLayout>
</ScrollView>
</GridLayout>
`,
imports: [NativeScriptCommonModule],
schemas: [NO_ERRORS_SCHEMA],
})
export class SplitViewSecondaryComponent {}
export class SplitViewSecondaryComponent {
splitViewState = inject(SplitViewState);
}
59 changes: 55 additions & 4 deletions apps/nativescript-demo-ng/src/app/split-view-demo/split-view-supplementary.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,61 @@ 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>`,
template: `
<GridLayout rows="auto,*" class="h-full bg-slate-50 dark:bg-slate-950">
<StackLayout row="0" class="px-5 pt-5 pb-4 border-b border-slate-200 dark:border-slate-800">
<Label text="Activity" class="text-xl font-semibold text-slate-900 dark:text-slate-100"></Label>
<Label text="Supplementary" class="text-sm text-slate-500 dark:text-slate-400"></Label>
</StackLayout>

<ScrollView row="1">
<StackLayout class="p-5">
<StackLayout class="rounded-2xl border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 p-4">
<Label text="Today" class="text-base font-semibold text-slate-900 dark:text-slate-100"></Label>

<GridLayout columns="auto,*" class="mt-3" columnGap="10">
<Label col="0" text="•" class="text-lg text-slate-500 dark:text-slate-400"></Label>
<Label
col="1"
text="Opened the split view demo"
class="text-sm text-slate-700 leading-[3] dark:text-slate-200"
textWrap="true"
></Label>
</GridLayout>
<GridLayout columns="auto,*" class="mt-2" columnGap="10">
<Label col="0" text="•" class="text-lg text-slate-500 dark:text-slate-400"></Label>
<Label
col="1"
text="Routed pages into named outlets"
class="text-sm text-slate-700 leading-[3] dark:text-slate-200"
textWrap="true"
></Label>
</GridLayout>
<GridLayout columns="auto,*" class="mt-2" columnGap="10">
<Label col="0" text="•" class="text-lg text-slate-500 dark:text-slate-400"></Label>
<Label
col="1"
text="Verified controller mapping on iOS"
class="text-sm text-slate-700 leading-[3] dark:text-slate-200"
textWrap="true"
></Label>
</GridLayout>
</StackLayout>

<StackLayout
class="mt-5 rounded-2xl border border-slate-200 dark:border-slate-800 bg-slate-50 dark:bg-slate-900 p-4"
>
<Label text="Notes" class="text-base font-semibold text-slate-900 dark:text-slate-100"></Label>
<Label
text="Supplementary is great for context: recent items, related data, or quick shortcuts."
class="mt-2 text-sm text-slate-700 dark:text-slate-200 leading-[3]"
textWrap="true"
></Label>
</StackLayout>
</StackLayout>
</ScrollView>
</GridLayout>
`,
imports: [NativeScriptCommonModule],
schemas: [NO_ERRORS_SCHEMA],
})
Expand Down
Loading