dropdown-menu-multilevel v0.1.1

About The Project

There are many great dropdown menu available on NPM, however, I didn't find one that really suit my needs so I created this enhanced one.

Here's why:

• You shouldn't spend your time to position the menu when is in the end of the screen. You can also use you own style.
• You can implement several menu levels. (each menu can have a sub menu up to infinity)
• You have the possibility to use it as a context menu ( in this case, the two characteristics mentioned above are also included)

Built With

• VueJs
• Bootstrap
• Material Design Icons
• bp-vuejs-dropdown

Getting Started

This is an example of how you may give instructions on setting up your project locally. To get a local copy up and running follow these simple example steps.

Installation

1. NPM

   npm install dropdown-menu-multilevel

2. YARN

   yarn add dropdown-menu-multilevel

Usage

• Localy

  import bpContextMenu from "dropdown-menu-multilevel";

• Globaly

  import Vue from 'vue';
  import bpContextMenu from "dropdown-menu-multilevel";
  
  Vue.use('bpContextMenu')

<template>
  <div id="app">
    <div class="row w-100 wrapper">
      <div class="col col-sm-8 alert bg-secondary " @contextmenu="contextMenu">Right click to see the contextMenu !</div>
    </div>
    <bpContextMenu
      ref="myContextMenu"
      asContextMenu
      trigger="hover"
      label="Dropdown-right"
      :list="listItems"
      @clickOnItem="clickOnItem($event)"
    >
    </bpContextMenu>
  </div>
</template>

<script>
import bpContextMenu from "dropdown-menu-multilevel";


export default {
  name: "App",
  components: {
    bpContextMenu,
  },
  data() {
    return {
      listItems: [{
          label: "action 1",
          icon: "palette",
          align: "",
          children: [{
              label: "sub-action",
              className:"sub-action",
              children: [{
                icon: "edit",
                label: "sub-sub-action 1 ",
                },
              {
                label: "sub-sub-action 2",
              }]
            }],
          },
          {
           label: "action 2",
           icon: "delete",
           className: 'single',
          },
        ],
    };
  },
  methods: {
    clickOnItem(el) {
      console.log("item app", el);
    },
    contextMenu(e) {
      this.$refs.myContextMenu.$children[0].isHidden = false
      this.$refs.myContextMenu.$children[0].$nextTick(()=> {
       this.$refs.myContextMenu.$children[0].top = e.clientY
      this.$refs.myContextMenu.$children[0].left = e.clientX
     }, this)
      e.preventDefault()
    }
  },
};
</script>

<style lang="scss">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
.wrapper {
  height: 150px
}

</style>

## Props 


| Name          |    Type      |  Default | Description |
|---------------|--------------|----------|-------------|
| label | string |   | Text content to place on the button.
| list | array |   | the list of items in the menu.
| align | string | right | To Position the menu.  value can takes : 'left , right (default), top, bottom'.
| offsetX | number |  0 | The value (in pixels) of the horizontal translation of the menu in relation to the button.
| offsetY | number |  0 | The value (in pixels) of the vertical translation of the menu in relation to the button.
| trigger | string |  click | When the value is 'click' the menu can show only by click on the button. other value is 'hover' in this case the menu is show by hover on button.
| hideChevron | boolean |  false | When the value is set to true the chevron is hidden. 
| className | string |    | The name of the class which allows you to add and / or modify the style of your dropdown
| iconName | string |    | The name of the icon that appears on the left of the label
| asContextMenu | boolean |  false  | When the value is set to true, you can use it  as context-menu instead of dropdown 
---------------------------------------------------------------

* The `list` props is an array of object. each object may have several properties, that most of them were explained just above 'label, offsetX, offsetY ... etc'. the `children` property represent the sub-menu of this item and its role is like the `list` props. each item in the children property may have the item list property. 'label, className, align, offsetX, offsetY, icon, hideChevron and children'. See example below

* Example
```js
list:[
  {
    label: "action a",
    children: [
      {
        label: "sub-action 1",
        className:"sub-action-1",
        align:"left",
        offsetX:10,
        offsetY: 10,
        icon: "edit",
        hideChevron: true,
        children: [
          { label: "sub-sub-action 1 " },
          { label: "sub-sub-action 2" }
        ]
      },
      { label: "sub-action 2" }
    ],
  },
  { label: 'action b' },
  { label: 'action c' },
  { label: 'action d' },
  

]

License

Distributed under the MIT License. See LICENSE for more information.

Contact

Noreddine RADI - @linkedin - noreddine.radi@gmail.com

Project Link: dropdown-menu-multilevel