How to create Apple like slideup panels in VueJS

It’s no secret that Apple design and UI/UX is very good and beautiful, so you don’t have to reinvent the wheel if you want to use some of the iOS features, i.e. slide up panels.

As I was working on my app, which is just a plain web app but responsive for mobile, I constantly had this idea of pulling up the ‘modal’ or some kind of popup when users have to select something, like selecting the user, tennis court (in my case) or something else. So I had a little bit more options and I didn’t want to have all in one ‘view’. The first idea was a slide menu from left, like what all mobile apps are using for the pulling up menu. It worked pretty well, but I still felt that this wasn’t what I wanted, so I searched for something more appealing. As I’m working with VueJS, I oftentimes visit http://vuejsexamples.com which is a great source of new plugins for Vue, and I stumbled upon ‘A Vue 3 Wrapper for Cupertino Library’ — exactly what I needed but it’s only for Vue 3 and I needed this plugin for Vue2. So I’ve done a little bit of research and saw that cupertino-pane has great api which suits perfectly for me. I struggled a little bit to make it work, but in the end, it’s pretty simple, so I wanted to share this with you.

This is kinda starting point and you can basically copy and paste this code to get your pane in working mode.

I hope this helped you a little bit. If you read docs, you will find that there is a lot’s of options so make your hands dirty.

<template>
   <div class="panel">
     <h1>Header</h1>
     <p hide-on-bottom>Content</p>
   </div>
</template>
<script>
import { CupertinoPane } from 'cupertino-pane';
export default {
   data() {
      return {
        settings: {},
        drawer: {},
      };
    },
    mounted() {
        this.drawer = new CupertinoPane('.panel', this.settings);
        setTimeout(() => this.drawer.present({animate: true}));
    },
    methods: {
        presentDrawer() {
            this.drawer.present({animate: true});
        },
        destroyDrawer() {
            this.drawer.destroy({animate: true});
        },
        hideDrawer() {
            this.drawer.hide();
        },
        isHiddenDrawer() {
            console.log(this.drawer.isHidden());
        }
    },
};
</script>
<style>
</style>