@mesg-components/side-menu

1.1.0 • Public • Published

@MESG-COMPONENTS/SIDE-MENU

Install

npm install @mesg-components/side-menu or yarn add @mesg-components/side-menu

Properties

  • items: Array of Object, Required. -> values to display

Slot

  • using key value from items to custom elements to display.

Example

Default:

const items = [
  { key: 'general', text: 'General', href: '#general' },
  { key: 'transaction', text: 'Transactions', href: '#transactions' },
  { key: 'compatibility', text: 'Compatibility', href: '#compatibility' },...]
<template>
  <side-menu :items="items" />
</template>

Custom:

const customItems = [
  { key: 'general', text: 'General', href: '#general' },
  { key: 'transaction', text: 'Transactions', href: '#transactions' },
  { key: 'compatibility',
    listItem: [
      {text: 'xxx',icon: 'xxx', href: '/xxx'},
      {text: 'xxx',icon: 'xxx', href: '/xxx'}
    ]
  },
  ...
]
<template>
  <side-menu :items="customItems">
    <template v-slot:general="{ item }">
      <a :href="item.href" class="link-secondary">
        <i class="chevron right"></i>
        <span>{{item.text}}</span>
      </a>
    </template>

    <template v-slot:transaction="{ item }">
      <a :href="item.href" class="link-secondary">
        <i class="chevron right"></i>
        <span>{{item.text}}</span>
      </a>
    </template>

    <template v-slot:compatibility="{ item }">
      <ul>
        <li v-for="(value,i) in item" :key="i">
          <a :href="value.href">
            <i :class="value.icon"></i>
            {{value.name}}
          </a>
        </li>
      </ul>
    </template>
    ...
  </side-menu>
</template>

Readme

Keywords

none

Package Sidebar

Install

npm i @mesg-components/side-menu

Weekly Downloads

1

Version

1.1.0

License

none

Unpacked Size

4.51 kB

Total Files

6

Last publish

Collaborators

  • nicolasmahe
  • anthony-mesg
  • nicolas-mesg