Home Examples Charts Dashboard Projects Menu

Vue.js examples
Learn Vue.js

Circle menu with Vue.js

Related:
Vue: Step-By-Step Guide To Mastering Vue.js From Beginner To Advanced (Vue.js, Learning Vue js 2)

A beautiful circle menu powered by Vue.js.

This is an expandable circle menu. If you click on the button you can get several options. The menu can pop up horizontally, vertically, on the bottom of the screen, center, from left, from right and so on.

An example below:

circle menu

Example

Simple example of the circle menu below:

<!--"Middle" type, four sub menu, animation introduced animate.css library, white mask, round custom switch button, default menu color configuration-->
<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>
<!--"Top" type, three sub menuthe, default animation, gray mask, square the default button, the custom color configuration menu-->
<circle-menu type="top" :number="3" mask='black' btn colors="[ 'rgb(255, 255, 102)', '#A7425C', '#FFE26F', 'F3825F', '#F19584' ]">
<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>
</circle-menu>

Installation

You need npm to install the menu:

npm install vue-circle-menu
If used as a global component
//In the project entry file
import Vue from 'vue'
import CircleMenu from 'vue-circle-menu'
Vue.component('CircleMenu', CircleMenu)

If as a local component

//In a component
import CircleMenu from 'vue-circle-menu'
export default {
components: {
CircleMenu
}
}

Github

Repo: https://github.com/OYsun/VueCircleMenu
Download zip


© vuejsexamples.net - Privacy Policy - Cookie Policy