tiny icon menu based on material icons and vue mainly created for side crud buttons menu in lists or tree views.
Prop | Type | Required | Default | Description |
---|---|---|---|---|
icons | array | false | ['add', 'delete', 'edit'] | Any icon from material icon library |
labels | object | false | {'add' : 'Add', 'delete' : 'Delete', 'edit' : 'Edit' } | key icon name, value label |
iconSize | string | false | '16px' | Size of icons |
height | string | false | 'auto' | Height of menu |
width | string | false | 'auto' | Width of menu |
absolute | boolean | false | false | Absolute position menu |
top | string | false | '0px' | Position menu from top |
left | string | false | '0px' | Position menu form left |
border | boolean | false | false | Border on/off |
column | boolean | false | false | Column orientation of icons |
Install the package from npm by running:
$ npm i small-icon-menu
Import, register and place the component in your Vue app. Don't forget to include the material icons css "https://fonts.googleapis.com/icon?family=Material+Icons"
<template>
<smalliconmenu :icons="['add', 'delete', 'edit]" @add="emits add event" @delete="emits delete event" @edit="emits edit event"/>
</template>
import smalliconmenu from 'smalliconmenu'
export default {
components: {
smalliconmenu
},
}