Skip to content

Commit 6de4eb4

Browse files
NathanWalkerNathanWalker
authored
feat: SplitView (#162)
1 parent e114f3d commit 6de4eb4

12 files changed

Lines changed: 403 additions & 4 deletions

‎apps/nativescript-demo-ng/src/app/app.routes.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { Routes } from '@angular/router';
22
import { ItemDetailComponent } from './item/item-detail.component';
33
import { ItemsComponent } from './item/items.component';
44
import { ListViewStickyComponent } from './list-view-sticky/list-view-sticky.component';
5+
import { SPLIT_VIEW_ROUTES } from './split-view-demo/split-view.routes';
56
// import { HomeComponent } from './home/home.component';
67
// import { BootGuardService } from './boot-guard.service';
78

@@ -15,6 +16,10 @@ export const routes: Routes = [
1516
path: 'list-view-sticky',
1617
component: ListViewStickyComponent,
1718
},
19+
{
20+
path: 'split-view-demo',
21+
children: SPLIT_VIEW_ROUTES,
22+
},
1823

1924
/**
2025
* Test tab named outlets

‎apps/nativescript-demo-ng/src/app/split-view-demo/split-view-demo.component.html‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<SplitView
2+
displayMode="twoBesideSecondary"
3+
splitBehavior="tile"
4+
preferredPrimaryColumnWidthFraction="0.25"
5+
preferredSupplementaryColumnWidthFraction="0.33"
6+
preferredInspectorColumnWidthFraction="0.2"
7+
(inspectorChange)="splitViewState.onInspectorChange($event)"
8+
>
9+
<page-router-outlet name="primary" splitRole="primary"></page-router-outlet>
10+
<page-router-outlet name="secondary" splitRole="secondary"></page-router-outlet>
11+
<page-router-outlet name="supplementary" splitRole="supplementary"></page-router-outlet>
12+
<page-router-outlet name="inspector" splitRole="inspector"></page-router-outlet>
13+
</SplitView>

‎apps/nativescript-demo-ng/src/app/split-view-demo/split-view-demo.component.ts‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
import { Component, inject, NO_ERRORS_SCHEMA, OnInit, AfterViewInit } from '@angular/core';
2+
import {
3+
NativeScriptCommonModule,
4+
NativeScriptRouterModule,
5+
PageRouterOutlet,
6+
RouterExtensions,
7+
} from '@nativescript/angular';
8+
import { SplitViewState } from './split-view.state';
9+
10+
@Component({
11+
selector: 'ns-split-view-demo',
12+
templateUrl: './split-view-demo.component.html',
13+
imports: [NativeScriptCommonModule, NativeScriptRouterModule, PageRouterOutlet],
14+
schemas: [NO_ERRORS_SCHEMA],
15+
})
16+
export class SplitViewDemoComponent implements OnInit, AfterViewInit {
17+
router = inject(RouterExtensions);
18+
splitViewState = inject(SplitViewState);
19+
20+
ngOnInit() {
21+
console.log('[SplitViewDemo] ngOnInit');
22+
}
23+
24+
ngAfterViewInit() {
25+
console.log('[SplitViewDemo] ngAfterViewInit - view is initialized, navigating to outlets');
26+
// Use setTimeout to ensure the view is fully rendered and outlets are registered
27+
setTimeout(() => {
28+
console.log('[SplitViewDemo] Navigating to outlets...');
29+
this.router
30+
.navigate(
31+
[
32+
'/',
33+
{
34+
outlets: {
35+
primary: ['primary'],
36+
secondary: ['secondary'],
37+
supplementary: ['supplementary'],
38+
inspector: ['inspector'],
39+
},
40+
},
41+
],
42+
{ animated: false },
43+
)
44+
.then((success) => {
45+
console.log(`[SplitViewDemo] navigation result: ${success}`);
46+
})
47+
.catch((err) => {
48+
console.error(`[SplitViewDemo] navigation error: ${err}`);
49+
});
50+
}, 0);
51+
}
52+
}

‎apps/nativescript-demo-ng/src/app/split-view-demo/split-view-inspector.component.ts‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
import { Component, NO_ERRORS_SCHEMA } from '@angular/core';
2+
import { NativeScriptCommonModule } from '@nativescript/angular';
3+
4+
@Component({
5+
selector: 'ns-split-view-inspector',
6+
template: `
7+
<ActionBar title="Inspector" flat="true"></ActionBar>
8+
<GridLayout rows="*" class="h-full bg-slate-50 dark:bg-slate-950">
9+
<ScrollView>
10+
<StackLayout class="p-5">
11+
<StackLayout class="rounded-2xl border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900">
12+
<GridLayout rows="auto" columns="*,auto" class="px-4 py-3 border-b border-slate-200 dark:border-slate-800">
13+
<Label col="0" text="Pinned" class="text-sm text-slate-700 dark:text-slate-200"></Label>
14+
<Switch col="1" checked="true"></Switch>
15+
</GridLayout>
16+
<GridLayout rows="auto" columns="*,auto" class="px-4 py-3 border-b border-slate-200 dark:border-slate-800">
17+
<Label col="0" text="Show badges" class="text-sm text-slate-700 dark:text-slate-200"></Label>
18+
<Switch col="1" checked="false"></Switch>
19+
</GridLayout>
20+
<GridLayout rows="auto" columns="*,auto" class="px-4 py-3">
21+
<Label col="0" text="Compact" class="text-sm text-slate-700 dark:text-slate-200"></Label>
22+
<Switch col="1" checked="true"></Switch>
23+
</GridLayout>
24+
</StackLayout>
25+
26+
<StackLayout
27+
class="mt-5 rounded-2xl border border-slate-200 dark:border-slate-800 bg-slate-50 dark:bg-slate-900 p-4"
28+
>
29+
<Label text="Opacity" class="text-base font-semibold text-slate-900 dark:text-slate-100"></Label>
30+
<Label
31+
text="Use the inspector for controls and metadata."
32+
class="mt-2 text-sm text-slate-700 dark:text-slate-200 leading-[3]"
33+
textWrap="true"
34+
></Label>
35+
<Slider class="mt-3" minValue="0" maxValue="100" value="85"></Slider>
36+
</StackLayout>
37+
</StackLayout>
38+
</ScrollView>
39+
</GridLayout>
40+
`,
41+
imports: [NativeScriptCommonModule],
42+
schemas: [NO_ERRORS_SCHEMA],
43+
})
44+
export class SplitViewInspectorComponent {}

‎apps/nativescript-demo-ng/src/app/split-view-demo/split-view-primary.component.ts‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
import { Component, NO_ERRORS_SCHEMA } from '@angular/core';
2+
import { NativeScriptCommonModule } from '@nativescript/angular';
3+
4+
@Component({
5+
selector: 'ns-split-view-primary',
6+
template: `
7+
<ActionBar title="Primary" flat="true"></ActionBar>
8+
<GridLayout rows="auto,*" class="h-full bg-slate-50 dark:bg-slate-950">
9+
<StackLayout row="0" class="px-5 pt-5 pb-4 border-b border-slate-200 dark:border-slate-800">
10+
<Label text="Split View" class="text-xl font-semibold text-slate-900 dark:text-slate-100"></Label>
11+
<Label text="Primary" class="text-sm text-slate-500 dark:text-slate-400"></Label>
12+
</StackLayout>
13+
14+
<ScrollView row="1">
15+
<StackLayout class="p-5">
16+
<GridLayout columns="*,auto" class="mb-4">
17+
<Label col="0" text="Navigation" class="text-base font-semibold text-slate-900 dark:text-slate-100"></Label>
18+
<Label col="1" text="4 items" class="text-xs text-slate-500 dark:text-slate-400"></Label>
19+
</GridLayout>
20+
21+
<StackLayout class="rounded-2xl border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900">
22+
<GridLayout rows="auto" columns="auto,*" class="px-4 py-3 border-b border-slate-200 dark:border-slate-800">
23+
<Label col="0" text="•" class="text-lg text-slate-500 dark:text-slate-400"></Label>
24+
<Label col="1" text="Overview" class="text-base text-slate-900 dark:text-slate-100"></Label>
25+
</GridLayout>
26+
<GridLayout rows="auto" columns="auto,*" class="px-4 py-3 border-b border-slate-200 dark:border-slate-800">
27+
<Label col="0" text="•" class="text-lg text-slate-500 dark:text-slate-400"></Label>
28+
<Label col="1" text="Accounts" class="text-base text-slate-900 dark:text-slate-100"></Label>
29+
</GridLayout>
30+
<GridLayout rows="auto" columns="auto,*" class="px-4 py-3 border-b border-slate-200 dark:border-slate-800">
31+
<Label col="0" text="•" class="text-lg text-slate-500 dark:text-slate-400"></Label>
32+
<Label col="1" text="Reports" class="text-base text-slate-900 dark:text-slate-100"></Label>
33+
</GridLayout>
34+
<GridLayout rows="auto" columns="auto,*" class="px-4 py-3">
35+
<Label col="0" text="•" class="text-lg text-slate-500 dark:text-slate-400"></Label>
36+
<Label col="1" text="Settings" class="text-base text-slate-900 dark:text-slate-100"></Label>
37+
</GridLayout>
38+
</StackLayout>
39+
40+
<StackLayout
41+
class="mt-5 rounded-2xl border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 p-4"
42+
>
43+
<Label text="Tip" class="text-xs font-semibold text-slate-500 dark:text-slate-400"></Label>
44+
<Label
45+
text="On iPad, keep Primary lightweight. Use Secondary for details and Inspector for properties."
46+
class="mt-1 text-sm text-slate-700 dark:text-slate-200 leading-[3]"
47+
textWrap="true"
48+
></Label>
49+
</StackLayout>
50+
</StackLayout>
51+
</ScrollView>
52+
</GridLayout>
53+
`,
54+
imports: [NativeScriptCommonModule],
55+
schemas: [NO_ERRORS_SCHEMA],
56+
})
57+
export class SplitViewPrimaryComponent {}

‎apps/nativescript-demo-ng/src/app/split-view-demo/split-view-secondary.component.ts‎

Lines changed: 98 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,98 @@
1+
import { Component, inject, NO_ERRORS_SCHEMA } from '@angular/core';
2+
import { NativeScriptCommonModule } from '@nativescript/angular';
3+
import { SplitViewState } from './split-view.state';
4+
5+
@Component({
6+
selector: 'ns-split-view-secondary',
7+
template: `
8+
<GridLayout rows="*" class="h-full bg-white dark:bg-slate-950">
9+
<ScrollView>
10+
<StackLayout class="p-5">
11+
<GridLayout columns="*,*" class="mb-4" columnGap="12">
12+
<StackLayout
13+
col="0"
14+
class="rounded-2xl border border-slate-200 dark:border-slate-800 bg-slate-50 dark:bg-slate-900 p-4 mr-1"
15+
>
16+
<Label text="Active" class="text-xs font-semibold text-slate-500 dark:text-slate-400"></Label>
17+
<Label text="12" class="mt-1 text-3xl font-semibold text-slate-900 dark:text-slate-100"></Label>
18+
<Label text="items" class="text-xs text-slate-500 dark:text-slate-400"></Label>
19+
</StackLayout>
20+
<StackLayout
21+
col="1"
22+
class="rounded-2xl border border-slate-200 dark:border-slate-800 bg-slate-50 dark:bg-slate-900 p-4 ml-1"
23+
>
24+
<Label text="Updated" class="text-xs font-semibold text-slate-500 dark:text-slate-400"></Label>
25+
<Label text="2m" class="mt-1 text-3xl font-semibold text-slate-900 dark:text-slate-100"></Label>
26+
<Label text="ago" class="text-xs text-slate-500 dark:text-slate-400"></Label>
27+
</StackLayout>
28+
</GridLayout>
29+
30+
<StackLayout class="rounded-2xl border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 p-4">
31+
<Label text="Summary" class="text-base font-semibold text-slate-900 dark:text-slate-100"></Label>
32+
<Label
33+
text="This column is ideal for the main content. Put your routed page content here."
34+
class="mt-2 text-sm text-slate-700 dark:text-slate-200 leading-[3]"
35+
textWrap="true"
36+
></Label>
37+
38+
<GridLayout rows="auto,auto,auto" columns="*,auto" class="mt-4" rowGap="10">
39+
<Label row="0" col="0" text="Status" class="text-sm text-slate-500 dark:text-slate-400"></Label>
40+
<Label
41+
row="0"
42+
col="1"
43+
text="Ready"
44+
class="text-sm font-semibold text-slate-900 dark:text-slate-100"
45+
></Label>
46+
47+
<Label row="1" col="0" text="Owner" class="text-sm text-slate-500 dark:text-slate-400"></Label>
48+
<Label
49+
row="1"
50+
col="1"
51+
text="Demo"
52+
class="text-sm font-semibold text-slate-900 dark:text-slate-100"
53+
></Label>
54+
55+
<Label row="2" col="0" text="Mode" class="text-sm text-slate-500 dark:text-slate-400"></Label>
56+
<Label
57+
row="2"
58+
col="1"
59+
text="Two-beside"
60+
class="text-sm font-semibold text-slate-900 dark:text-slate-100"
61+
></Label>
62+
</GridLayout>
63+
</StackLayout>
64+
65+
<StackLayout
66+
class="mt-5 rounded-2xl border border-slate-200 dark:border-slate-800 bg-slate-50 dark:bg-slate-900 p-4"
67+
>
68+
<Label text="Next" class="text-xs font-semibold text-slate-500 dark:text-slate-400"></Label>
69+
<Label
70+
text="Add your real detail view here (lists, charts, forms)."
71+
class="mt-1 text-sm text-slate-700 dark:text-slate-200"
72+
textWrap="true"
73+
></Label>
74+
</StackLayout>
75+
76+
@if (!splitViewState.inspectorVisible()) {
77+
<StackLayout
78+
class="mt-5 rounded-2xl border border-slate-200 dark:border-slate-800 bg-slate-50 dark:bg-slate-900 p-4"
79+
(tap)="splitViewState.setInspectorVisible(true)"
80+
>
81+
<Label text="Open Inspector" class="text-xs font-semibold text-slate-500 dark:text-slate-400"></Label>
82+
<Label
83+
text="You can open the Inspector to adjust properties."
84+
class="mt-1 text-sm text-slate-700 dark:text-slate-200"
85+
textWrap="true"
86+
></Label>
87+
</StackLayout>
88+
}
89+
</StackLayout>
90+
</ScrollView>
91+
</GridLayout>
92+
`,
93+
imports: [NativeScriptCommonModule],
94+
schemas: [NO_ERRORS_SCHEMA],
95+
})
96+
export class SplitViewSecondaryComponent {
97+
splitViewState = inject(SplitViewState);
98+
}

‎apps/nativescript-demo-ng/src/app/split-view-demo/split-view-supplementary.component.ts‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
import { Component, NO_ERRORS_SCHEMA } from '@angular/core';
2+
import { NativeScriptCommonModule } from '@nativescript/angular';
3+
4+
@Component({
5+
selector: 'ns-split-view-supplementary',
6+
template: `
7+
<GridLayout rows="auto,*" class="h-full bg-slate-50 dark:bg-slate-950">
8+
<StackLayout row="0" class="px-5 pt-5 pb-4 border-b border-slate-200 dark:border-slate-800">
9+
<Label text="Activity" class="text-xl font-semibold text-slate-900 dark:text-slate-100"></Label>
10+
<Label text="Supplementary" class="text-sm text-slate-500 dark:text-slate-400"></Label>
11+
</StackLayout>
12+
13+
<ScrollView row="1">
14+
<StackLayout class="p-5">
15+
<StackLayout class="rounded-2xl border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 p-4">
16+
<Label text="Today" class="text-base font-semibold text-slate-900 dark:text-slate-100"></Label>
17+
18+
<GridLayout columns="auto,*" class="mt-3" columnGap="10">
19+
<Label col="0" text="•" class="text-lg text-slate-500 dark:text-slate-400"></Label>
20+
<Label
21+
col="1"
22+
text="Opened the split view demo"
23+
class="text-sm text-slate-700 leading-[3] dark:text-slate-200"
24+
textWrap="true"
25+
></Label>
26+
</GridLayout>
27+
<GridLayout columns="auto,*" class="mt-2" columnGap="10">
28+
<Label col="0" text="•" class="text-lg text-slate-500 dark:text-slate-400"></Label>
29+
<Label
30+
col="1"
31+
text="Routed pages into named outlets"
32+
class="text-sm text-slate-700 leading-[3] dark:text-slate-200"
33+
textWrap="true"
34+
></Label>
35+
</GridLayout>
36+
<GridLayout columns="auto,*" class="mt-2" columnGap="10">
37+
<Label col="0" text="•" class="text-lg text-slate-500 dark:text-slate-400"></Label>
38+
<Label
39+
col="1"
40+
text="Verified controller mapping on iOS"
41+
class="text-sm text-slate-700 leading-[3] dark:text-slate-200"
42+
textWrap="true"
43+
></Label>
44+
</GridLayout>
45+
</StackLayout>
46+
47+
<StackLayout
48+
class="mt-5 rounded-2xl border border-slate-200 dark:border-slate-800 bg-slate-50 dark:bg-slate-900 p-4"
49+
>
50+
<Label text="Notes" class="text-base font-semibold text-slate-900 dark:text-slate-100"></Label>
51+
<Label
52+
text="Supplementary is great for context: recent items, related data, or quick shortcuts."
53+
class="mt-2 text-sm text-slate-700 dark:text-slate-200 leading-[3]"
54+
textWrap="true"
55+
></Label>
56+
</StackLayout>
57+
</StackLayout>
58+
</ScrollView>
59+
</GridLayout>
60+
`,
61+
imports: [NativeScriptCommonModule],
62+
schemas: [NO_ERRORS_SCHEMA],
63+
})
64+
export class SplitViewSupplementaryComponent {}

‎apps/nativescript-demo-ng/src/app/split-view-demo/split-view.routes.ts‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import { Routes } from '@angular/router';
2+
import { SplitViewPrimaryComponent } from './split-view-primary.component';
3+
import { SplitViewSecondaryComponent } from './split-view-secondary.component';
4+
import { SplitViewSupplementaryComponent } from './split-view-supplementary.component';
5+
import { SplitViewInspectorComponent } from './split-view-inspector.component';
6+
7+
// Since SplitViewDemoComponent is bootstrapped directly, we don't include it in routes.
8+
// The named outlets are defined in SplitViewDemoComponent's template,
9+
// and these child routes activate into those outlets.
10+
export const SPLIT_VIEW_ROUTES: Routes = [
11+
{
12+
path: 'primary',
13+
component: SplitViewPrimaryComponent,
14+
outlet: 'primary',
15+
},
16+
{
17+
path: 'secondary',
18+
component: SplitViewSecondaryComponent,
19+
outlet: 'secondary',
20+
},
21+
{
22+
path: 'supplementary',
23+
component: SplitViewSupplementaryComponent,
24+
outlet: 'supplementary',
25+
},
26+
{
27+
path: 'inspector',
28+
component: SplitViewInspectorComponent,
29+
outlet: 'inspector',
30+
},
31+
];

0 commit comments

Comments
 (0)