tab

src/components/Main/index.html

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

src/components/NavLink/index.css

@@ -0,0 +1,3 @@
+.link {
+    color: #ddd;
+}

src/components/NavLink/index.html

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

src/components/SideBar/index.css

@@ -2,11 +2,11 @@
     float: left;
     width: 200px;
     height: 100%;
-    background: #234567;
+    background: #203445;
 }
 
 .sidebar__title {
     padding: .5rem;
-    background: #123456;
+    background: #022334;
     color: #eee;
 }

src/components/Tab/index.css

@@ -1,53 +1,47 @@
 .tab {
     width: 100%;
     height: 100%;
-    position: relative;
     list-style: none;
+    position: relative;
 }
 
-.tab-item {
-    float: left;
-    height: 3rem;
-    line-height: 3rem;
-    border-right: solid .1rem #e7e7e7;
-}
-
-.tab-check {
-    position: absolute;
-    left: -9999px;
+.tab ul,
+.tab li {
+    list-style: none;
+    padding: 0;
+    margin: 0;
 }
 
-.tab-page {
+.tab__header {
     position: absolute;
     left: 0;
     right: 0;
-    top: 3.15rem;
-    bottom: 0;
-    display: none;
-    z-index: 101;
-    overflow: auto;
+    top: 0;
+    height: 3.15rem;
+    line-height: 3rem;
+    border-bottom: solid .2rem #203040;
 }
 
-.tab-title {
-    display: block;
-    height: 100%;
-    padding: 0 .8rem;
+.tab__header .left {
+    float: left;
+    border-right: solid 2px #ccc;
 }
 
-.tab-line {
-    position: absolute;
-    left: 0;
-    right: 0;
-    top: 3rem;
-    border-top: solid .15rem #405060;
-    z-index: 100;
+.tab__header .mid {
+    overflow: hidden;
 }
 
-.tab-check:checked ~ .tab-title {
-    background: #405060;
-    color: #fff;
+.tab__header .right {
+    float: right;
+    border-left: solid 2px #ccc;
 }
 
-.tab-check:checked ~ .tab-page {
-    display: block;
+.tab__content {
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 3.2rem;
+    bottom: 0;
+    z-index: 101;
+    overflow: auto;
 }

src/components/Tab/index.html

@@ -1,11 +1,14 @@
-<ul class="tab clearfix">
-    <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>
+<div class="tab">
+    <ul class="tab__header">
+        <li class="left">111</li>
+        <li class="right">222</li>
+        <li class="mid">
+            <ul class="clearfix">
+                <ms-tabtitle ms-for="(i,p) in pages" ms-widget="{el:p,click:onTabTitleClick}" />
+            </ul>
+        </li>
+    </ul>
+    <ul class="tab__content">
+        <ms-tabpage ms-for="p in pages" ms-widget="{tmpl:p.tmpl,checked:p.checked}">
+    </ul>
+</div>

src/components/Tab/index.js

@@ -4,5 +4,14 @@ import './index.css';
 component('ms-tab', {
     template: require('./index.html'),
     defaults: {
+        name: 'pagetab',
+        pages: [
+            { title: 'home', tmpl: '<ms-homepage slot="page" />', checked: true },
+            { title: 'page1', tmpl: '<ms-page1 slot="page" />', checked: false },
+            { title: 'page2', tmpl: '<ms-page2 slot="page" />', checked: false }
+        ],
+        onTabTitleClick(checked) {
+            this.pages.forEach(el => el.checked = false);            
+        }
     }
 })

src/components/TabPage/index.css

@@ -0,0 +1,8 @@
+.tab__page {
+    display: none;
+    height: 100%;
+}
+
+.tab__page.checked {
+    display: block;
+}

src/components/TabPage/index.html

@@ -1,8 +1,2 @@
-<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 ms-class="['tab__page',checked&&'checked']" ms-html="tmpl">
 </li>

src/components/TabPage/index.js

@@ -4,5 +4,7 @@ import './index.css';
 component('ms-tabpage', {
     template: require('./index.html'),
     defaults: {
+        tmpl: '',
+        checked: false
     }
 })

src/components/TabTitle/index.css

@@ -0,0 +1,22 @@
+.tab .tab__title {
+    float: left;
+    display: block;
+    border-right: solid 1px #ddd;
+}
+
+.tab__title__label {
+    display: block;
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    padding: 0 .8rem;
+}
+
+.tab a {
+    text-decoration: none;
+}
+
+.tab__title__label.checked {
+    background: #405060;
+    color: #fff;
+}

src/components/TabTitle/index.html

@@ -0,0 +1,3 @@
+<li class="tab__title">
+    <a ms-class="['tab__title__label',el.checked&&'checked']" ms-text="el.title" ms-click="onClick"></a>
+</li>

src/components/TabTitle/index.js

@@ -0,0 +1,16 @@
+import avalon, { component } from 'avalon2';
+import './index.css';
+
+component('ms-tabtitle', {
+    template: require('./index.html'),
+    defaults: {
+        el: {},
+        click() {
+
+        },
+        onClick() {
+        	this.click();
+            this.el.checked = true;
+        }
+    }
+})