Home Examples Charts Dashboard Projects Menu

Vue.js examples
Learn Vue.js

Circle menu with Vue.js

Related course:
Fullstack Vue: The Complete Guide to Vue.js

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:


<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>

<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