Press "Enter" to skip to content

🐰A Beautiful Circle Radial Menu In Vue.js | VueCircleMenu

VueCircleMenu is a Vue component for creating an animated circular or linear popup menus on an app.

javascript radial menu, circular navigation menu examples, vue circle menu, vue radial menu, vue js modal popup, vuetify popup menu, animated radial circular menu

How to make use of it:

Install and download:

npm install vue-circle-menu

1. Import VueCircleMenu.

import CircleMenu from 'vue-circle-menu';

2. Register the component.

Vue.component('CircleMenu', CircleMenu)
// or 
export default {
  components: {
    CircleMenu
  }
}

3. Add the Circle List component to the application template.

<circle-menu type="middle" :number="4" animate="animated jello" mask='white' circle>
  <button type="button" slot="item_btn"></button>
  <a slot="item_1" class="fa fa-twitter fa-lg"></a>
  <a slot="item_2" class="fa fa-weixin fa-lg"></a>
  <a slot="item_3" class="fa fa-weibo fa-lg"></a>
  <a slot="item_4" class="fa fa-github fa-lg"></a>
</circle-menu>

4. All possible props.

// top,bottom,left,right,middle,middle-around
type: {
  type: String,
  required: true
},
// the number of menus
number: {
  type: Number,
  required: true,
  validator: function (value) {
    return value > 1 && value < 5
  }
},
// applies animations to menus
animate: String,
// "white" or "black"
mask: String,
// circular or square button
circle: Boolean,
// display toggle button
btn: Boolean,
// background color
colors: Array

API

Props

OptiontypeDescription
typeStringNecessary,Specifies the type of menu,There are six types of:top,bottom,left,right,middle,middle-around
number(v1.1.0)NumberNecessary,This is the v1.1.0 version of the api, specify the number of menus, the value should be greater than 2 less than 5, is only 2,3,4 of these three case
circlebooleanWhether the menu button for rounded corners, the default for the square button
maskStringThere are two kinds of mask layer:”white” and “black”
animateStringSub menu animation,You can import an external css animation library, such as “animate.css”
btnbooleanSwitch button, fill in this property, there is the default switch button, do not fill is not the default, you need to define the switch button in the slot
colorsArrayThe background color of the buttons and menus

Slot

SlotNameDescription
item_btnCustomize the switch button
item_1The contents of the first menu
item_2The content of the second menu
item_3The content of the third menu
item_4The content of the fourth menu

Elegant Circle & Linear Popup Menu Component, VueCircleMenu Plugin/Github, circular navigation menu css, responsive circular navigation


See Demo And Download

Official Website(OYsun): Click Here

This superior jQuery/javascript plugin is developed by OYsun. For extra advanced usage, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.