wb-sidebar2 v4.2.1-r01

wb-sidebar2 Version=4.2.1-r01

Props item

item is an array of wbc Component or list of wbc Component. see ???

Props layout

define the style of the sidebar. It has the same props of VNavigationDrawer. see 'https://vuetifyjs.com/en/api/v-navigation-drawer/#links'

Syntax

<WBMenu layout="" item="[['item1',item1.1,item1.2,..],'item2',...]">
</WBMenu>

Example

props layout

    layout = {
        drawer: {
          class: 'ma-1 pa-1  pink--text ',
          color: 'grey',
          permanent: true,
          'expand-on-hover': true,
          right: true,
          floating: true,
          width: 300,
        },
        activator: {
          class: 'blue',
        },
      };

props items

      items =[
        3333,
        444,
        'VDivider',
        555,
        666,
        [
          '~1111',
          {
            comp: 'VIcon',
            itemStyle: { class: 'red' },
            props: {
              class: 'grey  white--text px-16',
              style: { 'background-color': 'red', border: `10px dashed black` },
              headers: 'xczxczxczxc',
              // mode: 'all',
              // wrap: 'VCol',
              html: 'mdi-home',
            },
          },
          777777,
          '[[bla bla|red|]]',
          'VDivider',
          888,
          ['9999', 8888, 9999, 5555],
          33333,
          44444,
          5555,
          [66666, 777, 88888],
        ],
        99999,
        ['a', 'b', 'c', ['d0', 'd1', 'd2', 'd3']],

        [
          {
            comp: 'img',
            props: {
              class: 'text-center text-h10 green font-weight-medium   ',
              src: 'https://img.freepik.com/free-vector/different-pets-concept_52683-37940.jpg?w=2000',
              headers: 'pets',
              hight: 70,
              width: 100,
              to: 'https://google.com',
            },
          },

          {
            comp: 'div',
            props: {
              class: 'text-center text-h10 font-weight-medium  yellow ',
              html: 'bla bla ',
            },
            to: 'https://google.com',
            events: {},
          },
          {
            comp: 'div',
            props: {
              class: 'text-center text-h10 font-weight-medium  pink px-16',
              html: 'a0',
            },
            to: 'https://google.com',
            events: {},
          },
          'a1',
          'a2',
          'a3',
          'VDivider',
          'a4',
          'a5',
        ],
        'VDivider',
        [
          'Birds [[<br><small>(ctr+click on item below to search)</small>]]',
          [
            '<~li>',
            '[[Parrots|yellow red--text|https://www.google.com/search?q=Parrots]]',
            '[[Pelicans|yellow|https://www.google.com/search?q=Pelicans]]',
            '[[Penguins|yellow|https://www.google.com/search?q=Penguins]]',
            '[[Pigeons and Doves |yellow|https://www.google.com/search?q=Pigeons+and+Doves]]',
            '[[Shrikes|yellow|https://www.google.com/search?q=Shrikes]]',
          ],
        ],
        [
          'Cats',
          {
            comp: 'img',
            props: {
              class: 'text-center text-h10 font-weight-medium  blue pa-2',
              src: 'https://upload.wikimedia.org/wikipedia/commons/thumb/1/15/White_Persian_Cat.jpg/220px-White_Persian_Cat.jpg',
              html: 'Persian Cat',
              footers: 'Persian Cat',
            },
            to: 'https://www.google.com/search?q=Persian+Cat',
          },
          {
            comp: 'img',
            props: {
              class: 'text-center text-h10 font-weight-medium  blue pa-2',
              src: 'https://upload.wikimedia.org/wikipedia/commons/thumb/b/ba/Paintedcats_Red_Star_standing.jpg/220px-Paintedcats_Red_Star_standing.jpg',
              html: 'Bengal Cat',
              footers: 'Bengal Cat',
            },
            to: 'https://www.google.com/search?q=Bengal+Cat',
          },
          {
            comp: 'img',
            props: {
              class: 'text-center text-h10 font-weight-medium  blue pa-2',
              src: 'https://upload.wikimedia.org/wikipedia/commons/thumb/5/5c/British_burmese_-_Andel_Alois_at_Cat_show.JPG/220px-British_burmese_-_Andel_Alois_at_Cat_show.JPG',
              html: 'Burmese Cat',
              footers: 'Burmese Cat',
            },
            to: 'https://www.google.com/search?q=Burmese+Cat',
          },
          {
            comp: 'img',
            props: {
              class: 'text-center text-h10 font-weight-medium  blue pa-2',
              src: 'https://upload.wikimedia.org/wikipedia/commons/thumb/5/5d/Adult_Scottish_Fold.jpg/220px-Adult_Scottish_Fold.jpg',
              html: 'Scottish Fold',
              footers: 'Scottish Fold',
            },
            to: 'https://www.google.com/search?q=Scottish+Fold',
          },
        ],
        [
          {
            comp: 'video',
            props: {
              src: 'https://www.w3schools.com/html/mov_bbb.mp4',
              headers: 'video',
              hight: 120,
              width: 120,
              controls: true,
              autoplay: true,
            },
          },
          '[[google|blue|http://www.google.com]]',
          'item2',
          'item3',
          'item4',
        ],
        [
          {
            comp: 'VBtn',
            props: {
              html: 'click me',
              class: 'red white--text',
            },
            events: {
              click: () => alert('The button has been clicked. Thanks!! '),
            },
          },
        ],
        'VDivider',
        [
          {
            comp: 'img',
            props: {
              class: 'text-center text-h10 font-weight-medium   pa-2 white--text ',
              src: 'https://cdn.petsworld.network/v1/b/assets.petsworld.network/o/item-categories%2F7R4B39%2Fmedia%2FL6IWPSOTLA6R',
              hight: 70,
              width: 100,
              footers: 'list of dogs',
            },
            to: 'https://www.google.com/search?q=Scottish+Fold',
          },
          'golden retriever',
          'labrador retriever',
          'french bulldog',
          'beagle',
          'german shepherd dog',
          'poodle',
          'bulldog',
          'most popular breeds',
        ],
        'VDivider',
        [
          {
            comp: 'VIcon',
            props: {
              hide: false,
              html: 'mdi-dots-vertical',
            },
          },
        ],
        {
          comp: 'VIcon',
          props: {
            hide: false,
            html: 'mdi-card-account-phone-outline',
          },
        },
        '[[google|pink|http://www.google.com]]',

      ];