B4J Library [BANanoVueMaterial]: The first complete opensource VueJS UX based framework for BANano

Mashiane · Nov 4, 2020

Vertical Tabs

B4X:

Dim lbla1 As VMLabel = vm.CreateLabel("").SetParagraph
    lbla1.SetText(vm.Rand_LoremIpsum(1))
    Dim contbtnaa As VMContainer
    contbtnaa = vm.CreateContainer("contxaa", Me)
    contbtnaa.AddControlS(lbla1.Label, lbla1.tostring, 1, 1, 12, 12, 12, 12)
    '
    Dim lbla2 As VMLabel = vm.CreateLabel("").SetParagraph
    lbla2.SetText(vm.Rand_LoremIpsum(1))
    Dim contbtnba As VMContainer
    contbtnba = vm.CreateContainer("contxba", Me)
    contbtnba.AddControlS(lbla2.Label, lbla2.tostring, 1, 1, 12, 12, 12, 12)
    '
    Dim lbla3 As VMLabel = vm.CreateLabel("").SetParagraph
    lbla3.SetText(vm.Rand_LoremIpsum(1))
    Dim contbtnca As VMContainer
    contbtnca = vm.CreateContainer("contxc", Me)
    contbtnca.AddControlS(lbla3.Label, lbla3.tostring, 1, 1, 12, 12, 12, 12)
    
    Dim b1 As VMTabs = vm.CreateTabs("b1", Me).SetVertical(True).SetIconsAndText(True)
    b1.AddTab("b1", "Item 1", "mdi-phone",contbtnaa)
    b1.AddTab("b2", "Item 2", "mdi-access-point",contbtnba)
    b1.AddTab("b3", "Item 3", "mdi-account-box", contbtnca)
    b1.AddToContainer(cont, 4, 1)

Ta!

Mashiane · Nov 4, 2020

Updating Badge Value & Color

Add a tab with a badge and an initial value. The id of the badge is b2

B4X:

b.AddTabBadge("b2", "Item 2", "mdi-heart", contbtnb, "10")

Set the badge value to 15.

B4X:

Sub btnadd_click(e As BANanoEvent)
    vm.SetBadgeContent("b2", "15")
End Sub

Set the badge color to red

B4X:

Sub btncolor_click(e As BANanoEvent)
    vm.SetBadgeColor("b2", vm.COLOR_RED, vm.INTENSITY_NORMAL)
End Sub

Ta!

Mashiane · Nov 4, 2020

Simple Table

This is wrap around the <table> component

B4X:

st.Initialize(vue, "st1", "name", Me)
    st.SetFixedHeader(True)
    st.SetHeight("400px")
    st.AddColumn("name", "Name")
    st.AddColumn("calories", "Calories")
    st.SetDark(True)
    st.AddRow(CreateMap("name": "Frozen Yogurt", "calories": 159))
    st.AddRow(CreateMap("name": "Ice cream sandwich", "calories": 237))
    st.AddRow(CreateMap("name": "Eclair", "calories": 262))
    st.AddRow(CreateMap("name": "Cupcake", "calories": 305))
    st.AddRow(CreateMap("name": "Gingerbread", "calories": 356))
    st.AddRow(CreateMap("name": "Jelly bean", "calories": 375))
    st.AddRow(CreateMap("name": "Lollipop", "calories": 392))
    st.AddRow(CreateMap("name": "Honeycomb", "calories": 408))
    st.AddRow(CreateMap("name": "Donut", "calories": 452))
    st.AddRow(CreateMap("name": "KitKat", "calories": 518))
    cont.AddComponent(1,1, st.tostring)

Ta!

Mashiane · Nov 4, 2020

Version 4.47 BETA has been pushed for testing. This fixes a few bugs and with a new addition of the simple table.

Ta!

Mashiane · Nov 5, 2020

Button Variants in Data-Table

B4X:

dtButtons = vm.CreateDataTable("dtButtons", "name", Me)
    dtButtons.SetTitle("Button Variants")
    dtButtons.AddColumn("name", "Name")
    dtButtons.AddColumn("calories", "Calories")
    '
    dtButtons.AddButtonColumn("btnwarn", "Warning").SetButtonWarning("btnwarn")
    dtButtons.AddButtonColumn("btnerror", "Errors").SetButtonError("btnerror")
    dtButtons.AddButtonColumn("btnsuccess", "Success").SetButtonSuccess("btnsuccess")
    dtButtons.AddButtonColumn("btnsecondary", "Secondary").SetButtonSecondary("btnsecondary")
    dtButtons.AddButtonColumn("btnprimary", "Primary").SetButtonPrimary("btnprimary")
    dtButtons.AddButtonColumn("btnrounded", "Rounded").SetButtonRounded("btnrounded")
    dtButtons.AddButtonColumn("btnoutlined", "Outlined").SetButtonOutlined("btnoutlined").SetButtonPrimary("btnoutlined")
    '
    dtButtons.AddRow(CreateMap("name": "Frozen Yogurt", "calories": 159))
    dtButtons.AddRow(CreateMap("name": "Ice cream sandwich", "calories": 237))
    dtButtons.AddRow(CreateMap("name": "Eclair", "calories": 262))
    dtButtons.AddRow(CreateMap("name": "Cupcake", "calories": 305))
    dtButtons.AddRow(CreateMap("name": "Gingerbread", "calories": 356))
    dtButtons.AddRow(CreateMap("name": "Jelly bean", "calories": 375))
    dtButtons.AddRow(CreateMap("name": "Lollipop", "calories": 392))
    dtButtons.AddRow(CreateMap("name": "Honeycomb", "calories": 408))
    dtButtons.AddRow(CreateMap("name": "Donut", "calories": 452))
    dtButtons.AddRow(CreateMap("name": "KitKat", "calories": 518))
    dtButtons.AddToContainer(cont, 5, 1)

Trapping Events

B4X:

Sub dtButtons_btnoutlined(item As Map)
    vm.ShowSnackBarPrimary("Outlined...")
End Sub


Sub dtButtons_btnrounded(item As Map)
    vm.ShowSnackBarPrimary("Rounded...")
End Sub


Sub dtButtons_btnprimary(item As Map)
    vm.ShowSnackBarPrimary("Primary...")
End Sub


Sub dtButtons_btnsecondary(item As Map)
    vm.ShowSnackBarSecondary("Secondary...")
End Sub


Sub dtButtons_btnsuccess(item As Map)
    vm.ShowSnackBarSuccess("Success...")
End Sub


Sub dtButtons_btnwarn(item As Map)
    vm.ShowSnackBarWarning("Warning...")
End Sub

Sub dtButtons_btnerror(item As Map)
    vm.ShowSnackBarError("Error...")
End Sub

Ta!

Mashiane · Nov 19, 2020

Version 4.52 comes with DatePicker & TimePicker that has buttons, to be uploaded soon.

By default, when you select a date / time, the picker is closed and the selected date is stored.
Clicking Clear does not close the picker, it just clears the date / time
Clicking Ok will close the picker

Mashiane · Nov 20, 2020

Version 2.53 pushed and is now available.

Also check the BANanoVuetifyAD3 tutorial titled..

[BANanoVuetifyAD] Vuetify WebSites & WebApps with BANano for Dummies

Ta!

Mashiane · Nov 20, 2020

Version 2.54, download it here

Adding links to the data-table (check the Tables demo)

1. Define your records

B4X:

Dim images As List = vm.newlist
    images.add(CreateMap("image": "./assets/bird.jpg", "sendto":"mashy@gmail.com", "comment":"A bird seen from above", "lat":"16.0", "lng":"20.1", "datetaken":"1973-04-15"))
    images.add(CreateMap("image": "./assets/dark-beach.jpg", "sendto":"ozzie@gmail.com", "comment":"Seen whilst walking", "lat":"36.0", "lng":"24.8", "datetaken":"2003-02-27"))
    images.add(CreateMap("image": "./assets/planet.jpg", "sendto":"orio@gmail.com", "comment":"A need to visit planets", "lat":"1.0", "lng":"1.1", "datetaken":"2009-04-01"))
    images.add(CreateMap("image": "./assets/sky.jpg", "sendto":"ernesto@gmail.com", "comment":"A beautiful skyline", "lat":"0", "lng":"0", "datetaken":"2010-04-24"))
    images.add(CreateMap("image": "./assets/squirrel.jpg", "sendto":"tgifzone.inc@gmail.com", "comment":"Nutting around", "lat":"45", "lng":"30", "datetaken":"2010-09-02"))

The anchor data-item in these records is the sendto field

2. Add columns to the data-table

B4X:

....
....
dtImages.AddLink("sendto", "Email To", "_blank")
dtImages.SetColumnPrefix("sendto", "mailto:")
....
....

We add the sendto field as a link, the target for it is _blank. This means you open a new blank browser tab.
However we want this link to activate the default mail sending application, so we set the prefix to be added to each href with mailto:

When the application is being ran...

Mashiane · Feb 2, 2021

BVAD3 is now out of BETA.

There are tutorials here on how to use it to create websites / webapps.

[BANanoVuetifyAD3] Create Professional Looking Vuetify WebSites & WebApps with BANano

Ola ************************************************** Feb 2024: BVAD3 RoadMap https://www.b4x.com/android/forum/threads/bananovuetifyad3-2024-roadmap.159326/ ************************************************* Download Additional Libraries Download BANanoVuetifyAD3Core Library OR Download...

www.b4x.com

Remember, BVAD3 is MIT licensed. Do whatever it is with it to your hearts desire.

Please note for new projects, use BVAD3 and not this version. This is like a father to BVAD3.

NGUYEN TUAN ANH · May 10, 2022

Could you please help me, How to add overlay image to map in leaflet ?

Mashiane · May 10, 2022

NGUYEN TUAN ANH said:
Could you please help me, How to add overlay image to map in leaflet ?

Please always start a new thread for your question.

NGUYEN TUAN ANH · May 10, 2022

Mashiane said:
Please always start a new thread for your question.

Ok, thanks your reply

B4J Library [BANanoVueMaterial]: The first complete opensource VueJS UX based framework for BANano

Mashiane

Expert

Mashiane

Expert

Mashiane

Expert

Mashiane

Expert

Mashiane

Expert

Mashiane

Expert

Mashiane

Expert

Mashiane

Expert

Mashiane

Expert

[BANanoVuetifyAD3] Create Professional Looking Vuetify WebSites & WebApps with BANano

NGUYEN TUAN ANH

Active Member

Mashiane

Expert

NGUYEN TUAN ANH

Active Member

Similar Threads