Vue- float-menu: Floating menu Component for Vue.js #.\n\nvue-float-menu is a totally customizable floating food selection you can contribute to you vue.js program. Interact with a functioning demonstration.\n\nComponents.\nMove and position the menu anywhere on screen.\nThe wise food selection system finds the edges of the display screen and also flips the menu instantly.\nHelp for nested food selections.\nKeyboard Accessible.\nSupport for customized styles.\nConstructed along with Typescript.\nUser-friendly API with information driven actions.\nCreated with the all brand new Vue 3.\nInstallation.\nyarn install vue-float-menu.\nGetting Started.\nvue-float-menu has some fantastic defaults. Satisfy check the props segment for all accessible possibilities.\nvue-float-menu finds the optimal food selection positioning depending upon the opening of the food selection. for e.g if the food selection is positioned at the bottom edge and the alignment readied to base, the part will automatically flip the alignment to best.\nHere is a basic example that establishes the nonpayment place of the food selection as best left.\n\n\nPull.\n\n\n\n\nProps.\nmeasurement.\nkind: number.\ndescription: size of the Food selection Scalp size x heightin pixels.\nposture.\nstyle: String.\ndescription: preliminary placement of the Food selection Scalp. can be any type of some of the market values leading left, best right, lower left, bottom right.\ndealt with.\nkind: Boolean.\ndescription: turns off dragging and also the menu is going to be actually dealt with. utilize the position set to take care of the food selection posture.\nmenu-dimension.\nkind: Item.\ndescription: specifies the width and also minimum height of the Menu.\nmenu-data.\nkind: Object.\nclassification: records to create the food selection. refer to inhabiting the food selection for usage details.\non-selected.\ntype: Functionality.\ndescription: hook that is actually contacted selection.\nmenu-style.\ntype: Strand.\nclassification: could be slide-out or accordion.slide-outis the nonpayment food selection type.\nflip-on-edges.\ntype: Boolean.\nclassification: flips the food selection web content on the ideal edges of the display screen.\ntheme.\nkind: Object.\ndescription: uphold to tailor the color pattern. recommend theme for use.\nPosition.\nThe position set could be made use of to set the initial posture of the Menu Head. The uphold may allow any some of the observing worths.\nleading left (nonpayment).\nbest right.\nbottom left.\nbottom right.\n\n\n\n\n\nFood selection head measurement.\ndimension set could be made use of to set the distance.\nand also elevation of the food selection head. The prop takes a single variety worth to set.\nthe height and distance of the Menu Crown.\n\n\n\n\n\nMenu dimension.\nuphold to establish the elevation and also distance of the food selection.\n\n\n\n\n\nMenu Style.\nThe element supports pair of styles slide-out( default) as well as accordion. The accordion style is actually more suitable for mobile phones.\n\n\n\n\n\n\nInhabiting the Food selection.\nUse the menu-data set to develop easy or even embedded menus of your preference. menu-data takes a variety of MenuItem type.\nMenuItem properties.\nproperty.\ndescription.\ntitle.\ndisplay name of the food selection thing.\nsubMenu.\ninformation for the sub-menu.\nhandicapped.\nturns off the menu product.\ndivider panel.\ncreates the product as a divider panel.\nBelow our experts produce an easy Food selection construct with 3 Food selection things without any sub food selections.\n' const menuData = [label: \"New\",.\n\nlabel: \"Edit\",.\nsubMenu: \nname: \"edit-items\",.\nitems: [name: \"Replicate\", label: \"Mix\", handicapped: accurate],.\n,.\n,.\ndivider panel: correct,.\n\nname: \"Open Latest\",.\nsubMenu: \ntitle: \"recent-items\",.\nthings: [title: \"Paper 1\", divider: true, title: \"Paper 2\"],.\n,.\n,.\n] '.\n\n'.\n\n'.\non-select.\nhook for the food selection item variety event.\n\n\n\nFlip on sides.\npreparing this prop flips the menu web content on the appropriate sides of the screen.\n\n\n\n\nMade Menu.\nTo turn off moving as well as to fix the setting statically, established fixed to true. This prop is actually disabled through nonpayment. Utilize this set in addition to the placement set to establish the intended setting.\n\n\n\n\n\nCustomized icon.\nTo tailor the Food selection Symbol, just pass any sort of material in between the float-menu tags. Below our experts make a custom-made symbol.\n\n\n\n\n\nas well as here we render a text message Click on inside the Food selection handle.\n\nClick on.\n\n\nSymbol support.\nEach menu item can be iconified and also the part makes use of slots to inject the symbols.\nPass specific icons (or even photos) as templates noted along with an one-of-a-kind slot id. satisfy see to it the i.d.s match the iconSlot property in the things array.\n\n\n\n\n\n\n\n\n\nexport default defineComponent( \nname: \"MenuExample\",.\ninformation() \nreturn \nitems: [title: \"New Data\", iconSlot: \"brand-new\",.\nlabel: \"New Window\", iconSlot: \"edit\",.\n]\n\n ).\nThis works flawlessly even for nested menu construct. Be sure the slot ids match and the part will deliver the icons properly.\n\n\n\n\n\n\nexport default defineComponent( \nname: \"MenuExample\",.\ndata() \nreturn \nproducts: [title: \"modify\",.\nsubMenu: [name: \"reduce\", iconSlot: \"cut\"],.\n]\n\n ).\nConcept.\nCustomize the color design with the concept prop.\n\nClick on.\n\nBuild Setup.\n# put in addictions.\nanecdote set up.\n\n# begin dev.\nanecdote run dev.\n\n# operate css linting.\nanecdote operate dust: css.\n\n# lint everything.\nyarn operate lint: all.\n\n

package lib.npm operate rollup.Contributing.Fork it (https://github.com/prabhuignoto/vue-float-menu/fork ).Create your component branch (git check out -b new-feature).Commit your modifications (git devote -am actually 'Add function').Push to the division (git press origin new-feature).Produce a new Pull Request.Created along with.Details.The venture makes use of vite rather than @vue/ cli. I decide on vite for rate and also i also feel vite will certainly be the future.Meta.Prabhu Murthy-- @prabhumurthy2-- prabhu.m.murthy@gmail.com.https://www.prabhumurthy.com.Dispersed under the MIT permit. Go to permit to learn more.https://github.com/prabhuingoto/.