Share My Creation [UOENow] Create beautiful Bootstrap 4 Websites with Now UI Kit+BANano

Download

Hi there

UOENow is a wrap of the beautiful theme from Creative Tim to create Bootstrap 4 websites. UONow wraps the Now UI kit around BANano for one to create beautiful things with this theme.

The attached video is the generation of the theme directly from Creative Tim, done to ensure that everything works the same.


You can view the Creative Tim Now UI Kit here, https://www.creative-tim.com/product/now-ui-kit

The download is a an uncompiled lib that you can run and it will open up the example page to generate the page. The code has been simplified as much as possible and one can use BANano methods to set/get elements, styles etc.

MIT License
Copyright (c) 2017 Creative Tim
Designed by Invision (https://www.invisionapp.com). Coded by Creative Tim (https://www.creative-tim.com/)
Permission Is hereby granted, free of charge, To any person obtaining a copy
of this software And associated documentation files (the "Software"), To deal
in the Software without restriction, including without limitation the rights
To use, copy, modify, merge, publish, distribute, sublicense, And/Or sell
copies of the Software, And To permit persons To whom the Software Is
furnished To Do so, subject To the following conditions:
The above copyright notice And this permission notice shall be included in all
copies Or substantial portions of the Software.

THE SOFTWARE Is PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS Or
IMPLIED, INCLUDING BUT Not LIMITED To THE WARRANTIES OF MERCHANTABILITY,
FITNESS For A PARTICULAR PURPOSE And NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS Or COPYRIGHT HOLDERS BE LIABLE For ANY CLAIM, DAMAGES Or OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT Or OTHERWISE, ARISING FROM,
OUT OF Or IN CONNECTION WITH THE SOFTWARE Or THE USE Or OTHER DEALINGS IN THE
SOFTWARE.

 

[Mashiane]

How can I use event?

Cool. When you create the elements, you can give them an id and the use the normal banano events for example.

BANano.GetElement("#button1").On("click", Me, "operatex")

This adding of events to elements SHOULD be done after the Page.Create call as Page.Create injects the html elements to the body element.

Then you can add the sub for the event like...

Sub operatex(e as bananoevent)
do xys
End Sub

 

[joulongleu]

Yes,Thank you so much.

 

[Mashiane]

So I wanted to add some badges to my icons and also add a dropdown avatar.

'add avatar
    Dim avatar As UOENowNavItemAvatar
    avatar.Initialize(App,"avatar","./assets/sponge.png","Anele Mbanga","","")
    avatar.AddAnchor("","My Profile","#","","")
    avatar.AddAnchor("","My Inbox","#","","")
    avatar.AddAnchor("","Timeline","#","","")
    avatar.AddAnchor("","Chats","#","","")
    avatar.AddDivider
    avatar.AddAnchor("","Logout","#","","")
    Page.NavBar.AddDropDownAvatar(avatar)

To add the badges, depending on whether there is an icon or not in an anchor, themeable badges using the current UOENowBadge was rather nice.

Also the avatar image can be changed. Below are some examples to set the badge numbers with themes and also with the avatar ability to change the border color to the theme you need. Setting the badges is ONLY possible after Page.Create.

'set twitter feeds number
    Page.SetBadge("twitter","10",App.EnumThemes.Primary)
    Page.SetBadge("facebook","3",App.EnumThemes.Success)   
    Page.SetBadge("instagram","5",App.EnumThemes.Warning)
    'set the border color for avatar
    Page.SetAvatarTheme("avatar", App.EnumThemes.Warning)
    'update the image
    Page.SetAvatarImage("avatar", "./assets/default-avatar.png")

 

[joulongleu]

Hi Mashiane:How to get TextBox value? Thank You.

 

[Mashiane]

How to get TextBox value?

Please see these example code snippets, I have added them to the next version of UOENow at the page component for later release.

https://www.b4x.com/android/forum/threads/banano-sharing-the-goodness.101271/#post-653133

Ta!

 

[joulongleu]

Thank you so much, I have solved the problem that has been confused, and UOEBANanoDemo.zip seems to have not been updated, I am looking forward to updating.

 

[Mashiane]

UOEBANanoDemo.zip seems to have not been updated

Yes I am very much aware. UOEBANano is a very huge project thus me updating and adding the more simple one page ATM membership app demo.

 

[FrancisJavier]

Hi Mashiene. I want to use Now ui kit, how can i add gridtable/table on a UOENowcontainer or Tabs?

 

[Mashiane]

Ohh my, your question that just reminded me that I have a client project that I did then and its using this library. It was a website project. I even forgot how this whole thing works now.

I think you will find your answer here, https://www.b4x.com/android/forum/threads/bananosql-crud-with-grid-modal-using-uoenow.106395/

Eish, this needs a completely re-write based on the abstract designer methodology. Shook!!!