For a current Ionic project I’m working on I needed a vertical slide out panel (toggle panel) to store in some content that may be hidden by the user. As I couldn’t immediately find such a component in Ionic itself I decided to create one myself:
ion-drawer-vertical (source available on GitHub). The result is a set of directives one can use. The directives also ships with a necessary controller and a delegate to allow one to manipulate the drawer from any scope. Both top and bottom drawers are supported.
Do note that this is an early release of
ion-drawer-vertical. Whilst the basics work, many things are still missing (Enforce the proper elements being present, autoclose when scrolling in a list, etc. to name a few).
Installation is possible via
bower install ion-drawer-vertical
Refer to the
ionic.contrib.drawer.vertical.cssfiles from within your HTML file:
<link href="src/ionic.contrib.drawer.vertical.css" rel="stylesheet"> <script src="src/ionic.contrib.drawer.vertical.js"></script>
ionic.contrib.drawer.verticalas a dependency into your Angular app:
angular.module('app', [ 'ionic', 'ionic.contrib.drawer.vertical' ])
<ion-drawer-vertical-wrapper>element to your document. Inside it, put a
<ion-drawer-vertical-content>and an optional
direction (possible values:
down [default] and
state (possible values:
opened [default] and
closed) attributes of the
<ion-drawer-vertical-wrapper> element if needed.
If any headers and/or footers are present, also set the proper
has-* classes (such as
has-footer) on the
[UPDATE: Added in ~1.4.0 (released after this blogpost)] When having a scrollable element (viz.
ion-content[scroll="true"]) it’s possible to make the drawer automagically close when scrolling the content in the direction of the drawer itself. Enable it by setting
autoclose-on-scroll on the
Note: the autoclose feature required some monkey patching of Ionic’s scrollView behavior, awaiting this pull request to be merged. Above that this feature has not been tested (and won’t work) with Ionic’s scrollViewNative)
Events and Functions
ion-drawer-vertical automatically binds
drag events to the
<ion-drawer-vertical-handle> element if it’s present. Dragging said element up/down will make the drawer follow its moves. Upon releasing the handle, the drawer will either revert to its original state, or to the opposite one (e.g. open will become closed) when having dragged far enough (over 33% of the height of the panel).
ion-drawer-vertical also ships with a delegate
$ionDrawerVerticalDelegate. The methods
getState() are exposed via this delegate.
When cleverly combining
ngIf one can achieve this:
Note that when calling methods on the delegate it will control all
ion-drawer-vertical instances. To target one single / a specific instance use the
$getByHandle method along with the
I don’t run ads on my blog nor do I do this for profit. A donation however would always put a smile on my face though. Thanks!