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

roberto64

Active Member
Licensed User
Longtime User
Hello Mashiane , the double // have been fixed but nothing always the same error.
regards
 
Last edited:

Mashiane

Expert
Licensed User
Longtime User
Part 64 is out, We create floating action buttons and change the theme to dark at runtime.

Download



Changing the theme to dark is toggleable function:

We add a switch to the navbar and set its v-model/value to false.

B4X: 
'add switch to toggle theme
    Dim swtTheme As  VueElement = vappbar.AddSwitch("changetheme", "mytheme", "Theme", Null, Null, "", True, Null)
    swtTheme.MT = 6
    swtTheme.ML = 4
    vuetify.BindVueElement(swtTheme)
    vuetify.SetData("mytheme", False)

When its changed from true/false, we change the theme.

B4X: 
Sub changetheme_change(b As Boolean)
    vuetify.SetDarkTheme(b)
End Sub
 
Last edited:

Mashiane

Expert
Licensed User
Longtime User
Part 70 is out.

We install a new abstract designer based layout to make it easy to create projects.



Related Article

[BANanoVuetifyAD3] Implementing the new BVAD3 (1) B4X Project Template

Ola Download BVAD3 4.21+ b4xlib Copy this to your External B4J Libraries folder Download the Font Libraries (Roboto + MaterialDesignIcons) Copy these to your External B4J Libraries folder. After you create the project, ensure that these are referenced. Remember, if you want to use the...
www.b4x.com
 
Last edited:

Mashiane

Expert
Licensed User
Longtime User
Part 71 is out, we have started looking at Animations (incomplete), however

Download

What's new

1. The font resources have been moved out of core, if you want to host the fonts locally, use the provided library from the External Folders Libraries in Github.
What this means is that all examples before Tutorial 71 will work but the icons and fonts wont display well without referencing the library files. At most you need Roboto + Material Design icons. The rest are just for play.

So ensure that you have referenced the font resources. These are the libraries referenced by Tutorial 71.



So copy these to your b4j external resources folder.

2. The animation library is still work in progress so we are not talking about it as yet. So far all the tests are impressive. So dont use in production as yet until we provide more details. You will have to learn some animejs to get the drift.

Enjoy!

Reference

[BANano] BANanoFontLibraries - FontAwesome, Roboto, MaterialDesignIcons etc for LocalHosting

Ola In case you want to host your fonts locally, here are the font libraries. Usage. Download and copy the library of interest to your external libraries folder. Reference the library with your BANano library. Use the class names as per font to build your icons, use in app etc...
www.b4x.com
 
Last edited:

Mashiane

Expert
Licensed User
Longtime User
A thread has been created for all your animation needs.

[BANanoVuetifyAD3] Beginning WebApp Animations with BANanoAnimeJS

Ola This tutorial is related to BVAD3, however the library can be used separately outside of the BVAD3 namespace. As it is rather a specialized area for web development, we have created an own thread. AnimeJS is available here, https://animejs.com/ Get BANano Get BVAD3 Enjoy and have fun!
www.b4x.com

Have fun!
 
You must log in or register to reply here.

Similar Threads

  • Article
Share My Creation [BANanoVuetifyAD3] WhatsApp CRM
Replies
2
Views
2K
Dave G
D
  • Article
Share My Creation BANanoVuetifyAD3 - New Form Builder Concept
Replies
18
Views
4K
joulongleu
J
Mashy Teaches WebApp/Website Development with BANanoVuetifyAD3 - The New Series
7 8 9
Replies
163
Views
42K
Mashiane
  • Article
Share My Creation [BANAnoVuetifyAD3] Creating CRUD based WebApps free eBook (for those in a hurry)
2
Replies
25
Views
6K
Mashiane
  • Article
Share My Creation [BANanoVuetifyAD3] Organogram Lite FireBase WebApp Source Code @ $11
Replies
11
Views
2K
Mashiane
Menu
Log in
Register
Cookies are required to use this site. You must accept them to continue using the site. Learn more…