package name

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "avalon-practice",
+  "name": "avalon-demo",
   "version": "1.0.0",
   "description": "",
   "main": "webpack.config.js",
@@ -13,7 +13,6 @@
     "babel-loader": "^7.0.0",
     "babel-preset-es2015": "^6.24.1",
     "css-loader": "^0.27.3",
-    "html-minify-loader": "^1.1.0",
     "html-webpack-plugin": "^2.28.0",
     "html-withimg-loader": "^0.1.16",
     "raw-loader": "^0.5.1",

src/components/Main/index.html

@@ -3,7 +3,7 @@
         <ms-topbar />
     </header>
     <article class="content">
-        <ms-tab />
+        <ms-tabbar />
     </article>
     <footer class="footer">
         <ms-statusbar />

src/components/Menu/index.html

@@ -1,3 +1,5 @@
 <ul class="menu">
-    <li class="menu__item" ms-for="el in menus">{{el.title}}</li>
+    <li class="menu__item" ms-for="el in menus">
+    	<ms-navlink ms-widget="{to:el.path,title:el.title}" />
+    </li>
 </ul>

src/components/Menu/index.js

@@ -4,16 +4,9 @@ import './index.css';
 component('ms-menu', {
     template: require('./index.html'),
     defaults: {
-        menus: [{ id: 1, title: '菜单1', pid: 0 },
-            { id: 2, title: '菜单2', pid: 0 },
-            { id: 3, title: '菜单3', pid: 0 },
-            { id: 4, title: '菜单4', pid: 0 },
-            { id: 5, title: '菜单5', pid: 0 },
-            { id: 6, title: '菜单6', pid: 0 },
-            { id: 7, title: '菜单7', pid: 0 },
-            { id: 8, title: '菜单8', pid: 0 },
-            { id: 9, title: '菜单9', pid: 0 },
-            { id: 10, title: '菜单10', pid: 0 }
+        menus: [
+            { id: 1, title: 'page1', path: '/page1', pid: 0 },
+            { id: 2, title: 'page2', path: '/page2', pid: 0 }
         ]
     }
 })

src/components/NavLink/index.html

@@ -0,0 +1 @@
+<a ms-attr="{href:@to}" ms-text="@title" ></a>

src/components/NavLink/index.js

@@ -0,0 +1,10 @@
+import avalon, { component } from 'avalon2';
+import './index.css';
+
+component('ms-navlink', {
+    template: require('./index.html'),
+    defaults: {
+        title: '',
+        to: ''
+    }
+})

src/components/Tab/index.html

@@ -1,26 +1,11 @@
 <ul class="tab clearfix">
-    <li class="tab-item">
-        <input id="tab_check_0" type="radio" class="tab-check" name="tab_check" checked>
-        <label for="tab_check_0" class="tab-title">Home</label>
-        <span class="tab-line"></span>
-        <div class="tab-page">
-            <ms-homepage />
-        </div>
-    </li>
-    <li class="tab-item">
-        <input id="tab_check_1" type="radio" class="tab-check" name="tab_check">
-        <label for="tab_check_1" class="tab-title">page1</label>
-        <span class="tab-line"></span>
-        <div class="tab-page">
-            <ms-page1 />
-        </div>
-    </li>
-    <li class="tab-item">
-        <input id="tab_check_2" type="radio" class="tab-check" name="tab_check">
-        <label for="tab_check_2" class="tab-title">page2</label>
-        <span class="tab-line"></span>
-        <div class="tab-page">
-            <ms-page1 />
-        </div>
-    </li>
+    <ms-tabpage>
+        <ms-page1 slot="page" />
+    </ms-tabpage>
+    <ms-tabpage>
+        <ms-page2 slot="page" />
+    </ms-tabpage>
+    <ms-tabpage>
+        <ms-page2 slot="page" />
+    </ms-tabpage>
 </ul>

src/components/TabBar/index.css

@@ -0,0 +1,15 @@
+.tabbar {}
+
+.tabbar .left {
+    float: left;
+    width: 2rem;
+}
+
+.tabbar .right {
+    float: right;
+    width: 2rem;
+}
+
+.tabbar .mid {
+    overflow: hidden;
+}

src/components/TabBar/index.html

@@ -1,3 +1,5 @@
 <ul class="tabbar">
-	<li><span class=""></span></li>
+	<li><span class="left"></span></li>
+	<li class="mid"><ms-tab /></li>
+	<li><span class="right"></span></li>
 </ul>

src/components/TabPage/index.html

@@ -0,0 +1,8 @@
+<li class="tab-item">
+    <input id="tab_check_0" type="radio" class="tab-check" name="tab_check" checked>
+    <label for="tab_check_0" class="tab-title">Home</label>
+    <span class="tab-line"></span>
+    <div class="tab-page">
+        <slot name="page" />
+    </div>
+</li>

src/components/TabPage/index.js

@@ -0,0 +1,8 @@
+import avalon, { component } from 'avalon2';
+import './index.css';
+
+component('ms-tabpage', {
+    template: require('./index.html'),
+    defaults: {
+    }
+})

src/components/index.js

@@ -5,4 +5,6 @@ import './Main';
 import './App';
 import './Topbar';
 import './StatusBar';
+import './TabBar';
 import './Tab';
+import './TabPage';