matinwd / vue-stripe-menu

Creating a navigation menu with animations like on Stripe

Home Page:https://alexeykhr.github.io/vue-stripe-menu/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Vue Stripe Menu

Build Status Coverage Status Version Total alerts Downloads License

Vue Stripe Menu

Create a dropdown like on Stripe

Demo Project

How to install

Install the library in your project

$ npm i vue-stripe-menu
// or
$ yarn add vue-stripe-menu

Then add components to Vue and compiled css styles.

// .js file

import Vue from 'Vue'
import VueStripeMenu from 'vue-stripe-menu'

Vue.use(VueStripeMenu)

// Import build styles
import 'vue-stripe-menu/dist/vue-stripe-menu.css'

Or you can change them at compile time (scss). See all available variables:

List of variables

// .scss file

// You can resize for "@media only screen":
$vsm-media: 500px;

// Colors:
$vsm-color: #000;
$vsm-color-hover: rgba(0, 0, 0, .9);

// And also you can see the animation in slow motion:
$vsm-transition: 1s;

@import "~vue-stripe-menu/src/scss/index";

Basic Demo

<template>
  <vsm-menu
    :menu="menu"
    :base-width="380"
    :base-height="400"
    :screen-offset="10"
    element="header"
    @open-dropdown="onOpenDropdown"
    @close-dropdown="onCloseDropdown"
  >
    <template #default="data">
      <!--Dropdown Content-->
      <div>{{ data }}</div>
    </template>
    <template #before-nav>
      <!--Image or svg of website logo-->
      <li class="vsm-section">
        <img
          src="/path/to/file"
          title="My Logo"
        >
      </li>
    </template>
    <template #title="data">
      <!--Display menu items through slots-->
      {{ data.item.title }}
    </template>
    <template #after-nav>
      <!--Mobile Burger, buttons, etc-->
      <!--For the same styles - add the vsm-section-->
      <li class="vsm-section vsm-mob-hide">
        <button>My Button</button>
      </li>
      <!--Display when user media screen below from $vsm-media (scss)-->
      <vsm-mob>Mobile Content</vsm-mob>
    </template>
  </vsm-menu>
</template>

<script>
/* eslint-disable */
/*
 * This is an example of possible settings, you can also control
 * scss variables, and also you need to add a little style.
 * So copy and delete what you don’t need.
 *
 * After #after-nav and #before-nav it is recommended to use
 * to maintain the correct HTML structure:
 *   <li class="vsm-section">
 */

export default {
  data() {
    return {
      menu: [
        {
          // display menu item (or override title slot)
          title: 'News',
          // now this is not a link, but a menu item where there is a dropdown
          dropdown: 'news',
          // don't want a button element?
          element: 'span',
          // menu item can accept all attributes
          attributes: {
            // I want more classes! No problem
            // string, array, object, not matter
            class: ['my-class1', { 'my-class2': true }],
            // Custom attributes
            'data-big': 'yes'
          },
          // add some events?
          listeners: {
            // all possible native events
            mouseover: (evt) => {
              console.log('news hover', evt)
            }
          },
          // just extra properties in the object
          new_section: false,
        },
        {
          title: 'External Link',
          attributes: {
            href: 'https://github.com/Alexeykhr/vue-stripe-menu',
            target: '_blank'
          }
        }
        // ...
      ]
    }
  },
  methods: {
    onOpenDropdown() {
      console.log('onOpenDropdown')
    },
    onCloseDropdown() {
      console.log('onCloseDropdown')
    }
  }
}
</script>

Codepen Demo

Vue Stripe Menu - Real Demo

Advanced Demo

Code for creating a menu as on a demo: Link

API

[Menu] Props

Property Parameters Description Type Default Required
menu MenuObject Description of the menu items, see below Array true
element HTML element for root element String header false
base-width The relationship between the width of the content and this value string, number header false
base-height The relationship between the height of the content and this value string, number header false
screen-offset Offset from the window screen string, number header false

[Menu] Events

Name Description Return
open-dropdown Open the dropdown menu, return the active DOM Element Element
close-dropdown Close the dropdown menu, return the active DOM Element Element

[Menu] Slots

Name Parameters Description
default MenuItem, index The main content for the dropdown list
before-nav before-nav Content to the left of the list
after-nav after-nav Content to the right of the list
title MenuItem, index Replace the output of menu[i].title with your own

[Menu] Methods

this.$refs[myVsmRef].closeDropdown()

Name Parameters Description Return
toggleDropdown HTMLElement Open dropdown menu, if open - close
openDropdown HTMLElement Open dropdown menu for selected item
closeDropdown Close any open dropdown menu

[Menu] Properties

const elements = this.$refs[myVsmRef].hasDropdownEls

Name Description Return
hasDropdownEls List of HTML elements that have dropdown content Array<HTMLElement>
$refs.links List of HTML elements obtained from menu props Array<HTMLElement>

[Menu] MenuObject (menu props)

Property Type Description
title String Menu item name. Can also be redefined through the slot
dropdown String Unique value indicates that this item has a dropdown menu
element String HTML element in the header element, if not specified, it will be or
attributes Object All attributes to be assigned in the header element (v-bind)
listeners Object All events to be assigned in the header element (v-on)

[Mob] Props

Property Parameters Description Type Default Required
v-model The state of the open/close the menu Boolean false false

[Mob] Slots

Name Parameters Description
default The main content for the dropdown list
hamburger Replace button to open dropdown

Classes

Name Description
vsm-mob-hide Hide HTML elements in mobile design
vsm-mob-full Add flex-grow: 1, see Demo example

Contributing

Launch of a demo project (development of lib)

$ npm run dev

Build a demo project

$ npm run build

Build library

$ npm run build:lib

Run tests

$ npm run test

Check code on Eslint

$ npm run lint

Changelog

Detailed changes for each release are documented in the CHANGELOG.md.

License

MIT

About

Creating a navigation menu with animations like on Stripe

https://alexeykhr.github.io/vue-stripe-menu/

License:MIT License


Languages

Language:JavaScript 40.7%Language:Vue 34.4%Language:CSS 23.8%Language:HTML 1.1%