All Projects → OYsun → Vuecirclemenu

OYsun / Vuecirclemenu

Licence: mit
🐰A beautiful circle menu powered by Vue.js

Projects that are alternatives of or similar to Vuecirclemenu

Uskin
A front-end framework aims at developing web projects based on CSS3 and provides common components.
Stars: ✭ 74 (-93.83%)
Mutual labels:  ui-design, component
Vc Popup
一个行为标准的vue popup组件集
Stars: ✭ 289 (-75.9%)
Mutual labels:  component, menu
Vue Menu
Menu/Contextmenu Component for vue2
Stars: ✭ 227 (-81.07%)
Mutual labels:  component, menu
Sppagemenu
分页菜单,功能非常齐全,满足绝大多数APP,简书地址:
Stars: ✭ 402 (-66.47%)
Mutual labels:  component, menu
Realtaiizor
C# WinForm UI/UX Component Library
Stars: ✭ 109 (-90.91%)
Mutual labels:  ui-design, component
Vuestar
✨A like button with delightful star animation powered by Vue.js
Stars: ✭ 815 (-32.03%)
Mutual labels:  ui-design, component
React Json Graph
React component for rendering graphs
Stars: ✭ 71 (-94.08%)
Mutual labels:  component
Rn Collapsing Tab Bar
Collapsing header with tabs for react native
Stars: ✭ 71 (-94.08%)
Mutual labels:  component
Fwpopupviewoc
信手拈来的OC弹窗库:1、继承 FWPopupBaseView 即可轻松实现各种位置、动画类型的弹窗;2、新功能引导弹窗。更多弹窗场景等你来挑战,总之,想怎么弹就怎么弹!!!
Stars: ✭ 70 (-94.16%)
Mutual labels:  menu
React Frame Component
Render your React app to an iFrame
Stars: ✭ 1,163 (-3%)
Mutual labels:  component
Phfcomposebarview
Compose bar from iOS 7 Messages.app
Stars: ✭ 1,197 (-0.17%)
Mutual labels:  component
Component Pattern For Angular Js 1 X
Example of implementation of Component pattern for Angular JS 1.X using ES6 & Webpack
Stars: ✭ 75 (-93.74%)
Mutual labels:  component
Mao Rn Android Kit
⚙️ Android Native (ui components and modules) wrap in React Native
Stars: ✭ 74 (-93.83%)
Mutual labels:  component
Config
Configure a system using EDN files and clojure.spec
Stars: ✭ 72 (-93.99%)
Mutual labels:  component
Tippyjs
Tooltip, popover, dropdown, and menu library
Stars: ✭ 9,433 (+686.74%)
Mutual labels:  menu
Security
The Security component provides a complete security system for your web application.
Stars: ✭ 1,195 (-0.33%)
Mutual labels:  component
Electron Tray Window
🖼️ Generates custom tray windows with Electron.js
Stars: ✭ 71 (-94.08%)
Mutual labels:  menu
Vue Breakpoint
😸 A renderless Vue.js component for composing CSS breakpoints
Stars: ✭ 74 (-93.83%)
Mutual labels:  component
Vue Standalone Component
Vuejs template to build components with livecoding, tests, documentation and demos
Stars: ✭ 75 (-93.74%)
Mutual labels:  component
Vue Router Layout
Lightweight layout resolver for Vue Router
Stars: ✭ 74 (-93.83%)
Mutual labels:  component

VueCircleMenu


查看中文文档,请移步至 这里

demo

For a better demonstration, please use the phone scan the following two-dimensional code view demo or click here http://web-oysun.cn/VueCircleMenu/

API

Props

Option type Description
type String Necessary,Specifies the type of menu,There are six types of:top,bottom,left,right,middle,middle-around
number(v1.1.0) Number Necessary,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
circle boolean Whether the menu button for rounded corners, the default for the square button
mask String There are two kinds of mask layer:"white" and "black"
animate String Sub menu animation,You can import an external css animation library, such as "animate.css"
btn boolean Switch 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
colors Array The background color of the buttons and menus

Slot

SlotName Description
item_btn Customize the switch button
item_1 The contents of the first menu
item_2 The content of the second menu
item_3 The content of the third menu
item_4 The content of the fourth menu

Detailed instructions

Props

type

The type parameter is required, indicating the type of the menu, a total of about six:top,bottom,left,right,middle,middle-around

number

The number parameter is required,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 Note:

  • when the number value of 3, type type for middle or middle-around is invalid
  • The number parameter fills the number, but in the vue propes,If we want to pass down an actual JavaScript number, we need to use v-bind so that its value is evaluated as a JavaScript expression.For more information click here

circle

Fill in circle to make the menu button rounded, the default is the square button:

mask

Fill in mask produces mask, divided into two kinds: "white" and "black".(Note: do not fill out or fill in the wrong type all think don't need a mask)

animate

Animate is to add animation to the menu, as long as you can add animation css class, you can also introduce css animation library, such as animate.css

colors

Colors specifies the background color of the button and menu, and does not use this property, the default color configuration is used, and the default color of the component is:

If you want to configure the color, colors into an array,In addition, it is important that an array of values must be color code, rather than the CSS class.

  <circle-menu type="bottom" :number="4" colors="[ '#563761', 'rgb(255, 255, 102)', '#FFE26F', '#F3825F', '#F19584' ]">
    <button type="button" slot="item_btn"></button>
    <a slot="item_1" class="fa fa-twitter fa-lg" herf="#" ></a>
    <a slot="item_2" class="fa fa-weixin fa-lg" herf="#" ></a>
    <a slot="item_3" class="fa fa-weibo fa-lg" herf="#" ></a>
    <a slot="item_4" class="fa fa-github fa-lg" herf="#" ></a>
  </circle-menu>

Note color code must be one-to-one correspondence, the first color code to refer to the button, the second color for the first menu and so on, a total of five color code, fill more, fill less or not fill in the color code is invalid

Slot

item_btn

The name slot refers to the custom switch button, and when you need to customize the switch button, do not fill in thebtn property, use the slot, so you can disable the default switch button and use the custom button(Custom switch button has the advantage that you can bind events to the switch button to do further operations)

item_1,item_2,item_3,item_4

These slot one-to-one correspondence refer to the four menu button

principle:

According to these five slot,Actually means that the component is actually a parcel content box ,The contents of the box are set in slot

  • Through slot, you can fill in any content, and custom style
  <circle-menu type="top" :number="4">
    <button type="button" slot="item_btn"></button>
    <router-link :to="..." slot="item_1">
    <span slot="item_2"></a>
    <div slot="item_3"></a>
    <img  slot="item_4" src="img" />
  </circle-menu>
  • Through slot, to bind any event for menu
  <circle-menu type="middle-around" :number="4">
    <button type="button" slot="item_btn" @click="dosomething" ></button>
    <a slot="item_1" herf="#" @click=""></a>
    <v-touch tag="a" v-on:tap="onTap" slot="item_2"></v-touch>
    <v-touch tag="a" v-on:tap="onTap" slot="item_3"></v-touch>
    <a slot="item_4" herf="#" v-on:handler="handler"></a>
  </circle-menu>

Simple example

<!--"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 and use

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

Bug and suggestions

If you encounter problems or suggestions in the use, welcome to issues

LICENSE

MIT

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].