wb-sidebar2
v4.2.1-r01
Published
Vue component sidebar2
Readme
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]]',
];