Skip to content

Instantly share code, notes, and snippets.

@adamdbradley

adamdbradley/ion-split-view

Last active August 29, 2015 14:05
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save adamdbradley/309692b2f7fafe9d81b7 to your computer and use it in GitHub Desktop.
Save adamdbradley/309692b2f7fafe9d81b7 to your computer and use it in GitHub Desktop.
Download ZIP
Ionic Split View
Raw
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>
@priand
Copy link

priand commented Jul 27, 2015

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment