GitHub - motla/vue-file-toolbar-menu: 🖥️ UI file/toolbar menus for Vue apps (original) (raw)

Features

🚀 See live demo

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

💬 If you plan to build a document editor, also check out vue-document-editor

Installation

In your Vue.js 3.x project:

npm install vue-file-toolbar-menu

In your Vue.js 2.x project:

npm install vue-file-toolbar-menu@1

💬 If you prefer static files, import assets from the dist folder

Basic example

MyComponent.vue

Should render this:

same example using static files loaded with a CDN (Vue 3)

same example using static files loaded with a CDN (Vue 2)

Complete example

See the Demo.vue file corresponding to the live demo. 📘 Also read the API.

Styling

Styling can be done either by writing CSS variables or by overloading CSS properties using !important.

📘 Check the CSS variables list and default values in the stylesheet.

💬 If you need some variables that are missing, edit the stylesheet then submit a PR.

Some styling examples:

• Docs-like theme:

View specific CSS variables for this theme

:root { --bar-font-color: rgb(32, 33, 36); --bar-font-family: Roboto, RobotoDraft, Helvetica, Arial, sans-serif; --bar-font-size: 15px; --bar-font-weight: 500; --bar-letter-spacing: 0.2px; --bar-padding: 3px; --bar-button-icon-size: 20px; --bar-button-padding: 4px 6px; --bar-button-radius: 4px; --bar-button-hover-bkg: rgb(241, 243, 244); --bar-button-active-color: rgb(26, 115, 232); --bar-button-active-bkg: rgb(232, 240, 254); --bar-button-open-color: rgb(32, 33, 36); --bar-button-open-bkg: rgb(232, 240, 254); --bar-menu-bkg: white; --bar-menu-border-radius: 0 0 3px 3px; --bar-menu-item-chevron-margin: 0; --bar-menu-item-hover-bkg: rgb(241, 243, 244); --bar-menu-item-padding: 5px 8px 5px 35px; --bar-menu-item-icon-size: 15px; --bar-menu-item-icon-margin: 0 9px 0 -25px; --bar-menu-padding: 6px 1px; --bar-menu-shadow: 0 2px 6px 2px rgba(60, 64, 67, 0.15); --bar-menu-separator-height: 1px; --bar-menu-separator-margin: 5px 0 5px 34px; --bar-menu-separator-color: rgb(227, 229, 233); --bar-separator-color: rgb(218, 220, 224); --bar-separator-width: 1px; --bar-sub-menu-border-radius: 3px; }

• macOS-like theme:

View specific CSS variables for this theme

:root { --bar-font-color: rgba(0, 0, 0, 0.75); --bar-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; --bar-font-size: 15.5px; --bar-button-icon-size: 20px; --bar-button-padding: 4px 7px 5px 7px; --bar-button-radius: 0; --bar-button-hover-bkg: none; --bar-button-active-color: white; --bar-button-active-bkg: rgba(41, 122, 255, 0.9); --bar-button-open-color: white; --bar-button-open-bkg: rgba(41, 122, 255, 0.9); --bar-menu-bkg: rgba(255, 255, 255, 0.95); --bar-menu-backdrop-filter: saturate(180%) blur(20px); --bar-menu-backdrop-filter-bkg: rgba(255, 255, 255, 0.3); --bar-menu-border: solid 1px #BBB; --bar-menu-border-radius: 0 0 6px 6px; --bar-menu-item-chevron-margin: 0; --bar-menu-item-hover-color: white; --bar-menu-item-hover-bkg: rgba(41, 122, 255, 0.9); --bar-menu-item-padding: 1px 12px 2px 25px; --bar-menu-item-icon-size: 16px; --bar-menu-item-icon-margin: 0 4px 0 -20px; --bar-menu-padding: 3px 0; --bar-menu-shadow: 0 6px 13px 0 rgba(60, 60, 60, 0.4); --bar-menu-separator-height: 2px; --bar-menu-separator-margin: 5px 0; --bar-menu-separator-color: rgba(0, 0, 0, 0.08); --bar-separator-color: rgba(0, 0, 0, 0.1); --bar-separator-width: 2px; --bar-separator-margin: 5px 7px; --bar-sub-menu-border-radius: 6px; }

Project development

• npm run serve compiles, serves and hot-reloads demo for development
• npm run build compiles and minifies production files and demo

Dependencies

• hotkeys-js by Kenny Wong, MIT License
• material-icons by Ravindra Marella and Google, Apache-2.0 License
• node-emoji by Daniel Bugl, MIT License
• vue-color by xiaokaike, MIT License

Licensing

Copyright (c) 2020 Romain Lamothe, MIT License