Небольшой пакет для проектов на VueJS, который создает блок с навигацией в любом из углов страницы. Удобно и быстро.
Описание компонента быстрого меню
Судя по демо-режиму, лучше всего реализовать данный компонент в качестве кнопок социальных сетей. Однако, плагин отлично выглядит и работает на мобильных устройствах, что делает его доступных в приложениях для смартфонов.
Установка и использование
Ставим пакет через NPM:
|
1 |
$ npm install vue-quick-menu --save |
Шаблон использования:
|
1 |
<quick-menu :menu-count=count :icon-class=icons :menu-url-list=list></quick-menu> |
|
1 2 3 4 5 6 7 8 9 10 |
import Vue from 'vue' import quickMenu from 'vue-quick-menu' export default { ... components: { quickMenu }, ... } |
Таблица с входных параметрами компонента навигации VueJS:
| Property | Type | Default | Description |
|---|---|---|---|
| menuCount | Number | 4 | The number of menu item，option(2,3,4) |
| menuUrlList | Array | — | An array of Object of link of each menu item, like {isLink:true,url:\foo} |
| iconClass | Array | — | An array of icon class of each menu item |
| position | top-left,top-right,bottom-left or bottom-right | top-left | The position of quick menu |
| backgroundColor | String | #009dc7 | The background color of quick menu |
| color | String | #ffffff | The color of quick menu icon |
| isOpenNewTab | Boolean | false | If the menu will open a new tab after click |
В целом, здесь размышления и слова излишни. Просто берем и пользуемся. Удачи!