Vue-radial-menu NPM

vue-radial-menu

Simple radial menu for vue2 apps

Installation

npm i vue-radial-menu --save

Basic usage

Menu in automatic mode :

<template>
  <div id="app">
    <radial-menu
      style="margin: auto; margin-top: 300px; background-color: white"
      :itemSize="50"
      :radius="120"
      :angle-restriction="180">
        <radial-menu-item 
          v-for="(item, index) in items" 
          :key="index" 
          style="background-color: white" 
          @click="() => handleClick(item)">
          <span>{{item}}</span>
        </radial-menu-item>
      </radial-menu>
      <div style="color: rgba(0,0,0,0.6); margin-top: 16px;">{{ lastClicked }}</div>
  </div>
</template>

<script>
import { RadialMenu,  RadialMenuItem } from 'vue-radial-menu'

export default {
  name: 'app',
  components: {
    RadialMenu,
    RadialMenuItem
  },
  data () {
    return {
      items: ['foo', 'bar', 'hello', 'world', 'more', 'items'],
      lastClicked: 'click on something!'
    }
  },
  methods: {
    handleClick (item) {
      this.lastClicked = item;
    }
  }
}
</script>

Options

RadialMenu props

Note that no prop is actually required. Also take note that no color is given to the menu by default, you would do well to add your own class for these kind of things.

Name	Type	Default Value	Description
open	Boolean	undefined	Force the menu to assume the given value. If this prop is not provided, the menu will handle the state on its own. Useful in cases where the user might want to make an action before displaying, i.e. displaying an overlay. Note that this can also be achieved by listening on the `open` and `close` events.
angle-restriction	Number	180	The maximum angle in a circle for the items to be displayed in. A value of 90 would represent the quarter of a circle, 180 half a circle and so on.
size	Number	50	The size in pixels of the main button to open the menu.
itemSize	Number	36	The size in pixels of menu items.
rotate	Number	0	An angle value to rotate the menu. Positive values will rotate the menu clockwise.
radius	Number	100	The radius of the circle to form with the items.