feat(ios): SplitView

apps/toolbox/src/main.ts

@@ -1,3 +1,6 @@
-import { Application } from '@nativescript/core';
+import { Application, SplitView } from '@nativescript/core';
 
-Application.run({ moduleName: 'app-root' });
+// Application.run({ moduleName: 'app-root' });
+
+SplitView.SplitStyle = 'triple';
+Application.run({ moduleName: 'split-view/split-view-root' });

apps/toolbox/src/split-view/split-view-primary.ts

@@ -0,0 +1,23 @@
+import { Observable, EventData, Page, SplitView, ItemEventData } from '@nativescript/core';
+import { getItemCallbacks } from './split-view-root';
+let page: Page;
+
+export function navigatingTo(args: EventData) {
+	page = <Page>args.object;
+	page.bindingContext = new SplitViewPrimaryModel();
+}
+
+export class SplitViewPrimaryModel extends Observable {
+	items: string[] = [];
+
+	constructor() {
+		super();
+		this.items = Array.from({ length: 20 }, (_, i) => `Item ${i + 1}`);
+	}
+
+	onItemTap(args: ItemEventData) {
+		console.log('args.index', args.index);
+		SplitView.getInstance()?.showSecondary();
+		getItemCallbacks().forEach((callback) => callback(this.items[args.index]));
+	}
+}

apps/toolbox/src/split-view/split-view-primary.xml

@@ -0,0 +1,16 @@
+<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="navigatingTo" class="page">
+<ActionBar title="Primary View" class="action-bar" iosLargeTitle="true"></ActionBar>
+
+  <!-- Primary column (master) -->
+  <GridLayout rows="auto,*">
+    <!-- <Label text="Primary" marginBottom="12" marginLeft="8" fontSize="22" fontWeight="bold" /> -->
+    <ListView row="1" items="{{ items }}" itemTap="{{ onItemTap }}" backgroundColor="white">
+      <ListView.itemTemplate>
+          <GridLayout padding="12">
+            <Label text="{{ $value }}" fontSize="18" />
+          </GridLayout>
+      </ListView.itemTemplate>
+    </ListView>
+  </GridLayout>
+
+</Page>

apps/toolbox/src/split-view/split-view-root.ts

@@ -0,0 +1,17 @@
+import { Observable, EventData, Page } from '@nativescript/core';
+let page: Page;
+
+export function navigatingTo(args: EventData) {
+	page = <Page>args.object;
+	page.bindingContext = new SplitViewModel();
+}
+
+export class SplitViewModel extends Observable {}
+
+let itemCallbacks: Array<(item: any) => void> = [];
+export function setItemCallbacks(changeItem: Array<(item: any) => void>) {
+	itemCallbacks.push(...changeItem);
+}
+export function getItemCallbacks() {
+	return itemCallbacks;
+}

apps/toolbox/src/split-view/split-view-root.xml

@@ -0,0 +1,14 @@
+<SplitView xmlns="http://schemas.nativescript.org/tns.xsd" displayMode="twoBesideSecondary" splitBehavior="tile" preferredPrimaryColumnWidthFraction="0.25" preferredSupplementaryColumnWidthFraction="0.33">
+  <Frame splitRole="primary" defaultPage="split-view/split-view-primary">
+
+  </Frame>
+
+  <Frame splitRole="secondary" defaultPage="split-view/split-view-secondary">
+
+  </Frame>
+
+  <Frame splitRole="supplementary" defaultPage="split-view/split-view-supplement">
+
+  </Frame>
+
+</SplitView>

apps/toolbox/src/split-view/split-view-secondary.ts

@@ -0,0 +1,24 @@
+import { Observable, EventData, Page, SplitView } from '@nativescript/core';
+import { setItemCallbacks } from './split-view-root';
+let page: Page;
+
+export function navigatingTo(args: EventData) {
+	page = <Page>args.object;
+	page.bindingContext = new SplitViewSecondaryModel();
+}
+
+export class SplitViewSecondaryModel extends Observable {
+	selectedItem = `Select an item from Primary.`;
+	constructor() {
+		super();
+		setItemCallbacks([this.changeItem.bind(this)]);
+	}
+	toggle() {
+		SplitView.getInstance()?.showPrimary();
+	}
+
+	changeItem(item: any) {
+		this.selectedItem = item;
+		this.notifyPropertyChange('selectedItem', item);
+	}
+}

apps/toolbox/src/split-view/split-view-secondary.xml

@@ -0,0 +1,10 @@
+<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="navigatingTo" class="page">
+  <ActionBar title="Secondary View" class="action-bar">
+  </ActionBar>
+  <!-- Secondary column (detail) -->
+  <StackLayout class="p-16">
+    <Label text="Secondary" marginBottom="12" fontSize="22" fontWeight="bold" />
+    <Label text="{{ selectedItem }}" textWrap="true" tap="{{toggle}}" />
+  </StackLayout>
+
+</Page>

apps/toolbox/src/split-view/split-view-supplement.ts

@@ -0,0 +1,24 @@
+import { Observable, EventData, Page, SplitView } from '@nativescript/core';
+import { setItemCallbacks } from './split-view-root';
+let page: Page;
+
+export function navigatingTo(args: EventData) {
+	page = <Page>args.object;
+	page.bindingContext = new SplitViewSupplementaryModel();
+}
+
+export class SplitViewSupplementaryModel extends Observable {
+	selectedItem = `Supplementary - Select an item.`;
+	constructor() {
+		super();
+		setItemCallbacks([this.changeItem.bind(this)]);
+	}
+	toggle() {
+		SplitView.getInstance()?.showPrimary();
+	}
+
+	changeItem(item: any) {
+		this.selectedItem = item;
+		this.notifyPropertyChange('selectedItem', item);
+	}
+}

apps/toolbox/src/split-view/split-view-supplement.xml

@@ -0,0 +1,10 @@
+<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="navigatingTo" class="page">
+  <ActionBar title="Supplementary View" class="action-bar">
+  </ActionBar>
+  <!-- Supplementary column (detail) -->
+  <StackLayout class="p-16">
+    <Label text="Supplementary" marginBottom="12" fontSize="22" fontWeight="bold" />
+    <Label text="{{ selectedItem }}" textWrap="true" tap="{{toggle}}" />
+  </StackLayout>
+
+</Page>