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

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

motla Last Updated: 10 months ago

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

Changelog:

v2.2.0 (11/20/2022)

  • Allow support for using components as icons

v2.1.0 (10/30/2022)

  • SCSS has been converted to basic CSS, so you don’t have to install a SCSS compiler anymore
  • Updating dependencies
  • Removing ESLint for a lighter project

v2.0.5 (02/16/2022)

  • Bugfix

v2.0.4 (02/15/2022)

  • Bugfix

v2.0.3 (02/07/2022)

  • Fix v2.0.2 had wrong paths

v2.0.2 (02/05/2022)

  • bugfixes

v2.0.1 (12/19/2021)

  • Prevent displaying “false” as a default title when hovering buttons (Vue3 issue only)
  • Dependencies upgrade

v2.0.0 (09/28/2021)

  • Switching master branch to Vue3
  • Switched vue-color to the @ckpack/vue-color fork for Vue3 compatibility
  • Dependencies upgrade

v1.3.4 (03/09/2021)

  • [Color button] Prevent calling color_update() callback when the color is changed not from the color palette

v1.3.3 (03/02/2021)

  • Setting the CSS z-index of menus to 1000 (it was 1 previously)
  • Dependencies upgrade

v1.3.2 (02/28/2021)

  • Renaming the static library “VueFileToolbarMenu”

v1.3.1 (02/05/2021)

  • Dependencies upgrade
  • Changing material-design-icons to material-icons package (only the icon font and required CSS, considerably smaller and updated regularly)

v1.3.0 (12/16/2020)

  • user can now set menu elements id

v1.2.0 (12/14/2020)

  • Update

v1.1.3 (10/22/2020)

  • Bug fix “Color picker turned off once clicked”

v1.1.2 (09/21/2020)

  • Separator and spacer styles moved to bar-default-styles.scss
  • Minor code refactoring

v1.1.0 (07/08/2020)

  • Added spacer component
  • Added disabled mode for color menu
  • Setting parameter menu_height now changes CSS max-height
  • Moving vue and core-js to devDependencies

Changelog:

07/16/2020

  • v1.1.1

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

Related Posts

Add Comment