wb-menu2 v4.2.1

wb-menu2 Version=4.2.0-r01

Props item

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

Props layout

define the style of the menu. It has the same props of VTabs. see 'https://vuetifyjs.com/en/api/v-tabs/#links'

Syntax

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

Example

props layout

      layout = {
        tabs: {
          dark: true,
          class: 'ma-4 pa-4 deep-purple',
          color: 'black',
          'background-color': 'blue',
          app: true,
          dense: true,
          flat: true,
          height: 120,
        },
        lists: {
          class: 'ma-1 pa-1  pink--text',
          color: 'yellow',
          'background-color': 'blue',
        },
      };

props items

      items = [
        [
          {
            comp: 'img',
            props: {
              class: 'text-center text-h10 font-weight-medium  grey pa-2',
              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 pa-2',
              html: 'bla bla ',
            },
            to: 'https://google.com',
            events: {
              // click: () => alert('rrrrrrr'),
            },
          },
          {
            comp: 'div',
            props: {
              class: 'text-center text-h10 font-weight-medium  pink px-16',
              html: 'a0',
            },
            to: 'https://google.com',
            events: {
              // click: () => alert('rrrrrrr'),
            },
          },
          'a1',
          'a2',
          'a3',
          'a4',
          'a5',
        ],
        [
          'Birds',
          [
            '<~li>',
            '[[b1|yellow|wwww]]',
            '[[b2|yellow|wwww]]',
            '[[b3|yellow|wwww]]',
            '[[b4|yellow|wwww]]',
            '[[b5|yellow|wwww]]',
          ],
        ],
        [
          '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('rrrrrrr'),
          },
        },
        'VSpacer',
        [
          {
            comp: 'img',
            props: {
              class: 'text-center text-h10 font-weight-medium  blue pa-2',
              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',
        ],
        'VSpacer',
        [
          {
            comp: 'VIcon',
            props: {
              hide: false,
              html: 'mdi-dots-vertical',
            },
          },
        ],
        {
          comp: 'VIcon',
          props: {
            hide: false,
            html: 'mdi-card-account-phone-outline',
          },
        },
      ];