tabs

src/components/toolbar/test/lopsided-buttons/main.html

@@ -11,4 +11,36 @@
     <button class="button">s1</button>
   </ion-nav-items>
 
+  <ion-content class="padding">
+    <p>
+      A long time ago, in a galaxy far,
+      far away....
+    </p>
+    <p>
+      It is a period of civil war.
+      Rebel spaceships, striking
+      from a hidden base, have won
+      their first victory against
+      the evil Galactic Empire.
+    </p>
+    <p>
+      During the battle, rebel
+      spies managed to steal secret
+      plans to the Empire's
+      ultimate weapon, the DEATH
+      STAR, an armored space
+      station with enough power to
+      destroy an entire planet.
+    </p>
+    <p>
+      Pursued by the Empire's
+      sinister agents, Princess
+      Leia races home aboard her
+      starship, custodian of the
+      stolen plans that can save
+      her people and restore
+      freedom to the galaxy....
+    </p>
+  </ion-content>
+
 </ion-view>

src/components/toolbar/toolbar.js

@@ -29,12 +29,13 @@ export let ToolbarConfig = new ComponentConfig('toolbar')
       <div class="toolbar-item toolbar-secondary-item">
         <content select="ion-nav-items[side=secondary]"></content>
       </div>
-    </div>`,
+    </div>
+    <div class="shared-toolbar"></div>`,
   directives: [BackButton]
 })
 export class Toolbar {
   constructor(
-    @NgElement() ngEle:NgElement, 
+    @NgElement() ngEle:NgElement,
     configFactory: ToolbarConfig
   ) {
     this.domElement = ngEle.domElement

src/components/toolbar/toolbar.scss

@@ -71,3 +71,12 @@ $toolbar-background:              #f7f7f8 !default;
 .toolbar-secondary-item {
   @include flex-order(4);
 }
+
+
+
+.shared-toolbar {
+  display: none;
+  width: 100%;
+  height: 44px;
+  background: red;
+}