Update example

components/header/header.html

@@ -0,0 +1,3 @@
+<div class="site-logo">
+    <img src="{{logo}}"/>
+</div>

components/header/header.interface.ts

@@ -0,0 +1,3 @@
+export default interface headerInterface {
+    logo : string;
+}

components/header/header.scss

@@ -0,0 +1,8 @@
+.site-logo {
+    height: 250px;
+    width: 320px;
+    margin: auto;
+    img {
+        max-width: 100%;
+    }
+}

components/header/header.ts

@@ -0,0 +1,9 @@
+import VnNative3HTMLElement from "vnnative3-webview/dist/HTMLElement/HTMLElement";
+import headerInterface from "./header.interface";
+import './header.scss';
+export default function header () : string {
+    const state : headerInterface = {
+        logo : require('../../assets/images/logo.png').default
+    };
+    return (new VnNative3HTMLElement).make(require('./header.html').default,state);
+}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vn-native-3",
-  "version": "1.3.2",
+  "version": "1.3.3",
   "description": "Vn Native Framework",
   "main": "./bin/electron/production.js",
   "scripts": {

pages/ExamplePage/ExamplePage.State.Interface.ts

@@ -1,6 +1,6 @@
 export default interface ExamplePageStateInterface {
     title : string;
     slogan: string;
-    logo : string;
+    header : string;
     homePage: string 
 }

pages/ExamplePage/ExamplePage.html

@@ -1,14 +1,14 @@
 <div class="info-box">
-    <div class="site-logo">
-        <img src="{{logo}}"/>
-    </div>
+    {{{header}}}
     <div class="box-container">
         <h1>{{title}}</h1>
         <p>{{slogan}}</p>
         <hr/>
         <h4>Page feature</h4>
         <p>To create new page you can consider <code>IndexPage</code> at <code>./pages</code> directory.</p>
         <a href="{{homePage}}">Home Page</a>
+        <h4>API</h4>
+        <p>You can easy use fetchjs to subscribe api.</p>
         <h4>Documents</h4>
         <p>Please see more document at GITHUB : <code>https://github.com/steveleetn91/vn-native-3</code></p>
         <h4>Licence</h4>

pages/ExamplePage/ExamplePage.scss

@@ -5,14 +5,6 @@ body {
 h1 {
     color: red;
 }
-.site-logo {
-    height: 250px;
-    width: 320px;
-    margin: auto;
-}
-.site-logo img {
-    max-width: 100%;
-}
 .box-container {
     width: 80%;
     margin: auto;

pages/ExamplePage/ExamplePage.ts

@@ -3,19 +3,20 @@ import VnNative3HTMLElement from 'vnnative3-webview/dist/HTMLElement/index';
 import './ExamplePage.scss';
 import ExamplePageStateInterface from './ExamplePage.State.Interface';
 import VnNative3Location from 'vnnative3-location/dist/index';
+import header from '../../components/header/header';
 export default class ExamplePage implements HTMLPageInterFace {
     state : ExamplePageStateInterface = {
         title : "Example page ",
         slogan : "Document",
-        logo : require('../../assets/images/logo.png').default,
+        header : header(),
         homePage : (new VnNative3Location).redirect.goUrl('/index.html',[]) 
     }; 
     constructor() {} 
     public beforeRender() : void {}  
     public afterRender() : void {}    
     public render() : string {
         return (new VnNative3HTMLElement).head(this.state).next(() => {
-            console.log("Hello I'm next action ! You can use a lots actions");
+            console.log("Hello I'm next action ! You can use a lots of actions");
         }).make(require('./ExamplePage.html').default,this.state); 
     }  
 }             

pages/IndexPage/IndexPage.State.Interface.ts

@@ -1,7 +1,6 @@
-import VnNative3Location from 'vnnative3-location/dist/index';
 export default interface IndexPageStateInterface {
     title : string;
     slogan: string;
-    logo : string;
-    examplePageUrl : string 
+    examplePageUrl : string,
+    header : string 
 }

pages/IndexPage/IndexPage.html

@@ -1,14 +1,14 @@
 <div class="info-box">
-    <div class="site-logo">
-        <img src="{{logo}}"/>
-    </div>
+    {{{header}}}
     <div class="box-container">
         <h1>{{title}}</h1>
         <p>{{slogan}}</p>
         <hr/>
         <h4>Page feature</h4>
         <p>To create new page you can consider <code>IndexPage</code> at <code>./pages</code> directory.</p>
         <a href="{{examplePageUrl}}">Example page</a>
+        <h4>API</h4>
+        <p>You can easy use fetchjs to subscribe api.</p>
         <h4>Documents</h4>
         <p>Please see more document at GITHUB : <code>https://github.com/steveleetn91/vn-native-3</code></p>
         <h4>Licence</h4>

pages/IndexPage/IndexPage.scss

@@ -5,14 +5,6 @@ body {
 h1 {
     color: red;
 }
-.site-logo {
-    height: 250px;
-    width: 320px;
-    margin: auto;
-}
-.site-logo img {
-    max-width: 100%;
-}
 .box-container {
     width: 80%;
     margin: auto;

pages/IndexPage/IndexPage.ts

@@ -3,19 +3,20 @@ import VnNative3HTMLElement from 'vnnative3-webview/dist/HTMLElement/index';
 import './IndexPage.scss';
 import IndexPageStateInterface from './IndexPage.State.Interface';
 import VnNative3Location from 'vnnative3-location/dist/index';
+import header from '../../components/header/header';
 export default class IndexPage implements HTMLPageInterFace {
     state : IndexPageStateInterface = {
         title : "Vn Native Framework 3 ",
-        slogan : "Cross platforms - Version 1.3",
-        logo : require('../../assets/images/logo.png').default,
+        slogan : "Cross platforms - Version 1.3.3",
+        header : header(),
         examplePageUrl : (new VnNative3Location).redirect.goUrl('/page/example',[])
     }; 
     constructor() {} 
     public beforeRender() : void {}  
     public afterRender() : void {}    
     public render() : string {
         return (new VnNative3HTMLElement).head(this.state).next(() => {
-            console.log("Hello I'm next action ! You can use a lots actions");
+            console.log("Hello I'm next action ! You can use a lots of actions");
         }).make(require('./IndexPage.html').default,this.state); 
     }  
 }