Ionic Split View

ion-split-view

<!-- Split View with only a left side menu on small viewports -->
<ion-split-view>
  
  <ion-view content>
    <ion-nav-buttons>
      <button class="button" ng-click="$asideToggle()" aside-toggle>
        Open Menu
      </button>
    </ion-nav-buttons>
    <ion-nav-view></ion-nav-view>
  </ion-view> 
  
  <ion-view aside>
    <ion-header-bar>
      <h1 class="title">Left Menu</h1>
    </ion-header-bar>
    <ion-content>
      ...
    </ion-content>
  </ion-view>
  
</ion-split-view>


<!-- Split View with left and right side menus on small viewports -->
<ion-split-view>
  
  <ion-view content>
    <ion-nav-buttons>
      <button class="button" ng-click="$asideToggle('left')" aside-toggle>
        Left Menu
      </button>
      <button class="button" ng-click="$asideToggle('right')" aside-toggle>
        Right Menu
      </button>
    </ion-nav-buttons>
    <ion-nav-view></ion-nav-view>
  </ion-view> 
  
  <ion-view aside="left">
    <ion-header-bar>
      <h1 class="title">Left Menu</h1>
    </ion-header-bar>
    <ion-content>
      ...
    </ion-content>
  </ion-view>
  
  <ion-view aside="right">
    <ion-header-bar>
      <h1 class="title">Right Menu</h1>
    </ion-header-bar>
    <ion-content>
      ...
    </ion-content>
  </ion-view>
  
</ion-split-view>


<!-- Split View with a popover on small viewports -->
<ion-split-view>
  
  <ion-view content>
    <ion-nav-buttons>
      <button class="button" ng-click="$asideToggle()" aside-toggle>
        Open Menu
      </button>
    </ion-nav-buttons>
    <ion-nav-view></ion-nav-view>
  </ion-view> 
  
  <ion-view aside="popover">
    <ion-header-bar>
      <h1 class="title">Left Menu</h1>
    </ion-header-bar>
    <ion-content>
      ...
    </ion-content>
  </ion-view>
  
</ion-split-view>


<!-- Split View with a popover on small viewports and two split-view contents -->
<ion-split-view>
  
  <ion-view content>
    <ion-nav-buttons>
      <button class="button" ng-click="$asideToggle()" aside-toggle>
        Open Menu
      </button>
    </ion-nav-buttons>
    <ion-nav-view></ion-nav-view>
  </ion-view> 
  
  <ion-view content>
    <ion-nav-view></ion-nav-view>
  </ion-view> 
  
  <ion-view aside="popover">
    <ion-header-bar>
      <h1 class="title">Left Menu</h1>
    </ion-header-bar>
    <ion-content>
      ...
    </ion-content>
  </ion-view>
  
</ion-split-view>

Hello Adam, is this a markup POC or is there a library implementing ?