feat(runtime): initial tabs implementation

rigor789 · May 17, 2020 · 073a507 · 073a507
1 parent f309a4e
commit 073a507
Show file tree

Hide file tree

Showing 3 changed files with 69 additions and 0 deletions.
diff --git a/apps/demo/app/Tabs.js b/apps/demo/app/Tabs.js
@@ -0,0 +1,39 @@
+import PageComp from '~/PageComp'
+import { ref } from 'nativescript-vue'
+export default {
+  template: `<Tabs selectedIndex="1">
+  <TabStrip>
+    <TabStripItem>
+      <Label text="Home"></Label>
+    </TabStripItem>
+    <TabStripItem>
+      <Label text="Account"></Label>
+    </TabStripItem>
+    <TabStripItem>
+      <Label text="Search"></Label>
+    </TabStripItem>
+  </TabStrip>
+  <TabContentItem>
+    <GridLayout>
+      <Label text="Home Page"></Label>
+    </GridLayout>
+  </TabContentItem>
+  <TabContentItem>
+    <GridLayout>
+      <Label text="Account Page"></Label>
+    </GridLayout>
+  </TabContentItem>
+  <TabContentItem>
+    <GridLayout>
+      <Label text="Search Page"></Label>
+    </GridLayout>
+  </TabContentItem>
+</Tabs>`,
+  data() {
+    return {}
+  },
+  watch: {
+    model(value) {},
+  },
+  mounted() {},
+}
diff --git a/apps/demo/app/app.js b/apps/demo/app/app.js
@@ -14,6 +14,7 @@ import {
 } from 'nativescript-vue'
 
 import Comp from './Comp'
+import Tabs from './Tabs'
 import ListViewComp from './ListViewComp'
 
 // todo: figure out why isOn is undefined in Vue - causes a crash...
@@ -71,6 +72,7 @@ function useInterval(cb, ms) {
 
 const app = createApp({
   render() {
+    return h('frame', h('page', h(Tabs)))
     return h('frame', h('page', h(Comp)))
     return h({
       template: `<Label verticalAlignment="middle" textAlignment="center"><FormattedString>

diff --git a/packages/runtime/src/registry.ts b/packages/runtime/src/registry.ts
@@ -310,6 +310,34 @@ if (!__TEST__) {
       }
     }
   )
+  registerElement(
+    'Tabs',
+    () => require('@nativescript/core').Tabs,
+    {
+      model: {
+        prop: 'selectedIndex',
+        event: 'selectedIndexChange'
+      }
+    }
+  )
+  registerElement(
+    'TabStrip',
+    () => require('@nativescript/core').TabStrip,
+    {
+    }
+  )
+  registerElement(
+    'TabStripItem',
+    () => require('@nativescript/core').TabStripItem,
+    {
+    }
+  )
+  registerElement(
+    'TabContentItem',
+    () => require('@nativescript/core').TabContentItem,
+    {
+    }
+  )
   registerElement(
     'TextField',
     () => require('@nativescript/core').TextField,