ion-drawer-vertical – A vertical slide out panel (toggle panel) for Ionic

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

Installation is possible via bower:

bower install ion-drawer-vertical

Usage

Check out this Pen!

  1. Refer to the ionic.contrib.drawer.vertical.js and ionic.contrib.drawer.vertical.css files from within your HTML file:

    <link href="src/ionic.contrib.drawer.vertical.css" rel="stylesheet">
    	<script src="src/ionic.contrib.drawer.vertical.js"></script>
    
  2. Inject ionic.contrib.drawer.vertical as a dependency into your Angular app:

    angular.module('app', [
            'ionic',
            'ionic.contrib.drawer.vertical'
        ])
    
  3. Add a <ion-drawer-vertical-wrapper> element to your document. Inside it, put a <ion-drawer-vertical-content> and an optional <ion-drawer-vertical-handle> element.

Configuration

Adjust the direction (possible values: down [default] and up) and state (possible values: opened [default] and closed) attributes of the <ion-drawer-vertical-wrapper> element if needed.

Check out this Pen!

If any headers and/or footers are present, also set the proper has-* classes (such as has-header or has-footer) on the <ion-drawer-vertical-wrapper> element.

Check out this Pen!

[UPDATE: Added in ~1.4.0 (released after this blogpost)] When having a scrollable element (viz. ion-scroll or 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 <ion-drawer-vertical-wrapper> element.

Check out this Pen!

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 openDrawer(), closeDrawer(), toggleDrawer(), and getState() are exposed via this delegate.

Check out this Pen!

When cleverly combining getState() with ngIf one can achieve this:

Check out this Pen!

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 delegate-handle attribute:

Check out this Pen!

ion-drawer-vertical – A vertical drawer / slide-out panel for Ionic →

Did this help you out? Like what you see?
Consider donating.

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!

☕️ Buy me a Coffee ($3)

Published by Bramus!

Bramus is a frontend web developer from Belgium, working as a Chrome Developer Relations Engineer at Google. From the moment he discovered view-source at the age of 14 (way back in 1997), he fell in love with the web and has been tinkering with it ever since (more …)

Unless noted otherwise, the contents of this post are licensed under the Creative Commons Attribution 4.0 License and code samples are licensed under the MIT License

Join the Conversation

7 Comments

  1. Absolutely fantastic job with this! I’m implementing it right now for an app, but I have a slight modification I’d like to do to it. I’m just not sure what would be the best approach. Perhaps you could help.

    I have a drawer implemented, coming from bottom to up. I would like to make it so that the wrapper is not completely hidden to the bottom, but showing partly. Alright, I actually manage to do this by altering the CSS:

    ion-drawer-vertical-wrapper.up.closed { bottom: 25%; }

    This seems to work, but now the animations and screen boundaries break when dragging / toggling. I guess the calculations can’t take this addition of style, since the animations jump and you can actually drag past bottom and top of the screen.

    Any ideas how to fix this?

    1. This was recently added after having merged a pull-request, but has not been released as a tagged version yet.
      You can try this version out by installing ion-drawer-vertical using bower install ion-drawer-vertical#master (note the addition of #master)

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.