Press "Enter" to skip to content

🖥️ UI Menu Toolbar & Content Editor For Vue Apps | File Toolbar Menu

File toolbar menu is a component of Vue.js to create a customizable, multilingual, easy-to-touch HTML toolbar menu with editor options for HTML content.

toolbar example, text editor toolbar html, rich text editor toolbar icons, rte toolbar, toolbar has no editor, accessible rich text editor, html toolbar, accessibility toolbar

Features

  • Async list content (stored in Vue.js computed fields/data, not in <template>)
  • Easy design
  • Add your own custom components for menus and buttons
  • Uses standard material icons
  • Hotkey support
  • Touch compatible
  • Easy multi-language implementation (vue-i18n)
  • Migrated to Vue.js 3.x (for use with Vue 2.x, select the 1.x library version)

How to make use of it:

Install and download:

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

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 elements into 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
        }
      ]
    }
  }
}

Elegant Menu Toolbar & Content Editor, vue file toolbar menu Plugin/Github


See Demo And Download

Official Website(motla): Click Here

This superior jQuery/javascript plugin is developed by motla. For extra Advanced Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published. Required fields are marked *