v-menu-multi-level v0.1.8

v-menu-multi-level

Table of Contents

• Introduction
• Live Demo
• Installation
• Basic Usage
• Component Reference
• Browser Compatibility
• License
• Credits

v-menu-multi-level is a customlizable UI Component for VueJS that creates a multi-level menu from a JSON data on a defined structure. The assigned props allows customize this menu using CSS3 properties and change its behavior.

Features:

• Auto change sub-menu open-direction property when the document body overflows.
• Set a sorting function for nodes in same level.
• Open sub-menus in down or right directions.
• Set icons and its style before or after nodes.
• Keep a sub-menu opened when click outside from them.
• Set icons when a sub-menu is opened or closed.
• Apply CSS3 for hover, active or striped on items.
• Set a root node visibilty dynamically.
• Close all opened sub-menus when click outside from them.
• Set menu alignment for root items.
• Add prepend and/or append slots for menu.
• Set a function to be executed when an item is clicked.

Definitions:

• Node: A JavaScript Object containing a string for a label and an array of zero or more children nodes.
• Root: First level of the component node's property.
• Leaf: A node which doesn't have children nodes.
• Item: A rendered node on HTML.
• Menu: A rendered collection of all root nodes on HTML.
• Sub-menu: A rendered collection of one children's node on HTML.

Notes

The generated menu uses the CSS3 property display: flex and its related properties for desktop platforms where the dimension of the menu depends of nodes' label, specially on root items. Any CSS3 property can be passed to container menu directly from component.

The auto open-direction of an item checks if the body's dimension has changed after rendered, so the open-direction property when is set to right is changed to down when it occurs.

yarn add v-menu-multi-level --save 

or

npm install v-menu-multi-level --save

<!-- Vue component -->
<template>
    <v-menu-multi-level :nodes="nodes"></v-menu-multi-level>
</template>

<script>
import VMenuMultiLevel from 'v-menu-multi-level'
import 'v-menu-multi-level/dist/v-menu-multi-level.css'

export default {
  components: {
    VMenuMultiLevel
  },
  data() {
    return {
      nodes: [{
        label: 'North America',
        visible: true,
        children: [{
          label: 'United States',
          children: [{
            label: 'California',
            children: [{
              label: 'Los Angeles',
              children: [{
                label: 'Beverly Hills',
                children: []
              },
              {
                label: 'Hollywood',
                children: []
              },
              {
                label: 'Santa Monica',
                children: []
              }]
            }]
          }]
        }]
        // . . .
      }]
    }
  }
}
</script>

Properties

Notes

1Inherits CSS3 properties from itemStyle 2Inherits CSS3 properties from rootItemStyle

Slots

Events

container-items-style-down

{
  border: "solid 1px #eee"
}

container-items-style-right

{
  border: "solid 1px #eee"
}

icon-down-after

{
  opened: {
    icon: "–",
    style: {
      marginLeft: "10px"
    }
  },
  closed: {
    icon: "+",
    style: {
      marginLeft: "10px"
    }
  }
}

icon-down-before

{
  opened: {
    icon: "",
    style: { }
  },
  closed: {
    icon: "",
    style: { }
  }
}

icon-down-before-leaf

{
  icon: "",
  style: { }
}

icon-right-after

{
  opened: {
    icon: "▾",
    style: {
      marginLeft: "10px",
      transform: "rotate(90deg)"
    }
  },
  closed: {
    icon: "▾",
    style: {
      marginLeft: "10px",
      transform: "rotate(-90deg)"
    }
  }
}

icon-right-before

{
  opened: {
    icon: "",
    style: { }
  },
  closed: {
    icon: "",
    style: { }
  }
}

icon-right-before-leaf

{
  icon: "",
  style: { }
}

icon-root-after

{
  opened: {
    icon: "▾",
    style: {
      marginLeft: "10px",
      transform: "rotate(180deg)"
    }
  },
  closed: {
    icon: "▾",
    style: {
      marginLeft: "10px"
    }
  }
}

icon-root-before

{
  opened: {
    icon: "",
    style: ""
  },
  closed: {
    icon: "",
    style: ""
  }
}

item-active-style

{
  color: "#fff",
  backgroundColor: "#444"
}

item-hover-style

{
  backgroundColor: "#e7e7e7"
}

item-style

{
  padding: "6px",
  backgroundColor: "#f5f5f5"
}

root-item-active-style

{
  color: "#fff",
  backgroundColor: "#444"
}

root-item-hover-style

{
  backgroundColor: "#eee"
}

root-item-style

{
  backgroundColor: "#f9f9f9",
  textAlign: "center",
  fontSize: "14px",
  padding: "10px 20px"
}

striped-style

[
  {
    backgroundColor: "#f9f9f9"
  },
  {
    backgroundColor: "#f1f1f1"
  }
]

MIT

Developed by Adson Vinicius