0.1.2 • Published 4 years ago

@dove-ui/menu v0.1.2

Weekly downloads
3
License
MIT
Repository
github
Last release
4 years ago

Menu

A menu component for vue.

import VcMenu from '@dove-ui/menu'
import '@dove-ui/menu/dist/index.css'

Vue.use(VcMenu) // VcMenu
<vc-menu :menus="menus" theme="dark"></vc-menu>

npm.io

Menu Attributes

AttributeDescriptionTypeAccepted ValuesDefault
menusMenus objectMenuItem[]——
themeMenu themestringdark/light—
current-activeSelected itemsany[]—[]
multipleMultiple selectionbooleantrue/falsefalse
render-itemCustom item renderfunction——
open-activeAuto open selectedfunctiontrue/false—

Menu Events

NameDescriptionValues
selectedSelected itemMenuItem
openOpen submenu itemMenuItem
closeClose submenu itemMenuItem

Menu Slot-scopes

NameDescriptionValues
itemCustom item renderMenuItem

Custom item render

 <vc-menu :menus="menus" :current-active="['item4']" theme="dark">
  <!-- before vue 2.6.0
  <template slot-scope="menu" slot="item">
    <img :src="logo" alt="" style="vertical-align:middle;width:12px;margin-right:5px;">
    <span>{{menu.label}}</span>
  </template> -->

  <!-- vue 2.6.0+ -->
  <template v-slot:item="menu">
    <img :src="logo" alt="" style="vertical-align:middle;width:12px;margin-right:5px;">
    <span>{{menu.label}}</span>
    <span style="font-size: 12px;margin-left:10px;opacity:0.5;">{{menu.description}}</span>
  </template>
</vc-menu>

MenuItem

TypeAttributeDescription
string/functionmenus[].labelitem label
MenuItem[]menus[].childrensubmen
booleanmenus[].groupitem is group
booleanmenus[].openopen submenu
stringmenus[].nameunique item name
string/objectmenus[].routerrouter-link#to
functionmenus[].hanldeitem click handle function
stringmenus[].linklink url
stringmenus[].targetlink tergat
stringmenus[].titletitle
stringmenus[].typeline Divider line
stringmenus[].hidehidden item
menuvue-menu
@infinitebrahmanuniverse/nolb-_dov@everything-registry/sub-chunk-254
0.1.2

4 years ago

0.1.1

4 years ago

0.1.0

4 years ago