SithasoDaisy: Mashy Teaches TailwindCSS using b4x (with eBook)

Mashiane · Jan 11, 2023

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.

B4X:

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

Mashiane · Jan 18, 2023

Coming to V1.19 - SDUIJustGage

Mashiane · Jan 19, 2023

Coming to V1.19 - SDUIFluidMeter

Mashiane · Jan 20, 2023

Coming to V1.19 - SDUIToastChart

Ability to trap selected series events.

This is based on...

B4X:

'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 · Jan 23, 2023

Mashiane · Jan 23, 2023

Mashiane · Jan 23, 2023

Mashiane · Jan 30, 2023

2 Pages - No Drawer & No Navigation Bar

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

Mashiane · Feb 11, 2023

Coming Updates...

Table With Select

B4X:

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 · Feb 11, 2023

Upcoming Updates

Table with TextBox

B4X:

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

Mashiane · Feb 11, 2023

Upcoming Changes

Table with TextAea

B4X:

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

Mashiane · Feb 11, 2023

Upcoming Changes

Table with DatePicker & TimePicker

B4X:

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

Mashiane · Feb 17, 2023

Subscribe to B4J library updates

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

www.b4x.com

Mashiane · Feb 22, 2023

Writing a text file & download it.

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

Mashiane · Mar 23, 2023

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 · Apr 7, 2023

SDUITable has received a bottom navigation

Step 1

Feed it the list of items to add:

B4X:

tb1.SetItemsPaginate1(Items)

Step 2

Activate the navigation

B4X:

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

Jedt3D · Apr 10, 2023

Mashiane said:
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 · Apr 19, 2023

DatePicker will suppot locales.

B4X:

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 · Apr 19, 2023

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.

B4X:

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

Mashiane · Apr 19, 2023

How to set row text color?

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

B4X:

tb2.SetRowTextColor(0, "white")

SithasoDaisy: Mashy Teaches TailwindCSS using b4x (with eBook)

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Attachments

Expert

Expert

Expert

Expert

Expert

Expert

Attachments

Expert

Expert

New Member

SithasoDaisy TailwindCSS WebApps​

Expert

Expert

Expert

Similar Threads

Privacy & Transparency

Privacy & Transparency

SithasoDaisy TailwindCSS WebApps