SithasoDaisy: Mashy Teaches TailwindCSS using b4x (with eBook)

[Mashiane]

Coming to V1.19 Using the SDUIEditor

Using the abstract designer, you just drop this to a layout and set properties.

To set & get its content, one uses the .Content method.

Private Sub SDUIEditor1_Changed (e As BANanoEvent)
    lblChanging.Caption = SDUIEditor1.Content
End Sub

 

[Mashiane]

Coming to V1.19 - SDUIJustGage

 

[Mashiane]

Coming to V1.19 - SDUIFluidMeter

 

[Mashiane]

Coming to V1.19 - SDUIToastChart

Ability to trap selected series events.

This is based on...

'sub to show the page
Sub Show(duiapp As SDUIApp)            'ignore
    'get the reference to the app
    app = duiapp
    'page.AddPage(Me, name)
    'page.Root.p(6)
    banano.LoadLayout(app.PageViewer, "adtchartlayout")
    SDUIToastChart1.AddCategories(Array("Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"))
    SDUIToastChart1.AddSeries("Budget", Array(5000, 3000, 5000, 7000, 6000, 4000, 1000))
    SDUIToastChart1.AddSeries("Income", Array(8000, 4000, 7000, 2000, 6000, 3000, 5000))
    SDUIToastChart1.AddSeries("Expenses", Array(4000, 4000, 6000, 3000, 4000, 5000, 7000))
    SDUIToastChart1.AddSeries("Debt", Array(3000, 4000, 3000, 1000, 2000, 4000, 3000))
    SDUIToastChart1.Refresh
    'build the page, via code or loadlayouts
    BuildPage
End Sub

 

[Mashiane]

 

[Mashiane]

 

[Mashiane]

 

[Mashiane]

2 Pages - No Drawer & No Navigation Bar

This example shows the build up of 2 pages with no drawer and no navigation bar.

 

[Mashiane]

Coming Updates...

Table With Select

Dim countries As List
    countries.Initialize 
    countries.Add("South Africa")
    countries.Add("USA")
    countries.Add("Nigeria")
    Dim options As Map = SDUIShared.ListToSelectOptions(countries)
tb4.AddColumnSelect("country", "Country", False, options)

 

[Mashiane]

Upcoming Updates

Table with TextBox

tb4.AddColumnTextBox("email", "Email", False)

 

[Mashiane]

Upcoming Changes

Table with TextAea

tb4.AddColumnTextARea("job", "Job Title", False, 5)

 

[Mashiane]

Upcoming Changes

Table with DatePicker & TimePicker

tb4.AddColumnDatePicker("dob", "Date of Birth", False, "Y-m-d", "F j, Y", False, False, False)

 

[Mashiane]

Subscribe to B4J library updates

Subscribe to this thread to be notified of B4J library updates.

www.b4x.com

 

[Mashiane]

Writing a text file & download it.

• Using the hamburger to show / hide drawer
• Creating a text file and downloading it.

 

[Mashiane]

Please redownload 1.31 (updated now), which addresses the locales for the FullCalendar and some other bug fixes.

Thanks

SithasoDaisy TailwindCSS UI Toolkit: Q & A

Hi there NB: Where possible, please include a simple project that demonstrates your use case. Do you have any questions about SithasoDaisy UI Toolkit? You can shoot it here and we will oblige. Thanks in advance? Join on Telegram https://t.me/sithasodaisy Check $5 WebApps...

www.b4x.com

 

[Mashiane]

SDUITable has received a bottom navigation

Step 1

Feed it the list of items to add:

tb1.SetItemsPaginate1(Items)

Step 2

Activate the navigation

Private Sub tb1_ChangePage (data As List, Pagination As Object)
    tb1.SetItems(data)
End Sub

 

[Jedt3D]

Get SithasoDaisy for $15 here.

Welcome to the SithasoDaisy world.



Get the eBook
See it in action on Netlify or
See it from a FlipBook

SithasoDaisy is a library of components built on top of TailwindCSS and the DaisyUI frameworks to help you create WebApps, WebSites, Single Page Application (SPA) and Progressive Web Apps (PWA) with the power of the b4x programming language.

When it comes to developing anything that works on the internet browser, whether it is a WebApp or a WebSite, one has to use HTML (Hyper Text Markup Language), CSS (Cascading Style Sheet) and JavaScript (a dynamic programming language used for web development).


SithasoDaisy works on top of a programming language called b4x. It is not JavaScript, and for SithasoDaisy to produce web applications, a code transpiler is used. A transpiler converts source code from one programming language to another. For example, when one uses Flutter for web, they use a programming language called Dart. When they build their application, their source code is transpiled / converted to JavaScript for it to work on the interweb. There are many other programming languages that target JavaScript, the Top 10, being:

1. Scala.js
2. Haxe
3. Dart
4. Elm
5. Imba
6. Nim
7. ClojureScript
8. ReasonML
9. Kotlin
10. TypeScript

B4X is a set of programming tools that is developed by Anywhere Software that uses Visual Basic like syntax so that anyone who wants to, can create apps. The developed apps are able to run on Windows, Linux, Mac, Apple Phones, Android Phones and Arduino IoT devices, mostly from the same code base. The family product we will use here is called b4j i.e., Basic4Java. There is also b4a (basic4android), b4i (basic4ios), b4r (basic4arduino).

Our b4x to JavaScript transpiler is called BANano. It is penned by Alain Bailleul, that is the BA in BANano, whilst Nano, you guessed it right, nanotechnology. When creating your web projects with SithasoDaisy, one can use the Abstract Designer and or write b4x code. We will show you how. To show you an idea of the stuff we will be building, let’s take a look at this image, directly from the DaisyUI website.

.....

This is an extract from the eBook.

Happy Coding

Github Link: https://github.com/Mashiane/SithasoDaisyUI

SithasoDaisy TailwindCSS WebApps​

Subscribe to SithasoDaisy TailwindCSS WebApps and get a WebApp each month of the year.

Visit https://sithasoholdings.gumroad.com/l/vwaqj to activate your subscription.

Thank you so much.

Paid
Like the idea and it'd be a fun project for me. Great work @Mashiane

 

[Mashiane]

DatePicker will suppot locales.

ar: Arabic,
        at: Austria,
        az: Azerbaijan,
        be: Belarusian,
        bg: Bulgarian,
        bn: Bangla,
        bs: Bosnian,
        ca: Catalan,
        ckb: Kurdish,
        cat: Catalan,
        cs: Czech,
        cy: Welsh,
        da: Danish,
        de: German,
        en: english,
        eo: Esperanto,
        es: Spanish,
        et: Estonian,
        fa: Persian,
        fi: Finnish,
        fo: Faroese,
        fr: French,
        gr: Greek,
        he: Hebrew,
        hi: Hindi,
        hr: Croatian,
        hu: Hungarian,
        hy: Armenian,
        id: Indonesian,
        is: Icelandic,
        it: Italian,
        ja: Japanese,
        ka: Georgian,
        ko: Korean,
        km: Khmer,
        kz: Kazakh,
        lt: Lithuanian,
        lv: Latvian,
        mk: Macedonian,
        mn: Mongolian,
        ms: Malaysian,
        my: Burmese,
        nl: Dutch,
        nn: NorwegianNynorsk,
        no: Norwegian,
        pa: Punjabi,
        pl: Polish,
        pt: Portuguese,
        ro: Romanian,
        ru: Russian,
        si: Sinhala,
        sk: Slovak,
        sl: Slovenian,
        sq: Albanian,
        sr: Serbian,
        sv: Swedish,
        th: Thai,
        tr: Turkish,
        uk: Ukrainian,
        vn: Vietnamese,
        zh: Mandarin,
        zh_tw: MandarinTraditional,
        uz: Uzbek,
        uz_latn: UzbekLatin

 

[Mashiane]

How to set table row color?

We want to set the row color for the first row to red.

We load the records to the table and then we set the color to red or whatever color we want.

banano.Await(tb2.SetItems(Items))
    tb2.SetRowBackgroundColor(0, "red")

 

[Mashiane]

How to set row text color?

We set the text color of the 1st row to white

tb2.SetRowTextColor(0, "white")