Elegant Menu Toolbar & Content Editor For Vue.js – File Toolbar Menu

Description:

A Vue.js component to create a customizable, multi-language, easy-to-style, touch-enabled HTML toolbar menu with editor options for HTML content.

Basic Usage:

1. Import the component.

import VueFileToolbarMenu from 'vue-file-toolbar-menu';

2. Add the File Toolbar Menu component to the template.

<template>
  <div> 
    <vue-file-toolbar-menu :content="my_menu" /> 
  </div>
</template>

3. Register the component and insert your own items to the component.

export default {
  components: { VueFileToolbarMenu },
  data () {},
  computed: {
    my_menu () {
      return [
        { text: "Home", menu: [
          { text: "Item 1", click: () => alert("Action 1") },
          { text: "Item 2", click: () => alert("Action 2") }
        ] }, {
          // More Buttons Here
        }
      ]
    }
  }
}

Previews:

Elegant Menu Toolbar & Content Editor For Vue.js - File Toolbar Menu Google Docs Theme

Google Docs Theme

Elegant Menu Toolbar & Content Editor For Vue.js - File Toolbar Menu Mac Theme

Mac Theme

Elegant Menu Toolbar & Content Editor For Vue.js - File Toolbar Menu Default Theme

Default Theme

Download Details:

Author: motla

Live Demo: https://motla.github.io/vue-file-toolbar-menu/

Download Link: https://github.com/motla/vue-file-toolbar-menu/archive/master.zip

Official Website: https://github.com/motla/vue-file-toolbar-menu

Install & Download:

# NPM
$ npm install vue-file-toolbar-menu --save

You Might Be Interested In:

Add Comment