TailwindCSS WebApps

using B4X

SithasoDaisy v1.16

by Anele 'Mashy' Mbanga.

 TailwindCSS WebApps using B4X

Table of contents

Introduction ............................................................................................................... 7
Getting Started .......................................................................................................... 8
New to B4x? ............................................................................................................ 15
Project Templates .................................................................................................... 15
SithasoFree.......................................................................................................... 16
SithasoDrawer ..................................................................................................... 18
SithasoCanvas...................................................................................................... 20
SithasoMultiUser .................................................................................................. 22
Creating WebApps .................................................................................................... 26
Creating a Project ................................................................................................ 26
Creating a Page ................................................................................................... 30
Creating a Grid..................................................................................................... 35
Abstract Designer ................................................................................................. 36
Adding Components ............................................................................................. 42
Handling Events ................................................................................................... 42
Abstract Designer DeepDive.................................................................................. 47
Repetitive Layouts ................................................................................................ 50
Components............................................................................................................. 53
Alerts .................................................................................................................. 54
Abstract Designer............................................................................................. 54
Animations .......................................................................................................... 56
Art Board ............................................................................................................. 56
Abstract Designer............................................................................................. 57
Avatars ................................................................................................................ 58
Abstract Designer............................................................................................. 59
Badges ................................................................................................................ 61
Abstract Designer............................................................................................. 61
Bread Crumbs ...................................................................................................... 64
Abstract Designer............................................................................................. 64
Buttons ............................................................................................................... 64
Abstract Designer............................................................................................. 67
Buttons - Gradients .............................................................................................. 68
Button Groups ..................................................................................................... 68
Abstract Designer............................................................................................. 69
Bottom Nav ......................................................................................................... 71
Abstract Designer............................................................................................. 71
Cards .................................................................................................................. 71
Abstract Designer............................................................................................. 75
Carousel .............................................................................................................. 80
Abstract Designer............................................................................................. 81
Chat .................................................................................................................... 81
Abstract Designer............................................................................................. 82
CheckBox ............................................................................................................ 83

2 / 331
 TailwindCSS WebApps using B4X

Abstract Designer............................................................................................. 83
Code ................................................................................................................... 84
Abstract Designer............................................................................................. 84
Collapse............................................................................................................... 85
Abstract Designer............................................................................................. 86
Divider ................................................................................................................ 87
Abstract Designer............................................................................................. 88
Drawer ................................................................................................................ 90
Drop Down .......................................................................................................... 94
Abstract Designer............................................................................................. 95
Existing Blocks ..................................................................................................... 96
File Input ............................................................................................................. 97
FileInputProgress ............................................................................................. 98
FileInputCamera .............................................................................................. 98
Abstract Designer............................................................................................. 99
Footer ................................................................................................................100
Abstract Designer............................................................................................101
Gradients ............................................................................................................102
Hero ...................................................................................................................103
Abstract Designer............................................................................................105
Indicators ...........................................................................................................108
Abstract Designer............................................................................................109
Kbd ....................................................................................................................111
Abstract Designer............................................................................................112
Links ..................................................................................................................113
Abstract Designer............................................................................................114
Lists ...................................................................................................................115
Abstract Designer............................................................................................115
ListView ..............................................................................................................116
Abstract Designer............................................................................................116
Mask ..................................................................................................................116
Abstract Designer............................................................................................117
Menus ................................................................................................................120
Abstract Designer............................................................................................122
Modal .................................................................................................................122
Abstract Designer............................................................................................123
Login Modal ....................................................................................................123
NavBar ...............................................................................................................125
Abstract Designer............................................................................................125
Options Card.......................................................................................................127
Abstract Designer............................................................................................127
Phone.................................................................................................................127
Abstract Designer............................................................................................128
Progress .............................................................................................................128

3 / 331
 TailwindCSS WebApps using B4X

Abstract Designer............................................................................................129
Radial Progress ...................................................................................................130
Abstract Designer............................................................................................131
Radio .................................................................................................................133
Abstract Designer............................................................................................133
Range ................................................................................................................134
Abstract Designer............................................................................................134
Rating ................................................................................................................135
Abstract Designer............................................................................................135
Stack ..................................................................................................................136
Abstract Designer............................................................................................137
Stat ....................................................................................................................141
Abstract Designer............................................................................................142
Select .................................................................................................................143
Abstract Designer............................................................................................143
Steps ..................................................................................................................144
Abstract Designer............................................................................................146
Swap ..................................................................................................................146
Abstract Designer............................................................................................147
Tabs ...................................................................................................................148
Abstract Designer............................................................................................148
Typography ........................................................................................................150
Abstract Designer............................................................................................151
TextBox ..............................................................................................................151
Abstract Designer............................................................................................154
TextArea.............................................................................................................156
Abstract Designer............................................................................................157
Time Lines ..........................................................................................................158
Abstract Designer............................................................................................159
Toast..................................................................................................................159
Abstract Designer............................................................................................160
ToolTip ...............................................................................................................160
Abstract Designer............................................................................................161
Table ..................................................................................................................161
Table1 ............................................................................................................162
Table2 ............................................................................................................162
Table3 ............................................................................................................163
Table4 ............................................................................................................163
Abstract Designer............................................................................................164
Toggle ................................................................................................................165
Abstract Designer............................................................................................165
Video..................................................................................................................167
Abstract Designer............................................................................................167
Window ..............................................................................................................167

4 / 331
 TailwindCSS WebApps using B4X

Abstract Designer............................................................................................167
PlugIns ...............................................................................................................168
QRCode ..........................................................................................................168
Abstract Designer .......................................................................................168
QRCode/Barcode Scanner ................................................................................169
Abstract Designer .......................................................................................170
WebCam ........................................................................................................171
Abstract Designer .......................................................................................172
Sweet Alert .....................................................................................................174
Lottie Player ...................................................................................................176
Abstract Designer .......................................................................................176
FlatPick DateTimePicker ..................................................................................177
Abstract Designer .......................................................................................178
Roll DateTimePicker ........................................................................................181
Abstract Designer .......................................................................................182
FullCalendar ...................................................................................................183
Abstract Designer .......................................................................................184
PropertyTable .................................................................................................184
Abstract Designer .......................................................................................186
SignaturePad ..................................................................................................187
Abstract Designer .......................................................................................187
DocxTemplator ...............................................................................................188
API .........................................................................................................................189
Alert ...................................................................................................................189
Art Board ............................................................................................................191
Avatar ................................................................................................................192
Badge.................................................................................................................194
Bar Code Reader .................................................................................................196
Bottom Nav ........................................................................................................197
Bread Crumbs .....................................................................................................198
Button ................................................................................................................200
Button Group ......................................................................................................203
Card ...................................................................................................................204
Carousel .............................................................................................................207
ChartKick ............................................................................................................208
Chat ...................................................................................................................212
Checkbox............................................................................................................214
Col .....................................................................................................................216
Collapse Panels ...................................................................................................218
Div .....................................................................................................................219
Divider ...............................................................................................................244
Drawer ...............................................................................................................245
Drop Down .........................................................................................................247
DocxTemplator ...................................................................................................250
File Input ............................................................................................................250
Flex ....................................................................................................................253

5 / 331
 TailwindCSS WebApps using B4X

Footer ................................................................................................................256
FullCalendar ........................................................................................................257
Grid ....................................................................................................................259
Hero ...................................................................................................................262
Image ................................................................................................................263
Indicator.............................................................................................................265
Kbd ....................................................................................................................266
Label ..................................................................................................................268
Link ....................................................................................................................270
List .....................................................................................................................271
List View .............................................................................................................272
Lottie Player .......................................................................................................273
Menu ..................................................................................................................275
Mockup Code ......................................................................................................277
Mockup Phone ....................................................................................................278
Mockup Window ..................................................................................................279
Modal .................................................................................................................280
Nav Bar ..............................................................................................................283
Options Card.......................................................................................................285
Page ..................................................................................................................286
Progress .............................................................................................................288
QRCode ..............................................................................................................290
RadialProgress ....................................................................................................291
RadioGroup.........................................................................................................292
Range ................................................................................................................295
Rating ................................................................................................................297
Row ...................................................................................................................299
Select .................................................................................................................301
SignaturePad ......................................................................................................304
Stats ..................................................................................................................306
Steps ..................................................................................................................308
Swap ..................................................................................................................309
Table ..................................................................................................................310
Tabs ...................................................................................................................315
TextArea.............................................................................................................316
TextBox ..............................................................................................................318
Toast..................................................................................................................322
Toggle ................................................................................................................324
Tooltip ................................................................................................................326
Webcam .............................................................................................................327
Demos with Source Code .........................................................................................328
Calculator ...........................................................................................................328
Expense Tracker (PocketBase) .............................................................................329
fetch REST API (English to Minion Tanslato) .........................................................329
LZString Compression ..........................................................................................330
WebScraping ......................................................................................................330
Xylophone ..........................................................................................................330
User Onboarding .................................................................................................330

6 / 331
 TailwindCSS WebApps using B4X

Introduction

Welcome to the SithasoDaisy world.

SithasoDaisy is a library of components built on top of TailwindCSS (Tailwind Labs) and DaisyUI (Pouya
Saadeghi) 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.

7 / 331
 TailwindCSS WebApps using B4X

• We have created this FlipBook so that you can skim all the available components.
• A running demo is available on Netlify. This covers both writing code and abstract designer based
functionality.
• One can get the source code of the demo is in this Github repo.

With a 64-bit Windows PC, let's get started.

Getting Started

To be able to start developing using B4X, one needs the b4j IDE (Integrated Development Environment.
This at the moment only runs on a Windows PC. One also needs the Java SDK. Figure 1 below depicts how
the B4X IDE looks like. We have a menu, a toolbar, the coding area and a module listing area, to mention
the few.

1. The B4J IDE

8 / 331
 TailwindCSS WebApps using B4X

2. Creating Folders

Let's set up our PC for development. We need to set up a folder structure first.

1. In your Windows PC, create the following folder structure:

(a) c:\b4j\libraries
(b) c:\b4j\shared
(c) c:\b4j\workspace
(d) c:\b4j\java

This should look like:

3. Downloading and installing B4J

9 / 331
 TailwindCSS WebApps using B4X

1. Head over to Anywhere Software Website and download b4j. You can click here to do that.
2. Click on Download B4J Full Version (64-BIT). After you download, ensure you install the application.

3. Also download the recommended OpenJDK 11. You can get it here. Unpack it to c:\b4j\java, you should
have

4. Download BANano

You will also need BANano. This is a b4j plugin. Click here to get it and unpack it. It should have this
content.

In the BANano download copy the contents of the Libraries folder to c:\b4j\libraries.

5. Download SithasoDaisy

From your SithasoDaisy download.

10 / 331
 TailwindCSS WebApps using B4X

5.1 Copy the SithasoDaisy.b4xlib to c:\b4j\libraries. You now should have. Also copy the contents of the
b4xtemplates folder to c:\libraries.

5.1 Unpack SithasoCanvas.zip, SithasoDaisyDemo.zip, SithasoMultiUser and SithasoDrawer.zip to

c:\b4j\workspace. You now should have, etc

11 / 331
 TailwindCSS WebApps using B4X

6. B4J Paths Configuration.

Start B4J, in the menu, click on 6.1 Tools then Configure Paths.

Click on the browse buttons to select the respective file and paths specified below.

Then click Ok, to save your configuration.

7. Testing B4J IDE readiness

Click on File > New > UI

12 / 331
 TailwindCSS WebApps using B4X

Click on Browse and ensure that the Project folder is C:\b4j\workspace

Type in a project name, for example, IDETest and click Ok.

This should open up the IDE with some template code. Press F5, this should compile your app and show a
screen.

Click on the Click Me button. It should show a Message Box.

13 / 331
 TailwindCSS WebApps using B4X

Congratulations, you have just ran your first b4j developed java application with b4x. You can close the
App and the IDE.

Let's now run the other applications in our workspace folder which are TailwindCSS based, for this we will
need a development WebServer. I like the ease of use of Laragon. It comes with MySQL and other lovely
stuff.

8. Installing a WebServer (optional)

Download it from here and run it. After installation run it, it should look similar to this screen. You can
also set it up to use SSL and different ports.

14 / 331
 TailwindCSS WebApps using B4X

New to B4x?

If you are new to B4x, going through the guidelines would help you a great deal. There is also Video
Material done by Erel, who is the author of the b4x ecosystem.

1. Get all the guides here, these speak to:

1.1. B4x language

1.2. B4x IDE
1.3. B4x Visual Designer / Abstract Designer

and many other useful information.

2. To understand how the BANano transpiler works, read the BANano Essentials Booklet

3. You can also join the wonderful community of other coders like you.

Now let's get back to our topic, Creating WebApps with SithasoDaisy. We will first explain the project
templates.

Project Templates

SithasoDaisy comes with 4 source code templates for you to create WebApps. These are SithasoFree,
SithasoDrawer, SithasoCanvas and SithasoMultiUser. These project templates are created using the
abstract designer.

• Use SithasoFree as a base for completely empty projects that you design from scratch.
• Use SithasoDrawer as a base for projects with a top navigation bar and a drawer.
• Use SithasoCanvas (a thin version of SithasoDrawer) as a base for projects that you will start from
scratch that has empty drawer & navbar

15 / 331
 TailwindCSS WebApps using B4X

• Use SithasoMultiUser as a base for projects with navigation bar, drawer, login screen, forgot password
screen, sign up screens. This is useful for an app with multiple users

All these templates are accessible from File > New menu and also from the downloads.

These are set to run on localhost. This is done in the config.properties in each of the projects.
The projects are also set up to save the transpiled javascript, css and html files to c:\www\laragon.

These need to be changed to suit your needs if you are not using laragon and also using different port
numbers.

SithasoFree
1. Open the c:\b4j\workpace\SithasoFree folder
2. Double click the SithasoFree.b4j file. This is a b4j project file. This will activate b4j.
3. Press F5 to run the application. This will also transpile your code to JavaScript, CSS, HTML etc

After compilation, you should see this app in action on your default web browser. As the app is empty,
nothing will be shown on your page.

16 / 331
 TailwindCSS WebApps using B4X

The name of this app is "sithasofree". This is defined in the Main code module.

To access the transpiled source code (javascript, css and html) that resulted with what you see in the
browser, head over to the c:\laragon\www\sithasofree folder.

This contains all the stuff that you can deploy to your public webserver when you are finished developing
your webapp.

17 / 331
 TailwindCSS WebApps using B4X

SithasoDrawer
1. Open the c:\b4j\workpace\SithasoDrawer folder
2. Double click the SithasoDrawer.b4j file. This is a b4j project file. This will activate b4j.
3. Press F5 to run the application. This will also transpile your code to JavaScript, CSS, HTML etc

18 / 331
 TailwindCSS WebApps using B4X

After compilation, you should see this app in action on your default web browser.

The name of this app is "sithasodrawer". This is defined in the Main code module.

To access the transpiled source code (javascript, css and html) that resulted with what you see in the
browser, head over to the c:\laragon\www\sithasodrawer folder.

This contains all the stuff that you can deploy to your public webserver when you are finished developing
your webapp.

As you have noted above, this template has 3 things, these being:

19 / 331
 TailwindCSS WebApps using B4X

1. NavBar
2. Drawer
3. PageViewer

SithasoCanvas
1. Open the c:\b4j\workpace\SithasoCanvas folder
2. Double click the SithasoCanvas.b4j file. This is a b4j project file. This will activate b4j.
3. Press F5 to run the application. This will also transpile your code to JavaScript, CSS, HTML etc

After compilation, you should see this app in action on your default web browser. Click the hamburger or
menu.

20 / 331
 TailwindCSS WebApps using B4X

The name of this app is "sithasocanvas". This is defined in the Main code module.

21 / 331
 TailwindCSS WebApps using B4X

To access the transpiled source code (javascript, css and html) that resulted with what you see in the
browser, head over to the c:\laragon\www\sithasocanvas folder.

This contains all the stuff that you can deploy to your public webserver when you are finished developing
your webapp.

SithasoMultiUser
1. Open the c:\b4j\workpace\SithasoMultiUser\B4j folder
2. Double click the SithasoMultiUser.b4j file. This is a b4j project file. This will activate b4j.
3. Press F5 to run the application. This will also transpile your code to JavaScript, CSS, HTML etc

22 / 331
 TailwindCSS WebApps using B4X

After compilation, you should see this app in action on your default web browser. This has the complete
user cycle for (a) sign in, (b) sign up, (c) forgot password and (d) access the app.

23 / 331
TailwindCSS WebApps using B4X

24 / 331
 TailwindCSS WebApps using B4X

The name of this app is "sithasomultiuser". This is defined in the Main code module.

To access the transpiled source code (javascript, css and html) that resulted with what you see in the
browser, head over to the c:\laragon\www\sithasomultiuser folder.

This contains all the stuff that you can deploy to your public webserver when you are finished developing
your webapp.

25 / 331
 TailwindCSS WebApps using B4X

Creating WebApps

To create a webapp, use either SithasoFree, SithasoDrawer , SithasoCanvas or SithasoMultiUser project

as your base. As your WebApp will possibly have a number of pages, you will use Code Modules to create
the pages. Each page should be unique, including its name, title, layout and possibly its icon.

As you saw previously, both these templates provides different structured apps. Let's create an app using
these.

Creating a Project
1. Start B4J.
2. Click File
3. Click New
4. Click SithasoFree / SithasoDrawer / SithasoCanvas / SithasoMultiUser. SithasoDrawer is a 3 page project
whilst SithasoCanvas has no additional pages. SithasoMultiUser supports multiple user scenarios with Sign
In, Sign Up, Forgot Password screens etc.

A prompt screen will appear. Type in the Project Name and click Ok

26 / 331
 TailwindCSS WebApps using B4X

The main starting point of the app when it runs is the Main code module. As soon as you press F5 to run
the app, the AppStart sub routine will fire. This will then fire the BANano_Ready method.

Banano_Ready executes code pgIndex.Initialize, which is where our app structure is built. This involves
building our pages, the navigation bar, drawers and other things. One can then use these templates to
add more pages to the app and the provided templates will provide guidance.

Basically, in the code modules, we have a BlankLayout template and other pages. The BlankLayout is used
to create other pages. You can double click any of the pages to activate it.

The structure of each page is almost the same. These methods / subs are COMPULSOY

BuildPage - code to build the HTML of the page

27 / 331
 TailwindCSS WebApps using B4X

getIcon - the icon you specify for the page.

getName - the name you specify for the page
getTitle - the name you specify for the page
Process_Globals - definition of global variables for the page
Show - method to show the page

You can see the Creating a Page section on how to add Pages to your project.

Anyway, in creating each of our web-apps, we will follow this methodology.

28 / 331
 TailwindCSS WebApps using B4X

One can use the abstract designer to place components or create them via code. The main controller
when it comes to our app is the pgIndex code module. In it:

1. The base layout is loaded. This might have the main navigation bar and drawer of your app.
2. Other pages added on the app are linked to the drawer in this module.
3. The toggling of the drawer is done via the hamburger on this page.
4. Other nav-bar functionality can be added on this page.
5. The footer / bottom nav of your app can be added on this page.

If for example a page you add will be accessed via the drawer, it needs to be added in this method in
pgIndex.

You can explore the SithasoDemo source code on how most of this coding was done for more
understanding.

29 / 331
 TailwindCSS WebApps using B4X

Creating a Page
With your b4j project opened. If not opened, double click the .bjl file of your project.

Step 1 - Creating a new Code Module

1. Click on Project in the Menu

2. Click Add New Module
3. Click on Code Module

4. Type in the code module name and click Ok. The name should not have spaces or special characters.

We typed in demoADLottiePlayer as a code module name (example), the code module is then created.

30 / 331
 TailwindCSS WebApps using B4X

Now what we need to do is copy the page template to this code module

Step 2 - Copying the Page Template code from "BlankLayout"

In the Modules tab, locate the "BlankLayout" code module. This has the structure of the code needed for
any page you can create in the app. Double click the Module to activate it.

Select and copy all this code (Ctr + A) as is to the newly created code module. Do not change anything on
the BlankLayout code module. Paste the code to our new code module.

31 / 331
 TailwindCSS WebApps using B4X

Step 3 - Giving the Page a Name, Title, Icon & Layout to load.

On the newly created code module, we need to make the page unique. To do this we will change 4 items
in it on the code we pasted. This data is compulsory per page in your WebApp.

1. name - change the name string from "adblank" to be your unique page name.
2. title - change the title of the page from "AD Blank" to be something more catchier.
3. icon - change the icon also to be unique. FontAwesome is the default integrated font family. You can
search for an icon there, https://fontawesome.com/
4. In the Show sub-routine, change the layout name from adblanklayout to be your unique layout name.
Usually, I just use the name + "layout" here.

As an example, below, we have updated the code for our page to be like this:

32 / 331
 TailwindCSS WebApps using B4X

Note the following:

1. The code module name has been named in such a way that we know which page it is.
2. The name of the page on the code, title, icon and layout name on the BANano.LoadLayout code line
has been named clearly and properly.

Step 4 - Copying the Page Layout from "adblanklayout"

Now we need to ensure that the view/layout of our page exist. We will create it from an existing .bjl file.

Copy the layout name e.g., "adlottieplayelayout" from the show sub.
In the Files tab, locate the adblanklayout.bjl file and open it.

Click on File > Save As

In the prompt that follows, paste the layout name you copied and click Ok.

33 / 331
 TailwindCSS WebApps using B4X

Now, on the Views Tree, click "page", to activate the custom view.

In the property bag for the page, change the "Page Name*" to EXACTLY MATCH the name you used in the
code module. For example.

This part below should remain UNCHANGED, i.e Name should ALWAYS be page

Save you changes.

34 / 331
 TailwindCSS WebApps using B4X

Creating a Grid
A grid is used to place components on your page. These could be textboxes, images, labels etc. Before the
components are placed, this grid needs to be defined. SithasoDaisy has a grid system that is based on the
Bootstrap grid. This has "invisible" rows and columns. Each row can have 12 columns. Columns can span
to a number of other columns. Below is a grid with 15 rows and in each row, we have 1 or more columns
that span.

Let's explain how this structure was created by looking at each row, based on the following b4x code.

Each row/column is allocated a unique id when the grid is built. Let's look at the rows.

R1 - In this row we have a row with 1 column named R1C1. This was created with
.AddRows1.AddColumns12. This adds 1 row and within that row add a column that will span 12 spaces.
So, all calls that start with AddRows? are for adding rows and all the ones with AddColumns? are for
adding columns within a row.

R2 - In this row we have a row with 2 columns named R1C1 and R1C2. This was created with
.AddRows1.AddColumns11.AddColumns1 - this adds 1 row and within that row two columns. The first

35 / 331
 TailwindCSS WebApps using B4X

column R1C1 spans 11 spaces whilst the other column spans 1 space. 11+1=12.

R3 - Here we have used AddColumns10.AddColumns2. This makes 1 column span 10 and the other 2.
10+2=12.

etc
...

R13 - In this row we have 3 columns. We have used. AddColumns6.AddColumn3.AddColumns3. 6+3+3=12

If the sum of columns exceeds 12, the columns that exceed 12 will be wrapped to the following row.

Looking at the HTML

This is the HTML definition of r1 (row 1) and r2 (row 2) below. In the first row, we have a column that
spans 12 spaces across all devices and in the second row, we have two columns, one spanning 11 and
another spanning 1.

Abstract Designer
One can access the abstract designer by clicking Designer in the menu.

Adding Components to the Abstract Designer Layout

The components in the design above were added by:

1. Right click on the empty abstract design canvas.

2. Click Add View
3. Click CustomView, then select an SDUI component from the list.

36 / 331
 TailwindCSS WebApps using B4X

At the bottom right part of the b4j IDE, you will find tabs. These provide access to the resources of your
project.

In the files tab, you will notice there a bjl files (SithasoDemo). These are the abstract designer files. You
can click on Open Designer to open that file and drop elements to it.

Please refer to the New to B4x? section for more details about how the whole b4x ecosystem works as
that is beyond the scope of this eBook.

Creating Grids

We can also achieve grid creation by also using the abstract designer. Inside a page we add rows and
columns. We can then later add components to these columns. Items in the abstract designer are placed
inside others, establishing a parent child relationship. To create a grid in the abstract designer, one will
use SDUIRow and SDUIColumn components.

37 / 331
 TailwindCSS WebApps using B4X

The ouput will be.

Below are the properties that have been set for each of the components placed in the abstract designer.

SDUIPage.page
Properties
Property Value
Page Name* adgridx
Flex false
Flex Wrap false
Gap 6
Paddings a=5; x=?; y=?; t=?; b=?; l=?; r=?

SDUIRow.R1
Properties
Property Value
ParentID adgridx

SDUICol.R1C1
Properties
Property Value
ParentID R1
Caption R1C1 (12)
Sizes xs=12; sm=12; md=12; lg=12; xl=?
Bg Color blue
Bg Color Intensity 600
Height 10

38 / 331
 TailwindCSS WebApps using B4X

Property Value
Text Color white

SDUIRow.R2
Properties
Property Value
ParentID adgridx

SDUICol.R2C1
Properties
Property Value
ParentID R2
Caption R2C1 (11)
Sizes xs=12; sm=12; md=11; lg=11; xl=?
Bg Color blue
Bg Color Intensity 600
Height 10
Text Color white

SDUICol.R2C2
Properties
Property Value
ParentID R2
Caption R2C2 (1)
Sizes xs=12; sm=12; md=1; lg=1; xl=?
Bg Color orange
Bg Color Intensity 600
Height 10
Text Color white

SDUIRow.R3
Properties
Property Value
ParentID adgridx

SDUICol.R3C1
Properties
Property Value
ParentID R3
Caption R3C1 (10)
Sizes xs=12; sm=12; md=10; lg=10; xl=?
Bg Color blue
Bg Color Intensity 600
Height 10
Text Color white

SDUICol.R3C2
Properties
Property Value
ParentID R3
Caption R3C2 (2)

39 / 331
 TailwindCSS WebApps using B4X

Property Value
Sizes xs=12; sm=12; md=2; lg=2; xl=?
Bg Color orange
Bg Color Intensity 600
Height 10
Text Color white

SDUIRow.R4
Properties
Property Value
ParentID adgridx

SDUICol.R4C1
Properties
Property Value
ParentID R4
Caption R4C1 (9)
Sizes xs=12; sm=12; md=9; lg=9; xl=?
Bg Color blue
Bg Color Intensity 600
Height 10
Text Color white

SDUICol.R4C2
Properties
Property Value
ParentID R4
Caption R4C2 (3)
Sizes xs=12; sm=12; md=3; lg=3; xl=?
Bg Color orange
Bg Color Intensity 600
Height 10
Text Color white

SDUIRow.R5
Properties
Property Value
ParentID adgridx

SDUICol.R5C1
Properties
Property Value
ParentID R5
Caption R5C1 (6)
Sizes xs=12; sm=12; md=6; lg=6; xl=?
Bg Color blue
Bg Color Intensity 600
Height 10
Text Color white

SDUICol.R5C2

40 / 331
 TailwindCSS WebApps using B4X

Properties
Property Value
ParentID R5
Caption R5C2 (6)
Sizes xs=12; sm=12; md=6; lg=6; xl=?
Bg Color orange
Bg Color Intensity 600
Height 10
Text Color white

SDUIRow.R6
Properties
Property Value
ParentID adgridx

SDUICol.R6C1
Properties
Property Value
ParentID R6
Caption R6C1 (2)
Sizes xs=12; sm=12; md=2; lg=2; xl=?
Bg Color blue
Bg Color Intensity 600
Height 10
Text Color white

SDUICol.R6C2
Properties
Property Value
ParentID R6
Caption R6C2 (8)
Sizes xs=12; sm=12; md=8; lg=8; xl=?
Bg Color orange
Bg Color Intensity 600
Height 10
Text Color white

SDUICol.R6C3
Properties
Property Value
ParentID R6
Caption R6C3 (2)
Sizes xs=12; sm=12; md=2; lg=2; xl=?
Bg Color yellow
Bg Color Intensity 600
Height 10
Text Color white

41 / 331
 TailwindCSS WebApps using B4X

Adding Components

Adding Components to the Grid

To add components to the grid, we use a row & column reference. We call this a cell. For example, to
refer to row 10 column 2, we will use Cell(10, 2)

In this example below, a button is added to Cell(1, 1) that is R1C1.

Handling Events
When designing your webapp with the abstract designer, one is able to add events code for any
component placed in the abstract designer.

As example, let's open the adbuttonslayout file. This layout file represents these buttons output.

The abstract design when opened, looks like this. We have placed SDUIButtons next to each other and set
their properties.

We have placed SDUIButton components inside a SDUIPage component. The "Page Name" is adbuttons.

42 / 331
 TailwindCSS WebApps using B4X

We have set the page (a div) to be a container, with mx-auto, it should be flex & flex-wrap. There should
be a gap of 5.

We have also set the p(adding) to be 6. a(ll) sides, x (left & right), y (top & bottom), t (top), b (bottom), l
(left), r (right).

For each of the buttons added to this adbuttons page, we have given it a ParentID (this is its parent) and
defined the properties for it, like caption, type, color, badge value etc. Also each component should have
a unique name.

The name / element id of this button is SDUIButton1.

43 / 331
 TailwindCSS WebApps using B4X

The web element inspector shows us this for this button. All this based on the props given in the abstract
designer.

To generate events for components, one can: (a) right click on the element (b) select Generate and then
(c) select the event to generate. Usually buttons have a click Event. Components this radio / select /
checkbox usually have a change event, which receives which id is selected.

44 / 331
 TailwindCSS WebApps using B4X

The other option is to use the Tools > Generate Members functionality.

This provides a list of all component on this abstract design which you can expand, select all the elements
to generate events for and then click "Generate Members" for your code to have the callbacks added.

45 / 331
 TailwindCSS WebApps using B4X

The event generated will be the unique name of the component & the event, SDUIButton1_click. You can
change this name to suit your needs on the property bag (before generating the events). Then all you
have to do it add the code to execute when that event takes place.

As an example, in the code below, code is executed when a tab is changed. This executes a data call on
the pocketbase back-end and returns a result.

46 / 331
 TailwindCSS WebApps using B4X

Please note: Each component placed in the abstract designer SHOULD ALWAYS have the ParentID
specified.

Abstract Designer DeepDive

We will look at one of the abstract designs, named, adbuttonslayout. In the layout we have placed a
SDUIPage component and then a couple of SDUIButtons.

When the demo app is ran, it displays this content. These buttons are showing these designs based on the
settings applied on the properties for each of the buttons. All of these settings are explained per
component in the API section.

47 / 331
 TailwindCSS WebApps using B4X

Let's see what are the settings for each of these buttons below.

SDUIPage.page
Properties
Property Value
Page Name* adbuttons
Gap 5
Paddings a=6; x=?; y=?; t=?; b=?; l=?; r=?

SDUIButton.SDUIButton1
Properties
Property Value
ParentID adbuttons
Button Type badge
Badge 2
Badge Visible true
Size md
Shadow true

SDUIButton.SDUIButton2
Properties
Property Value
ParentID adbuttons
Button Type button-icon
Shape circle
Variant success
Badge 10
Badge Color success
Badge Visible true
Outline true
Size lg
Shadow true

SDUIButton.SDUIButton3
Properties
Property Value
ParentID adbuttons
Button Type indicator
Variant error
Badge 4
Badge Color info
Badge Outline true
Badge Visible true
Outline true
Size md
Shadow true

SDUIButton.SDUIButton4
Properties

48 / 331
 TailwindCSS WebApps using B4X

Property Value
ParentID adbuttons
Button Type minus-plus
Variant info
Badge
Badge Color
Size md

SDUIButton.SDUIButton5
Properties
Property Value
ParentID adbuttons
Button Type normal
Badge
Badge Color
Loading true
Size lg

SDUIButton.SDUIButton6
Properties
Property Value
ParentID adbuttons
Caption Button 6
Shape rounded
Variant none
Bg Color #964B00
Text Color white
Badge
Badge Color
Size md

SDUIButton.SDUIButton7
Properties
Property Value
ParentID adbuttons
Caption Button 7
Variant success
Text Color white
Badge
Badge Color
Size xs

SDUIButton.SDUIButton8
Properties
Property Value
ParentID adbuttons
Caption Button 8
Button Type fab
Variant success
Badge
Badge Color

49 / 331
 TailwindCSS WebApps using B4X

Property Value
Size md

SDUIButton.SDUIButton9
Properties
Property Value
ParentID adbuttons
Caption Button 9
Variant info
Text Color white
Right Icon fa-solid fa-book
Badge
Badge Color
Size md

SDUIButton.SDUIButton10
Properties
Property Value
ParentID adbuttons
Caption Button 10
Variant accent
Icon
Right Icon fa-solid fa-book
Badge
Badge Color
Loading true
Size md

Repetitive Layouts
This is a product grid created using a single template with dynamic content.

50 / 331
 TailwindCSS WebApps using B4X

We have a list of products that we want to display and just want to create a simple template. This
template can have events like click etc.

Step 1: Add the page.

SDUIPage.page
Properties
Property Value
Page Name* adgridy
Flex false
Flex Wrap false
Paddings a=?; x=10; y=20; t=?; b=?; l=?; r=?

Step 2: Add the grid

SDUIDiv.dprojects
Properties
Property Value
ParentID adgridy
Grid true
Grid Cols 1
Device Grid Cols xs=?; sm=2; md=4; lg=?; xl=?
Gap X 6
Gap Y 10

The grid will host each of the products. It has grid-cols=1 and is responsive with sm:grid-cols-2 and
md:grid-cols-4 and gap-x-6 and gap-y-10.

Step 3: Define the template for each product. Each product is defined as a card with additional
components. It is clickable, so we will use a link as the parent element. The id (data-id) of this link will be
soured from each product we will add. Information that will be changed per product will be enclosed
inside {{ }}

51 / 331
 TailwindCSS WebApps using B4X

SDUILink.pcard
Properties
Property Value
ParentID adgridy
Caption
Href
Classes flex flex-col bg-white drop-shadow hover:drop-
shadow-lg hover:opacity-70 rounded-md
Attributes data-id:{{id}}

data-id:{{id}} will create an attribute in the element using the id field of each product, e.g. data-id="p1"

SDUIImage.pimage
Properties
Property Value
ParentID pcard
Source {{image}}
Alt text {{alt}}
Object Resize cover
Width
Height 36
Classes rounded-tl-md rounded-tr-md
Attributes data-id:{{id}}_image

SDUIDiv.pcontent
Properties
Property Value
Paddings a=?; x=3; y=2; t=?; b=?; l=?; r=?

SDUILabel.phead
Properties
Property Value
ParentID pcontent
Size h1
Caption {{product}}
Font Weight semibold
Attributes data-id:{{id}}_product

52 / 331
 TailwindCSS WebApps using B4X

SDUILabel.pprice
Properties
Property Value
ParentID pcontent
Caption $ {{price}}
Attributes data-id:{{id}}_price

Step 4: Link the products with the template.

We first add the template so that our app knows about it. When added a template can be used anywhere.
A template is identified by the parent element it uses and also the children inside it. In our template, the
host of other components is named 'pcard'. Inside pcard, we have pimage, pcontent, phead and pprice. So
when adding a template we indicate all the components it uses starting with the main component hosting
others.

app.AddTemplateFromLayout("pcard", True, Array("pcard", "pimage", "pcontent", "phead", "pprice"))

Then at anytime we want to inject the contents of our template to any parent component, we execute
this call.

'update the parent fom the template using the list

app.SetItemsFromTemplate(Me, "dprojects", "pcard", "", products)

Each item will have a click event based on the name of its host, being pcard. When this happens, we can
get the id from the data-id that was used and process any other step needed.

Related Content

Xylophone App

Components

Below we will look at how the components are created using code. You can however use the abstract
designer to achieve the same functionality. The complete source code for all the components feature here
is in the SithasoDaisyDemo and also the Netlify website.

The API section details all the Properties (available in the abstract designer), events and methods available
for each component in SithasoDaisy.

For each component we will show the code part first and then the Abstract Designer portion indicating
only propeties were changed in the Abstract Designer to create same. This will start with the page and
then each component on the page. On the page you can place a SDUIGrid or SDUIFlex first before your

53 / 331
 TailwindCSS WebApps using B4X

components

Alerts
Alert informs users about important events.

ChangeLog Version 1.16

You can also make an alert be timed. For example, setting altx2.TimeOut = 2000, will hide the alert after 2
seconds.

Abstract Designer

SDUIPage.page
Properties
Property Value
Page Name* adalerts
Gap 5
Paddings a=5; x=?; y=?; t=?; b=?; l=?; r=?

54 / 331
 TailwindCSS WebApps using B4X

SDUIAlert.SDUIAlert1
Properties
Property Value
ParentID adalerts
Text Color white

SDUIAlert.SDUIAlert2
Properties
Property Value
ParentID adalerts
Variant error

SDUIAlert.SDUIAlert3
Properties
Property Value
ParentID adalerts
Variant success

SDUIAlert.SDUIAlert4
Properties
Property Value
ParentID adalerts
Variant warning

SDUIAlert.SDUIAlert5
Properties
Property Value
ParentID adalerts
Alert Type big
Variant warning
Margins a=?; x=10; y=?; t=?; b=?; l=?; r=?

SDUIAlert.SDUIAlert6
Properties
Property Value
ParentID adalerts
Alert Type title
Variant warning
Bg Color #adfc03

55 / 331
 TailwindCSS WebApps using B4X

Animations

Art Board
Artboard provides fixed size container to display a demo content on mobile size.

56 / 331
 TailwindCSS WebApps using B4X

Abstract Designer

SDUIPage.page
Properties
Property Value
Page Name* adartboard
Gap 5
Paddings a=5; x=?; y=?; t=?; b=?; l=?; r=?

SDUIArtboard.SDUIArtboard1

57 / 331
 TailwindCSS WebApps using B4X

Properties
Property Value
ParentID adartboard
Demo true

Avatars
Avatars are used to show a thumbnail representation of an individual or business in the interface.

58 / 331
 TailwindCSS WebApps using B4X

Abstract Designer

SDUIPage.page
Properties
Property Value
Page Name* adavatars
Gap 5
Paddings a=5; x=?; y=?; t=?; b=?; l=?; r=?

SDUIAvatar.SDUIAvatar1
Properties
Property Value
ParentID adavatars
Size 20
Status online
Badge Color

59 / 331
 TailwindCSS WebApps using B4X

Property Value
Shadow true

SDUIAvatar.SDUIAvatar2
Properties
Property Value
ParentID adavatars
Size 20
Shape rounded
Badge Color

SDUIAvatar.SDUIAvatar3
Properties
Property Value
ParentID adavatars
Size 20
Shape squircle
Badge Color

SDUIAvatar.SDUIAvatar4
Properties
Property Value
ParentID adavatars
Size 20
Shape hexagon
Badge Color

SDUIAvatar.SDUIAvatar5
Properties
Property Value
ParentID adavatars
Size 20
Shape triangle
Badge Color

SDUIAvatar.SDUIAvatar6
Properties
Property Value
ParentID adavatars
Size 24
Status online
Online Color #ED0000
Badge Color
Ring true
Ring Color primary
Ring Offset 2
Ring Offset Color base
Ring Offset Color Intensity 100

SDUIAvatar.SDUIAvatar7
Properties

60 / 331
 TailwindCSS WebApps using B4X

Property Value
ParentID adavatars
Size 20
Badge Color

SDUIAvatar.SDUIAvatar8
Properties
Property Value
ParentID adavatars
Size 20
Image Url
Badge Color
Place Holder 99+
Text Size 3xl
Bg Color neutral
Bg Color Intensity focus

Badges
Badges are used to inform the user of the status of specific data.

Abstract Designer

SDUIPage.page
Properties
Property Value
Page Name* adbadge
Gap 5
Paddings a=5; x=?; y=?; t=?; b=?; l=?; r=?

61 / 331
 TailwindCSS WebApps using B4X

SDUIBadge.SDUIBadge1
Properties
Property Value
ParentID adbadge
Caption Badge
Size md

SDUIBadge.SDUIBadge2
Properties
Property Value
ParentID adbadge
Variant accent
Caption accent
Size md

SDUIBadge.SDUIBadge3
Properties
Property Value
ParentID adbadge
Variant error
Caption error
Size md

SDUIBadge.SDUIBadge4
Properties
Property Value
ParentID adbadge
Variant ghost
Caption ghost
Size md

SDUIBadge.SDUIBadge5
Properties
Property Value
ParentID adbadge
Variant info
Caption info
Size md

SDUIBadge.SDUIBadge6
Properties
Property Value
ParentID adbadge
Variant primary
Caption primary
Size md

SDUIBadge.SDUIBadge7
Properties
Property Value
ParentID adbadge

62 / 331
 TailwindCSS WebApps using B4X

Property Value
Variant secondary
Caption secondary
Size md

SDUIBadge.SDUIBadge8
Properties
Property Value
ParentID adbadge
Variant success
Caption success
Size md

SDUIBadge.SDUIBadge9
Properties
Property Value
ParentID adbadge
Variant warning
Caption warning
Size md

SDUIBadge.SDUIBadge10
Properties
Property Value
ParentID adbadge
Variant none
Caption icons
Size lg
No Icons false
Left Icon Name fa-solid fa-user
Right Icon Name fa-solid fa-circle-xmark

SDUIBadge.SDUIBadge11
Properties
Property Value
ParentID adbadge
Variant primary
Caption outline
Outline true
Size md

63 / 331
 TailwindCSS WebApps using B4X

Bread Crumbs
Breadcrumbs helps users to navigate through the website.

Abstract Designer

SDUIPage.page
Properties
Property Value
Page Name* adbreadcrumbs
Gap 5
Paddings a=5; x=?; y=?; t=?; b=?; l=?; r=?

SDUIBreadCrumbs.SDUIBreadCrumbs1
Properties
Property Value
ParentID adbreadcrumbs
Size md

SDUIBreadCrumbs.SDUIBreadCrumbs2
Properties
Property Value
ParentID adbreadcrumbs
Size md

Buttons
Buttons allow the user to take actions or make choices.

64 / 331
TailwindCSS WebApps using B4X

65 / 331
TailwindCSS WebApps using B4X

66 / 331
 TailwindCSS WebApps using B4X

Abstract Designer
This was touched on in Abstract Designer DeepDive

67 / 331
 TailwindCSS WebApps using B4X

Buttons - Gradients

Button Groups
Button group shows buttons next to each other. This can be used as Pagination also.

68 / 331
 TailwindCSS WebApps using B4X

Abstract Designer

SDUIPage.page
Properties
Property Value
Page Name* adbuttongroup

69 / 331
 TailwindCSS WebApps using B4X

Property Value
Gap 5
Paddings a=5; x=?; y=?; t=?; b=?; l=?; r=?

SDUIButtonGroup.SDUIButtonGroup1
Properties
Property Value
ParentID adbuttongroup
Size md

SDUIButtonGroup.SDUIButtonGroup2
Properties
Property Value
ParentID adbuttongroup
Alignment vertical
Size lg

SDUIButtonGroup.SDUIButtonGroup3
Properties
Property Value
ParentID adbuttongroup
Size xs

SDUIButtonGroup.SDUIButtonGroup4
Properties
Property Value
ParentID adbuttongroup
Size md

SDUIButtonGroup.SDUIButtonGroup5
Properties
Property Value
ParentID adbuttongroup
Size md

SDUIButtonGroup.SDUIButtonGroup6
Properties
Property Value
ParentID adbuttongroup
Size lg

70 / 331
 TailwindCSS WebApps using B4X

Bottom Nav
Bottom navigation bar allows navigation between primary screens.

Abstract Designer

SDUIPage.page
Properties
Property Value
Page Name* adbottomnav
Gap 5
Paddings a=5; x=?; y=?; t=?; b=?; l=?; r=?

SDUIBottomNav.SDUIBottomNav1
Properties
Property Value
ParentID adbottomnav
Size md

Cards
Cards are used to group and display content in a way that is easily readable.

71 / 331
TailwindCSS WebApps using B4X

72 / 331
TailwindCSS WebApps using B4X

73 / 331
TailwindCSS WebApps using B4X

74 / 331
 TailwindCSS WebApps using B4X

Abstract Designer

SDUICard1.AddActionButtonIcon("btnnew", "fa-solid fa-location-dot", app.COLOR_ACCENT)

SDUICard1.AddActionButton("btnBuy", "Buy", app.COLOR_PRIMARY)

SDUICard.SDUICard1
Properties
Property Value
ParentID adcard
Title Shoes
Height 96
Width 96
Col Span 3
Row Span 4
Bg Color
Bg Color Intensity

75 / 331
 TailwindCSS WebApps using B4X

SDUICard.SDUICard2
Properties
Property Value
ParentID adcard
Image Url ./assets/nike.jpg
Title Card Component
Title Badge 14, May
Title Badge Color ghost
Description Use card component to easily show blog posts,
products, features, items and more.
Height 420px
Width 400px
Bg Color
Bg Color Intensity
Compact true

76 / 331
 TailwindCSS WebApps using B4X

SDUICard.SDUICard4
Properties
Property Value
ParentID adcard
Image Width 200px
Title Shoes
Height 96
Width 500px
Bg Color
Bg Color Intensity
Card Side true

77 / 331
 TailwindCSS WebApps using B4X

SDUICard.SDUICard3
Properties
Property Value
ParentID adcard
Card Type empty
Image Url
Title
Description
Center Items true
Height 400px
Width 400px
Bg Color
Bg Color Intensity
Compact true

SDUIAvatar.SDUIAvatar1
Properties
Property Value
ParentID SDUICard3_content
Size 24
Shape squircle
Status online
Badge Color
Margins a=?; x=?; y=?; t=5; b=?; l=?; r=?

SDUILabel.SDUILabel1
Properties

78 / 331
 TailwindCSS WebApps using B4X

Property Value
ParentID SDUICard3_content
Caption Betsy Braddock
Text Size lg
Margins a=?; x=?; y=?; t=2; b=?; l=?; r=?

SDUILabel.SDUILabel2
Properties
Property Value
ParentID SDUICard3_content
HTML <span>Strategic Art Manager</span><br>?
<span>Global Illustration Observer</span><br>?
<span>Business Alignment
Developer</span><br>
Text Size xs
Margins a=?; x=?; y=?; t=2; b=2; l=?; r=?

SDUIBadge.SDUIBadge1
Properties
Property Value
ParentID SDUICard3_content
Caption Design
Size md
Margins a=?; x=2; y=2; t=?; b=?; l=?; r=?

SDUIBadge.SDUIBadge2
Properties
Property Value
ParentID SDUICard3_content
Caption Art
Size md
Margins a=?; x=2; y=?; t=?; b=?; l=?; r=?

SDUIBadge.SDUIBadge3
Properties
Property Value
ParentID SDUICard3_content
Caption Illustration
Size md
Margins a=?; x=2; y=?; t=?; b=?; l=?; r=?

SDUIDivider.SDUIDivider1
Properties
Property Value
ParentID SDUICard3_content

SDUIButton.SDUIButton1
Properties
Property Value
ParentID SDUICard3_content
Caption Follow...
Variant success
Size sm
Margins a=?; x=?; y=?; t=4; b=?; l=?; r=?

79 / 331
 TailwindCSS WebApps using B4X

SDUIPage.page
Properties
Property Value
Page Name* adcard
FullPage true
Gap 5
Paddings a=5; x=?; y=?; t=?; b=?; l=?; r=?

Carousel
Carousel show images or content in a scrollable area.

80 / 331
 TailwindCSS WebApps using B4X

Abstract Designer

SDUIPage.page
Properties
Property Value
Page Name* adcarousel
Gap 5
Paddings a=5; x=?; y=?; t=?; b=?; l=?; r=?

SDUICarousel.SDUICarousel1
Properties
Property Value
ParentID adcarousel
Rounded Box true

SDUICarousel.SDUICarousel2
Properties
Property Value
ParentID adcarousel
Rounded Box true
Vertical true

Chat
Chat bubbles are used to show one line of conversation and all its data, including the author image,
author name, time, etc.

81 / 331
 TailwindCSS WebApps using B4X

Abstract Designer

SDUIPage.page
Properties
Property Value
Page Name* adchat
Flex Col true
Flex Wrap false
Gap 5
Paddings a=5; x=?; y=?; t=?; b=?; l=?; r=?

SDUIChat.SDUIChat1
Properties
Property Value
ParentID adchat

82 / 331
 TailwindCSS WebApps using B4X

Property Value
Image Shape squircle
Rounded Box true
Shadow 2xl

CheckBox
Checkboxes are used to select or deselect a value.

Abstract Designer

SDUIPage.page
Properties
Property Value
Page Name* adcheckbox
Gap 5
Paddings a=5; x=?; y=?; t=?; b=?; l=?; r=?

SDUICheckbox.SDUICheckbox1
Properties
Property Value
ParentID adcheckbox
Checked true
Size md

83 / 331
 TailwindCSS WebApps using B4X

SDUICheckbox.SDUICheckbox2
Properties
Property Value
ParentID adcheckbox
Variant primary
Placement right
Size md

SDUICheckbox.SDUICheckbox3
Properties
Property Value
ParentID adcheckbox
Size md
Indeterminate true

Code
Code mockup is used to show a block of code in a box that looks like a code editor.

Abstract Designer

SDUIPage.page
Properties
Property Value
Page Name* admockcode
Paddings a=5; x=?; y=?; t=?; b=?; l=?; r=?

SDUIMockupCode.SDUIMockupCode1
Properties
Property Value
ParentID admockcode
Code Type card

84 / 331
 TailwindCSS WebApps using B4X

We have added some action buttons. These are available with the _action event

SDUIMockupCode1.AddActionButtonIcon("btnCopy", "fa-regular fa-copy", app.COLOR_SUCCESS)

SDUIMockupCode1.AddActionButtonIcon("btnPaste", "fa-regular fa-paste", app.COLOR_SECONDARY)
SDUIMockupCode1.AddActionButtonIcon("btnDownload", "fa-regular fa-circle-down",
app.COLOR_NEUTRAL)
'
SDUIMockupCode1.Value = "This is source code..."
SDUIMockupCode1.Refresh

Collapse
Collapse is used for showing and hiding content.

85 / 331
 TailwindCSS WebApps using B4X

Abstract Designer

SDUIPage.page
Properties
Property Value
Page Name* adcollapse
Gap 5
Paddings a=5; x=?; y=?; t=?; b=?; l=?; r=?

SDUICollapsePanels.SDUICollapsePanels1
Properties
Property Value
ReadMe Children name
ParentID adcollapse
Open false

SDUICollapsePanels.SDUICollapsePanels2
Properties

86 / 331
 TailwindCSS WebApps using B4X

Property Value
ReadMe Children name
ParentID adcollapse
Plus true
Open false
Bg Color red
Bg Color Intensity 200

One can create the layouts for each panel and then load them like this.

banano.LoadLayout(SDUICollapsePanels1.Panel(1).Here, "collapse1")
banano.LoadLayout(SDUICollapsePanels1.Panel(2).Here, "collapse2")
banano.LoadLayout(SDUICollapsePanels1.Panel(3).Here, "collapse3")

Each component in all the panels should have a unique name. The number of panels depends on the
number of titles created.

Divider
Divider will be used to separate content vertically or horizontally.

87 / 331
 TailwindCSS WebApps using B4X

Abstract Designer

SDUIPage.page
Properties
Property Value
Page Name* addivider
Gap 5
Paddings a=5; x=?; y=?; t=?; b=?; l=?; r=?

SDUIDiv.SDUIDiv1
Properties
Property Value
ParentID addivider
Flex true
Flex Col true
W Full true
Classes border-opacity-50

SDUIDiv.SDUIDiv2
Properties
Property Value
ParentID SDUIDiv1
Caption content
Grid true
Bg Color base
Bg Color Intensity 300
Place Items center
Height 20
Classes card rounded-box

SDUIDiv.SDUIDiv3
Properties
Property Value
ParentID SDUIDiv1
Caption content
Grid true
Bg Color base
Bg Color Intensity 300

88 / 331
 TailwindCSS WebApps using B4X

Property Value
Place Items center
Height 20
Classes card rounded-box

SDUIDiv.SDUIDiv4
Properties
Property Value
ParentID addivider
Flex true
Flex Row true
W Full true
Classes border-opacity-50

SDUIDiv.SDUIDiv5
Properties
Property Value
ParentID SDUIDiv4
Caption content
Flex Grow true
Grid true
Bg Color base
Bg Color Intensity 300
Place Items center
Height 20
Classes card rounded-box

SDUIDiv.SDUIDiv6
Properties
Property Value
ParentID SDUIDiv4
Caption content
Flex Grow true
Grid true
Bg Color base
Bg Color Intensity 300
Place Items center
Height 20
Classes card rounded-box

SDUIDivider.SDUIDivider1
Properties
Property Value
ParentID SDUIDiv1
Alignment vertical
Caption OR

SDUIDivider.SDUIDivider2
Properties
Property Value
ParentID SDUIDiv4

89 / 331
 TailwindCSS WebApps using B4X

Property Value
Alignment horizontal
Caption OR

Drawer
Drawer is a grid layout that can show/hide a sidebar on the left or right side of the page.

In pgIndex, there is a drawer for the app. This has been created with this code. This is then added to the
body of the page.

Sub CreateAppDrawer
'add a drawer to the body of the page
drawer = app.AddAppDrawer("80", False)
'overlay transparent
drawer.OverlayTransparent = True
drawer.ItemHoverColorIntensity("blue", "100")
drawer.ItemFocusColorIntensity("blue", "100")
drawer.ItemActiveColorIntensity("blue", "100")
'create the drawer menu and page linkages
CreateDrawerMenu
End Sub

Adding the drawer items is done via,

90 / 331
 TailwindCSS WebApps using B4X

Each item in the drawer is linked to a particular page and this can have a parent & child relationship as
indicated above. One can also add a link to the drawer which will not be linked to a page, for example.

This for example is added under layouts.

When a drawer item is clicked, a menu_click event is fired. This closes the drawer and then if the item you
have clicked is linked to a page, app.ShowPage will show the page and exit. For items like the left and
right drawer, their respective processes are called.

91 / 331
 TailwindCSS WebApps using B4X

For the left and right drawers, the modals are shown.

92 / 331
 TailwindCSS WebApps using B4X

These drawers were added with.

93 / 331
 TailwindCSS WebApps using B4X

ChangeLog Version 1.16

To close the dawer, one needs to call the .Close method and no longer use .Hide

Drop Down
Dropdown can open a menu or any other element when the button is clicked.

94 / 331
 TailwindCSS WebApps using B4X

Abstract Designer

SDUIPage.page
Properties
Property Value
Page Name* addropdown
Gap 5
Paddings a=5; x=?; y=?; t=?; b=?; l=?; r=?

SDUIDropDown.SDUIDropDown1
Properties
Property Value
ParentID addropdown
Button Caption DropDown
Button/Avatar/Icon Size md
Rounded Box true
Shadow true

SDUIDropDown.SDUIDropDown2
Properties
Property Value
ParentID addropdown
Activator avatar
Button Caption DropDown

95 / 331
 TailwindCSS WebApps using B4X

Property Value
Button/Avatar/Icon Size 30
Avatar Url ./assets/minion.jpg
Avatar Status online
Menu Compact true
Rounded Box true
Shadow true

SDUIDropDown.SDUIDropDown3
Properties
Property Value
ParentID addropdown
Activator icon
Button Caption DropDown
Icon Name fa-solid fa-child-reaching
Button/Avatar/Icon Size 2xl
Badge Color secondary
Badge Value 10
Badge Visible true
Menu Vertical false
Rounded Box true
Shadow true
Width

Existing Blocks

96 / 331
 TailwindCSS WebApps using B4X

File Input
File Input is a an input field for uploading files.

97 / 331
 TailwindCSS WebApps using B4X

FileInputProgress

FileInputCamera

98 / 331
 TailwindCSS WebApps using B4X

Abstract Designer

SDUIPage.page
Properties
Property Value
Page Name* adfileinput
Gap 5
Paddings a=5; x=?; y=?; t=?; b=?; l=?; r=?

SDUIFileInput.SDUIFileInput1
Properties
Property Value
ParentID adfileinput
Size md
Caption File Upload
Bordered false

SDUIFileInput.SDUIFileInput2
Properties
Property Value
ParentID adfileinput
Type camera
Size lg
Caption File Upload
Bordered false

SDUIFileInput.SDUIFileInput3
Properties
Property Value
ParentID adfileinput
Type input-group
Size md
Caption File Upload
Color warning

99 / 331
 TailwindCSS WebApps using B4X

Property Value
Bordered false

SDUIFileInput.SDUIFileInput4
Properties
Property Value
ParentID adfileinput
Type progress
Size lg
Caption File Upload
Color secondary
Bordered false

Footer
Footer can contain logo, copyright notice, and links to other pages.

100 / 331
 TailwindCSS WebApps using B4X

Abstract Designer

SDUIPage.page
Properties
Property Value
Page Name* adfooter
Flex false
Flex Wrap false
Paddings a=5; x=?; y=?; t=?; b=?; l=?; r=?

101 / 331
 TailwindCSS WebApps using B4X

SDUIFooter.SDUIFooter1
Properties
Property Value
ParentID adfooter
Bg Color neutral
Text Color neutral
Text Color Intensity content
Paddings a=10; x=?; y=?; t=?; b=?; l=?; r=?

Gradients

102 / 331
 TailwindCSS WebApps using B4X

Hero
Hero is a component for displaying a large box or image with a title and description.

103 / 331
TailwindCSS WebApps using B4X

104 / 331
 TailwindCSS WebApps using B4X

Abstract Designer
SDUIPage.page
Properties
Property Value
Page Name* adhero
Gap 5
Paddings a=5; x=?; y=?; t=?; b=?; l=?; r=?

SDUIHero.SDUIHero1
Properties
Property Value
ParentID adhero
Content Classes text-center
Height 500px
Width 800px
Rounded Box true
Shadow true

SDUIDiv.SDUIDiv1
Properties
Property Value
ParentID SDUIHero1_content
Flex Wrap true
Justify Content
Justify Items
Max Width md

105 / 331
 TailwindCSS WebApps using B4X

SDUILabel.SDUILabel1
Properties
Property Value
ParentID SDUIDiv1
Size h1
Caption Hello There
Text Size 5xl

SDUILabel.SDUILabel2
Properties
Property Value
ParentID SDUIDiv1
Caption Lorem Ipsum
Lorem Ipsum true
Paddings a=?; x=?; y=6; t=?; b=?; l=?; r=?

SDUIButton.SDUIButton1
Properties
Property Value
ParentID SDUIDiv1
Caption Getting Started
Variant primary
Size md

106 / 331
 TailwindCSS WebApps using B4X

SDUIHero.SDUIHero2
Properties
Property Value
ParentID adhero
Content Classes flex-col lg:flex-row
Height 500px
Width 800px
Rounded Box true
Shadow true

SDUIImage.SDUIImage1
Properties
Property Value
ParentID SDUIHero2_content
Source ./assets/img_4.jpg
Width 260px
Height 400px
Classes max-w-sm rounded-lg shadow-2xl

SDUILabel.SDUILabel5
Properties
Property Value
ParentID SDUIHero2_content
Size div

SDUILabel.SDUILabel3
Properties
Property Value
ParentID SDUILabel5
Size h1
Caption Box Office News!!!
Text Size 5xl

SDUILabel.SDUILabel4
Properties
Property Value
ParentID SDUILabel5
Lorem Ipsum true
Paddings a=?; x=?; y=6; t=?; b=?; l=?; r=?

SDUIButton.SDUIButton2
Properties
Property Value
ParentID SDUILabel5
Caption Getting Started
Variant primary
Size md

107 / 331
 TailwindCSS WebApps using B4X

Indicators
Indicators are used to place an element on the corner of another element.

108 / 331
 TailwindCSS WebApps using B4X

Abstract Designer

SDUIPage.page
Properties
Property Value
Page Name* adindicators
Gap 5
Paddings a=5; x=?; y=?; t=?; b=?; l=?; r=?

SDUIIndicator.SDUIIndicator1
Properties
Property Value
ParentID adindicators
Color secondary
Size md

SDUIDiv.SDUIDiv1
Properties
Property Value
ParentID SDUIIndicator1

109 / 331
 TailwindCSS WebApps using B4X

Property Value
Caption content
Grid true
Bg Color base
Bg Color Intensity 300
Place Items center
Width 32
Height 32

SDUIAvatar.SDUIAvatar1
Properties
Property Value
ParentID adindicators
Size 20
Shape rounded
Badge Caption typing..
Badge Color secondary
Badge Visible true

SDUIIndicator.SDUIIndicator2
Properties
Property Value
ParentID adindicators
Caption Required
Size md

SDUITextBox.SDUITextBox1
Properties
Property Value
ParentID SDUIIndicator2
Size md
Caption
Place Holder Your email address
Date Time Format yyyy-mm-dd hh:mm

SDUIIndicator.SDUIIndicator3
Properties
Property Value
ParentID adindicators
Type card
Button Color pimay
Bottom true

SDUIIndicator.SDUIIndicator4
Properties
Property Value
ParentID adindicators
Color secondary

110 / 331
 TailwindCSS WebApps using B4X

Property Value
Caption image loading...
Button Color primary
Center true
Middle true
Margins a=6; x=?; y=?; t=?; b=?; l=?; r=?

SDUIImage.SDUIImage1
Properties
Property Value
ParentID SDUIIndicator4
Source ./assets/banner_6.jpg
Shape rounded
Width 300px
Height 150px

Kbd
Kbd is used to display keyboard shortcuts.

111 / 331
 TailwindCSS WebApps using B4X

Abstract Designer

SDUIPage.page
Properties
Property Value
Page Name* adkbd
Gap 5
Paddings a=5; x=?; y=?; t=?; b=?; l=?; r=?

SDUIKbd.SDUIKbd1
Properties
Property Value
ParentID adkbd
Caption A
Size md
Shadow true

SDUIKbd.SDUIKbd2
Properties
Property Value
ParentID adkbd
Caption Shift

112 / 331
 TailwindCSS WebApps using B4X

Property Value
Size md
Shadow true

SDUIKbd.SDUIKbd3
Properties
Property Value
ParentID adkbd
Caption ⌘
Size md
Shadow true

SDUIKbd.SDUIKbd4
Properties
Property Value
ParentID adkbd
Caption ⌥
Size md
Shadow true

SDUIKbd.SDUIKbd5
Properties
Property Value
ParentID adkbd
Caption ⇧
Size md
Shadow true

SDUIKbd.SDUIKbd6
Properties
Property Value
ParentID adkbd
Caption ⌃
Size md
Shadow true

Links
Link adds the missing underline style to links.

113 / 331
 TailwindCSS WebApps using B4X

Abstract Designer

SDUIPage.page
Properties
Property Value
Page Name* adlinks
Gap 5
Paddings a=5; x=?; y=?; t=?; b=?; l=?; r=?

SDUILink.SDUILink1
Properties
Property Value
ParentID adlinks
Caption A simple link

SDUILink.SDUILink2
Properties
Property Value
ParentID adlinks
Caption A simple link
Variant primary

SDUILink.SDUILink3
Properties
Property Value
ParentID adlinks
Caption A simple link
Variant secondary

SDUILink.SDUILink4
Properties

114 / 331
 TailwindCSS WebApps using B4X

Property Value
ParentID adlinks
Caption A simple link
Variant accent

SDUILink.SDUILink5
Properties
Property Value
ParentID adlinks
Caption A simple link
Hover true

Lists

Abstract Designer

115 / 331
 TailwindCSS WebApps using B4X

ListView

Abstract Designer

SDUIPage.page
Properties
Property Value
Page Name* adlistview
Gap 5
Paddings a=5; x=?; y=?; t=?; b=?; l=?; r=?

SDUIListView.SDUIListView1
Properties
Property Value
ParentID adlistview

SDUIListView1.Clear
SDUIListView1.AddItem("p1", "./assets/face5.jpg", "John Doe", "Missisipi", "48")
SDUIListView1.AddItem("p2", "./assets/face1.jpg", "John Doe 1", "Missisip", "47")
SDUIListView1.AddItem("p3", "./assets/face2.jpg", "John Doe 2", "Missisi", "46")
SDUIListView1.AddItem("p4", "./assets/face3.jpg", "John Doe 3", "Missis", "")
SDUIListView1.AddItem("p5", "./assets/face4.jpg", "John Doe 3", "Missi", "44")

Mask
Mask crops the content of the element to common shapes.

116 / 331
 TailwindCSS WebApps using B4X

Abstract Designer

SDUIPage.page
Properties
Property Value
Page Name* admask
Gap 5
Paddings a=5; x=?; y=?; t=?; b=?; l=?; r=?

SDUIAvatar.SDUIAvatar1
Properties
Property Value
ParentID admask
Shape squircle
Badge Color

SDUIAvatar.SDUIAvatar2
Properties
Property Value
ParentID admask
Shape heart
Badge Color

SDUIAvatar.SDUIAvatar3
Properties

117 / 331
 TailwindCSS WebApps using B4X

Property Value
ParentID admask
Shape hexagon
Badge Color

SDUIAvatar.SDUIAvatar4
Properties
Property Value
ParentID admask
Shape hexagon-2
Badge Color

SDUIAvatar.SDUIAvatar5
Properties
Property Value
ParentID admask
Shape decagon
Badge Color

SDUIAvatar.SDUIAvatar6
Properties
Property Value
ParentID admask
Shape pentagon
Badge Color

SDUIAvatar.SDUIAvatar7
Properties
Property Value
ParentID admask
Shape pentagon
Badge Color

SDUIAvatar.SDUIAvatar8
Properties
Property Value
ParentID admask
Shape diamond
Badge Color

SDUIAvatar.SDUIAvatar9
Properties
Property Value
ParentID admask
Shape square
Badge Color

SDUIAvatar.SDUIAvatar10
Properties
Property Value
ParentID admask

118 / 331
 TailwindCSS WebApps using B4X

Property Value
Badge Color

SDUIAvatar.SDUIAvatar11
Properties
Property Value
ParentID admask
Shape parallelogram
Badge Color

SDUIAvatar.SDUIAvatar12
Properties
Property Value
ParentID admask
Shape parallelogram-2
Badge Color

SDUIAvatar.SDUIAvatar13
Properties
Property Value
ParentID admask
Shape parallelogram-3
Badge Color

SDUIAvatar.SDUIAvatar14
Properties
Property Value
ParentID admask
Shape parallelogram-4
Badge Color

SDUIAvatar.SDUIAvatar15
Properties
Property Value
ParentID admask
Shape star
Badge Color

SDUIAvatar.SDUIAvatar16
Properties
Property Value
ParentID admask
Shape star-2
Badge Color

SDUIAvatar.SDUIAvatar17
Properties
Property Value
ParentID admask
Shape triangle
Badge Color

119 / 331
 TailwindCSS WebApps using B4X

SDUIAvatar.SDUIAvatar18
Properties
Property Value
ParentID admask
Shape triangle-2
Badge Color

SDUIAvatar.SDUIAvatar19
Properties
Property Value
ParentID admask
Shape triangle-3
Badge Color

SDUIAvatar.SDUIAvatar20
Properties
Property Value
ParentID admask
Shape triangle-4
Badge Color

Menus
Menu is used to display a list of links vertically or horizontally.

120 / 331
TailwindCSS WebApps using B4X

121 / 331
 TailwindCSS WebApps using B4X

Abstract Designer

SDUIPage.page
Properties
Property Value
Page Name* admenu
Gap 5
Paddings a=5; x=?; y=?; t=?; b=?; l=?; r=?

SDUIMenu.SDUIMenu1
Properties
Property Value
ParentID admenu
Menu Vertical true
Width 52
Rounded Box true
Shadow true

Modal
Modal is used to show a dialog or a box when you click a button.

122 / 331
 TailwindCSS WebApps using B4X

Abstract Designer

SDUIPage.page
Properties
Property Value
Page Name* admodal
Gap 5
Paddings a=5; x=?; y=?; t=?; b=?; l=?; r=?

SDUIModal.SDUIModal1
Properties
Property Value
ParentID admodal
Message (HTML) <p>This is a message</p>

Login Modal
The Login Modal example, provides us with details how this modal was created via code.

123 / 331
 TailwindCSS WebApps using B4X

The components were declared.

In BuildPage, these components are then created. The modal has a Form internally that we will place
components inside of. In this form we create the grid of 2 rows each spanning 12 columns. We then add
input components inside the form.

When the Ok / Yes and Cancel / No buttons a clicked, we want to process some events. In this case we
validate what has been entered by the user. We can then save this content to a db or use it for verifying
the user in this case.

124 / 331
 TailwindCSS WebApps using B4X

When No is clicked, just hide the modal. As the password has a toggle eye, when this is clicked, we want
to toggle the input type between password and input.

There are examples included with source code that dive deeper into the use of modals with other
components like tables etc.

NavBar
Navbar is used to show a navigation bar on the top of the page.

Abstract Designer

125 / 331
 TailwindCSS WebApps using B4X

SDUIPage.page
Properties
Property Value
Page Name* adnavbar
Gap 5
Paddings a=5; x=?; y=?; t=?; b=?; l=?; r=?

SDUINavBar.SDUINavBar1
Properties
Property Value
ParentID adnavbar
Hamburger On Small Only false
Logo Width
Logo Height
Has Menu Button false
Bg Color blue
Bg Color Intensity 500
Text Color white
Rounded Box true

SDUIAvatar.SDUIAvatar1
Properties
Property Value
ParentID SDUINavBar1
Shape squircle
Status online
Badge Color
Shadow true
Margins a=?; x=2; y=?; t=?; b=?; l=?; r=?

SDUIButton.SDUIButton1
Properties
Property Value
ParentID SDUINavBar1
Caption
Button Type button-icon
Shape circle
Variant secondary
Icon fa-solid fa-car
Badge 2
Badge Color success
Badge Visible true
Size md
Shadow true

126 / 331
 TailwindCSS WebApps using B4X

Options Card

Abstract Designer
SDUIPage.page
Properties
Property Value
Page Name* adoptionscard
Gap 5
Paddings a=5; x=?; y=?; t=?; b=?; l=?; r=?

SDUIOptionsCard.SDUIOptionsCard1
Properties
Property Value
ParentID adoptionscard
Rounded Box true
Shadow true

Phone
Phone mockup shows a mockup of an iPhone.

127 / 331
 TailwindCSS WebApps using B4X

Abstract Designer
SDUIPage.page
Properties
Property Value
Page Name* adphone
Paddings a=5; x=?; y=?; t=?; b=?; l=?; r=?

SDUIMockupPhone.SDUIMockupPhone1
Properties
Property Value
ParentID adphone
Caption My Phone
Border Color primary

Progress
Progress bar can be used to show the progress of a task or to show the passing of time.

128 / 331
 TailwindCSS WebApps using B4X

Abstract Designer

SDUIPage.page
Properties
Property Value
Page Name* adprogress
Gap 5
Paddings a=5; x=?; y=?; t=?; b=?; l=?; r=?

SDUIProgress.SDUIProgress1
Properties
Property Value
ParentID adprogress
Size md

SDUIProgress.SDUIProgress2
Properties
Property Value
ParentID adprogress
Size md
Value 20
Color secondary

SDUIProgress.SDUIProgress3
Properties
Property Value
ParentID adprogress
Size md
Value 30
Color nuetral

SDUIProgress.SDUIProgress4
Properties
Property Value
ParentID adprogress
Size md
Value 30
Color warning
Indeterminate true

SDUIProgress.SDUIProgress5

129 / 331
 TailwindCSS WebApps using B4X

Properties
Property Value
ParentID adprogress
Type input-group
Size md
Value 78
Color info

SDUIProgress.SDUIProgress6
Properties
Property Value
ParentID adprogress
Type input-group
Size lg
Value 78
Color info
Bg Color transparent

Radial Progress
Radial Progress can be used to show the progress of a task or to show the passing of time.

130 / 331
 TailwindCSS WebApps using B4X

Abstract Designer

SDUIPage.page
Properties
Property Value
Page Name* adradial
Gap 5
Paddings a=5; x=?; y=?; t=?; b=?; l=?; r=?

SDUIRadialProgress.SDUIRadialProgress1
Properties
Property Value
ParentID adradial
Value 70
Text Color secondary
Size 12rem
Thickness 2rem

SDUIRadialProgress.SDUIRadialProgress2
Properties
Property Value
ParentID adradial
Value
Size 12rem
Thickness 2px
Indeterminate true

131 / 331
 TailwindCSS WebApps using B4X

Property Value
Interval 100

SDUIRadialProgress.SDUIRadialProgress3
Properties
Property Value
ParentID adradial
Value 0

SDUIRadialProgress.SDUIRadialProgress4
Properties
Property Value
ParentID adradial
Value 20

SDUIRadialProgress.SDUIRadialProgress5
Properties
Property Value
ParentID adradial
Value 60

SDUIRadialProgress.SDUIRadialProgress6
Properties
Property Value
ParentID adradial
Value 80

SDUIRadialProgress.SDUIRadialProgress7
Properties
Property Value
ParentID adradial
Value 100

SDUIRadialProgress.SDUIRadialProgress8
Properties
Property Value
ParentID adradial
Value 70
Text Color primary

SDUIRadialProgress.SDUIRadialProgress9
Properties
Property Value
ParentID adradial
Value 70
Text Color primary
Text Color Intensity content
Bg Color primary
Border 4
Border Color primary

132 / 331
 TailwindCSS WebApps using B4X

Radio
Radio buttons allow the user to select one option from a set.

Abstract Designer

SDUIPage.page
Properties
Property Value
Page Name* adradiogroup
Gap 5
Paddings a=5; x=?; y=?; t=?; b=?; l=?; r=?

SDUIRadioGroup.SDUIRadioGroup1
Properties
Property Value
ParentID adradiogroup
Caption Software Package
Raw Key Values b4a:basic4android; b4i:basic4iOs; b4j:basic4java;
b4r:basic4arduino
Size lg

133 / 331
 TailwindCSS WebApps using B4X

SDUIRadioGroup.SDUIRadioGroup2
Properties
Property Value
ParentID adradiogroup
Caption Software Package
Raw Key Values b4a:basic4android; b4i:basic4iOs; b4j:basic4java;
b4r:basic4arduino
Size md
Color secondary

Range
Range slider is used to select a value by sliding a handle.

Abstract Designer

SDUIPage.page
Properties
Property Value
Page Name* adrange
Gap 5
Paddings a=5; x=?; y=?; t=?; b=?; l=?; r=?

SDUIRange.SDUIRange1
Properties
Property Value
ParentID adrange
Size md

SDUIRange.SDUIRange2
Properties
Property Value
ParentID adrange
Input Type input-group
Size md

134 / 331
 TailwindCSS WebApps using B4X

Property Value
Color secondary
Value 30

Rating
Rating is a set of radio buttons that allow the user to rate something.

Abstract Designer

SDUIPage.page
Properties
Property Value
Page Name* adrating
Gap 5
Paddings a=5; x=?; y=?; t=?; b=?; l=?; r=?

SDUIRating.SDUIRating1
Properties
Property Value
ParentID adrating
Size md
Bordered true

SDUIRating.SDUIRating2
Properties

135 / 331
 TailwindCSS WebApps using B4X

Property Value
ParentID adrating
Input Type input-group
Mask heart
Size md
Bg Color blue
Bordered true

SDUIRating.SDUIRating3
Properties
Property Value
ParentID adrating
Input Type input-group
Mask squircle
Size md
Bg Color red
Bordered true

Stack
Stack visually puts elements on top of each other.

136 / 331
 TailwindCSS WebApps using B4X

Abstract Designer

SDUIPage.page
Properties
Property Value
Page Name* adstack

137 / 331
 TailwindCSS WebApps using B4X

Property Value
Gap 5
Paddings a=5; x=?; y=?; t=?; b=?; l=?; r=?

SDUIDiv.SDUIDiv1
Properties
Property Value
ParentID adstack

SDUIDiv.SDUIDiv2
Properties
Property Value
ParentID SDUIDiv1
Caption 1
Grid true
Bg Color primary
Text Color primary
Text Color Intensity content
Rounded true
Place Content center
Width 32
Height 20

SDUIDiv.SDUIDiv3
Properties
Property Value
ParentID SDUIDiv1
Caption 2
Grid true
Bg Color accent
Text Color accent
Text Color Intensity content
Rounded true
Place Content center
Width 32
Height 20

SDUIDiv.SDUIDiv4
Properties
Property Value
ParentID SDUIDiv1
Caption 3
Grid true
Bg Color secondary
Text Color secondary
Text Color Intensity content
Rounded true
Place Content center
Width 32
Height 20

138 / 331
 TailwindCSS WebApps using B4X

SDUIDiv.SDUIDiv5
Properties
Property Value
ParentID adstack
Stack true

SDUIDiv.SDUIDiv6
Properties
Property Value
ParentID SDUIDiv5
Caption 1
Grid true
Bg Color primary
Text Color primary
Text Color Intensity content
Rounded true
Place Content center
Width 32
Height 20

SDUIDiv.SDUIDiv7
Properties
Property Value
ParentID SDUIDiv5
Caption 2
Grid true
Bg Color accent
Text Color accent
Text Color Intensity content
Rounded true
Place Content center
Width 32
Height 20

SDUIDiv.SDUIDiv8
Properties
Property Value
ParentID SDUIDiv5
Caption 3
Grid true
Bg Color secondary
Text Color secondary
Text Color Intensity content
Rounded true
Place Content center
Width 32
Height 20

SDUIDiv.SDUIDiv9

139 / 331
 TailwindCSS WebApps using B4X

Properties
Property Value
ParentID adstack
Stack true

SDUIImage.SDUIImage1
Properties
Property Value
ParentID SDUIDiv9
Source ./assets/nature_03.jpg
Shape rounded
Width 112px
Height 112px

SDUIImage.SDUIImage2
Properties
Property Value
ParentID SDUIDiv9
Source ./assets/nature_03.jpg
Shape rounded
Width 112px
Height 112px

SDUIImage.SDUIImage3
Properties
Property Value
ParentID SDUIDiv9
Source ./assets/nature_03.jpg
Shape rounded
Width 112px
Height 112px

SDUIDiv.SDUIDiv10
Properties
Property Value
ParentID adstack
Stack true

SDUICard.SDUICard1
Properties
Property Value
ParentID SDUIDiv10
Image Url
Title Notification 1
Description You have 3 messages
Height
Width
Bg Color primary

140 / 331
 TailwindCSS WebApps using B4X

Property Value
Bg Color Intensity
Text Color primary
Text Color Intensity content

SDUICard.SDUICard2
Properties
Property Value
ParentID SDUIDiv10
Image Url
Title Notification 2
Description You have 3 messages
Height
Width
Bg Color primary
Bg Color Intensity
Text Color primary
Text Color Intensity content

SDUICard.SDUICard3
Properties
Property Value
ParentID SDUIDiv10
Image Url
Title Notification 3
Description You have 3 messages
Height
Width
Bg Color primary
Bg Color Intensity
Text Color primary
Text Color Intensity content

Stat
Stat is used to show numbers and data in a box.

141 / 331
 TailwindCSS WebApps using B4X

Abstract Designer

SDUIPage.page
Properties
Property Value
Page Name* adstat
Gap 5
Paddings a=5; x=?; y=?; t=?; b=?; l=?; r=?

SDUIStats.SDUIStats1
Properties

142 / 331
 TailwindCSS WebApps using B4X

Property Value
ParentID adstat
Vertical On Small Only true

SDUIStats.SDUIStats2
Properties
Property Value
ParentID adstat
Vertical On Small Only true
Bg Color primary
Text Color primary
Text Color Intensity content

Select
Select is used to pick a value from a list of options.

Abstract Designer

SDUIPage.page
Properties
Property Value
Page Name* adselect
Gap 5
Paddings a=5; x=?; y=?; t=?; b=?; l=?; r=?

143 / 331
 TailwindCSS WebApps using B4X

SDUISelect.SDUISelect1
Properties
Property Value
ParentID adselect
Size md
Raw Key Values b4a:basic4android; b4i:basic4iOs; b4j:basic4java;
b4r:basic4arduino

SDUISelect.SDUISelect2
Properties
Property Value
ParentID adselect
Select Type input-group
Size md
Caption Progress 2
Raw Key Values b4a:basic4android;?
b4i:basic4iOs;?
b4j:basic4java;?
b4r:basic4arduino
Prefix A
Suffix B
Auto Focus true
Color secondary

SDUISelect.SDUISelect3
Properties
Property Value
ParentID adselect
Select Type input-group
Size md
Caption Progress 2
Value b4j
Raw Key Values b4a:basic4android;?
b4i:basic4iOs;?
b4j:basic4java;?
b4r:basic4arduino
Prefix A
Append Icon fa-solid fa-cart-plus
Auto Focus true
Color error
Hint Select a product
Required true

Steps
Steps can be used to show a list of steps in a process.

144 / 331
TailwindCSS WebApps using B4X

145 / 331
 TailwindCSS WebApps using B4X

Abstract Designer

SDUIPage.page
Properties
Property Value
Page Name* adsteps
Gap 5
Paddings a=5; x=?; y=?; t=?; b=?; l=?; r=?

SDUISteps.SDUISteps1
Properties
Property Value
ParentID adsteps

SDUISteps.SDUISteps2
Properties
Property Value
ParentID adsteps
Step Type vertical
Color secondary

One can also create other layouts and load them inside each of the step. Each component in a step should
have a unique name.

banano.LoadLayout(SDUISteps1.Panel(1).Here, "tab1child")
banano.LoadLayout(SDUISteps1.Panel(2).Here, "tab2child")
banano.LoadLayout(SDUISteps1.Panel(3).Here, "tab3child")

Swap
Swap allows you to toggle the visibility of two elements using a checkbox or a class name.

146 / 331
 TailwindCSS WebApps using B4X

Abstract Designer

SDUIPage.page
Properties
Property Value
Page Name* adswap
Gap 5
Paddings a=5; x=?; y=?; t=?; b=?; l=?; r=?

SDUISwap.SDUISwap1
Properties
Property Value
ParentID adswap
Size md

SDUISwap.SDUISwap2
Properties
Property Value
ParentID adswap
Type icon
Off Value fa-solid fa-moon
On Value fa-regular fa-sun
Size 4
Effect flip

147 / 331
 TailwindCSS WebApps using B4X

Tabs
Tabs can be used to show a list of links in a tabbed format.

Abstract Designer

SDUIPage.page
Properties
Property Value
Page Name* adtabs
Gap 5
Paddings a=5; x=?; y=?; t=?; b=?; l=?; r=?

SDUITabs.SDUITabs1
Properties

148 / 331
 TailwindCSS WebApps using B4X

Property Value
ParentID adtabs
Size lg

SDUITabs.SDUITabs2
Properties
Property Value
ParentID adtabs
Size lg
Type bordered

SDUITabs.SDUITabs3
Properties
Property Value
ParentID adtabs
Size lg
Type lifted

SDUITabs.SDUITabs4
Properties
Property Value
ParentID adtabs
Size lg
Type boxed

One can also ceate othe layouts and load then in each tab with code like this:

'build the page, via code or loadlayouts

banano.LoadLayout(SDUITabs3.Panel(1).Here, "tab1child")
banano.LoadLayout(SDUITabs3.Panel(2).Here, "tab2child")
banano.LoadLayout(SDUITabs3.Panel(3).Here, "tab3child")

Each element in the tabs should have a unique name.

149 / 331
 TailwindCSS WebApps using B4X

Typography

150 / 331
 TailwindCSS WebApps using B4X

Abstract Designer

TextBox
Text Input is a simple input field.

151 / 331
TailwindCSS WebApps using B4X

152 / 331
TailwindCSS WebApps using B4X

153 / 331
 TailwindCSS WebApps using B4X

Abstract Designer

SDUIPage.page
Properties
Property Value
Page Name* adtextbox
Gap 5
Paddings a=5; x=?; y=?; t=?; b=?; l=?; r=?

SDUITextBox.SDUITextBox1
Properties
Property Value
ParentID adtextbox
Size md
Color primary
Value 3
Bordered false

154 / 331
 TailwindCSS WebApps using B4X

SDUITextBox.SDUITextBox2
Properties
Property Value
ParentID adtextbox
Input Type input-group
Size md
Color primary
Value 3
Bordered false

SDUITextBox.SDUITextBox3
Properties
Property Value
ParentID adtextbox
Input Type input-group
Size md
Color primary
Value 3
Prefix P
Suffix S

SDUITextBox.SDUITextBox4
Properties
Property Value
ParentID adtextbox
Input Type input-group
Size md
Color primary
Caption First Name
Place Holder Enter first name here
Prepend Icon fa-solid fa-volume-xmark
Append Icon fa-solid fa-volume-high

SDUITextBox.SDUITextBox5
Properties
Property Value
ParentID adtextbox
Input Type password
Size md
Color primary
Caption Password
Show Eyes true
Prepend Icon fa-solid fa-lock

SDUITextBox.SDUITextBox6
Properties
Property Value
ParentID adtextbox
Input Type telephone
Size md
Color secondary

155 / 331
 TailwindCSS WebApps using B4X

Property Value
Caption Telephone
Prepend Icon fa-solid fa-mobile

SDUITextBox.SDUITextBox7
Properties
Property Value
ParentID adtextbox
Input Type number
Size md
Color secondary
Caption Weight

SDUITextBox.SDUITextBox8
Properties
Property Value
ParentID adtextbox
Input Type dialer
Size md
Color secondary
Caption Dialer
Value 1
Max Value 100
Step Value 5

TextArea
Textarea allows users to enter text in multiple lines.

156 / 331
 TailwindCSS WebApps using B4X

Abstract Designer

SDUIPage.page
Properties
Property Value
Page Name* adtextarea
Gap 5
Paddings a=5; x=?; y=?; t=?; b=?; l=?; r=?

SDUITextArea.SDUITextArea1
Properties
Property Value
ParentID adtextarea
Caption Text Area 1
Value my text area

SDUITextArea.SDUITextArea2
Properties
Property Value
ParentID adtextarea
Input Type input-group
Caption Text Area 1
Color nuetral

157 / 331
 TailwindCSS WebApps using B4X

Property Value
Value my text area

SDUITextArea.SDUITextArea3
Properties
Property Value
ParentID adtextarea
Input Type input-group
Caption Text Area 1
Color nuetral
Value my text area
Prefix P
Suffix S

SDUITextArea.SDUITextArea4
Properties
Property Value
ParentID adtextarea
Input Type input-group
Caption Text Area 1
Color success
Value my text area
Prepend Icon fa-brands fa-stack-overflow
Append Icon fa-brands fa-github

Time Lines

158 / 331
 TailwindCSS WebApps using B4X

Abstract Designer

Toast
Toast is a wrapper to stack elements, positioned on the corner of page.

ChangeLog Version 1.16

You can also make an toast be timed. For example, setting t1.TimeOut = 2000, will hide the toast after 2
seconds.

159 / 331
 TailwindCSS WebApps using B4X

Abstract Designer

SDUIPage.page
Properties
Property Value
Page Name* adtoast
Gap 5
Paddings a=5; x=?; y=?; t=?; b=?; l=?; r=?

SDUIToast.SDUIToast1
Properties
Property Value
ParentID adtoast

SDUIToast.SDUIToast2
Properties
Property Value
ParentID adtoast
Color warning
At Center true
At Middle true

ToolTip
Tooltip can be used to show a message when hovering over an element.

160 / 331
 TailwindCSS WebApps using B4X

Abstract Designer

SDUIPage.page
Properties
Property Value
Page Name* adtooltip
Gap 5
Paddings a=5; x=?; y=?; t=?; b=?; l=?; r=?

SDUITooltip.SDUITooltip1
Properties
Property Value
ParentID adtooltip
Caption ToolTip 1
Position left

SDUITooltip.SDUITooltip2
Properties
Property Value
ParentID adtooltip
Caption ToolTip 1
Color secondary
Position right

SDUIButton.SDUIButton1
Properties
Property Value
ParentID SDUITooltip1

SDUIButton.SDUIButton2
Properties
Property Value
ParentID SDUITooltip2
Shape rounded
Icon

Table
Table can be used to show a list of data in a table format.

For the examples below, this is the structure of the records we will use.

161 / 331
 TailwindCSS WebApps using B4X

Table1

Table2

162 / 331
 TailwindCSS WebApps using B4X

Table3

Table4

163 / 331
 TailwindCSS WebApps using B4X

Abstract Designer

SDUIPage.page
Properties
Property Value
Page Name* adtable
Gap 5
Paddings a=5; x=?; y=?; t=?; b=?; l=?; r=?

SDUITable.SDUITable1
Properties
Property Value
ParentID adtable
Title Test Table
Is Normal true
Is Zebra true
Badges Size sm
Button Size sm

164 / 331
 TailwindCSS WebApps using B4X

Property Value
Hover true
Select All true
Has Search true
Has Delete All true
Has Edit true
Has Clone true
Has Delete true
Has Upload true
Has Menu true

Toggle
Toggle is a checkbox that is styled to look like a switch button.

Abstract Designer

SDUIPage.page
Properties
Property Value
Page Name* adtoggle
Gap 5
Paddings a=5; x=?; y=?; t=?; b=?; l=?; r=?

SDUIToggle.SDUIToggle1

165 / 331
 TailwindCSS WebApps using B4X

Properties
Property Value
ParentID adtoggle
Size md

SDUIToggle.SDUIToggle2
Properties
Property Value
ParentID adtoggle
Input Type input-group
Color secondary
Size md

SDUIToggle.SDUIToggle3
Properties
Property Value
ParentID adtoggle
Input Type input-group
Color success
Size md

SDUIToggle.SDUIToggle4
Properties
Property Value
ParentID adtoggle
Input Type input-group
Color warning
Size md

SDUIToggle.SDUIToggle5
Properties
Property Value
ParentID adtoggle
Input Type input-group
Position right
Color warning
Size md
Checked true
Bg Color red
Bg Color Intensity 700
Checked Bg Color green
Checked Bg Color Intensity 700

166 / 331
 TailwindCSS WebApps using B4X

Video

Abstract Designer
SDUIPage.page
Properties
Property Value
Page Name* advideo
Gap 5
Paddings a=5; x=?; y=?; t=?; b=?; l=?; r=?

SDUIVideo.SDUIVideo1
Properties
Property Value
ParentID advideo
Auto Play true
Webm Url ./assets/video2.webm

Window
Window mockup shows a box that looks like an operating system window.

Abstract Designer
SDUIPage.page
Properties
Property Value
Page Name* admockwindow
Paddings a=5; x=?; y=?; t=?; b=?; l=?; r=?

167 / 331
 TailwindCSS WebApps using B4X

SDUIMockupWindow.SDUIMockupWindow1
Properties
Property Value
ParentID admockwindow
Caption This is a Mock Window
Border Color primary

PlugIns
QRCode

Abstract Designer
SDUIPage.page
Properties
Property Value
Page Name* adqrcode
Gap 5
Paddings a=5; x=?; y=?; t=?; b=?; l=?; r=?

SDUIQRCode.SDUIQRCode1
Properties
Property Value
ParentID adqrcode
Text https://sithasodaisyui.netlify.app

168 / 331
 TailwindCSS WebApps using B4X

QRCode/Barcode Scanner

169 / 331
 TailwindCSS WebApps using B4X

Abstract Designer
SDUIPage.page
Properties
Property Value
Page Name* adqrcodescanner
Gap 5
Paddings a=5; x=?; y=?; t=?; b=?; l=?; r=?

SDUIBarCodeReader.SDUIBarCodeReader1
Properties
Property Value
ParentID adqrcodescanner
Width 500px

170 / 331
 TailwindCSS WebApps using B4X

WebCam

171 / 331
 TailwindCSS WebApps using B4X

Abstract Designer

One can also add the WebCam using the abstract designer.

SDUIPage.page
Properties
Property Value
Page Name* adcam
Flex Wrap false
Gap 5
Grid true
Grid Cols 1
Paddings a=5; x=?; y=?; t=?; b=?; l=?; r=?

SDUIGrid.SDUIGrid1
Properties
Property Value
ParentID adcam
Grid true
Align Content evenly
Gap 6
Grid Cols 1
Device Grid Cols xs=?; sm=?; md=2; lg=2; xl=?

SDUIWebcam.SDUIWebcam1
Properties
Property Value
ParentID SDUIGrid1

SDUIImage.SDUIImage1
Properties
Property Value
ParentID SDUIGrid1
Shape squircle
Width 200px
Height 200px

SDUIGrid.SDUIGrid2
Properties

172 / 331
 TailwindCSS WebApps using B4X

Property Value
ParentID adcam
Grid true
Align Content evenly
Gap 6
Grid Cols 1
Device Grid Cols xs=?; sm=?; md=2; lg=2; xl=?

SDUIButton.btnStart
Properties
Property Value
ParentID SDUIGrid2
Caption Start Camera

SDUIButton.btnTakePhoto
Properties
Property Value
ParentID SDUIGrid2
Caption Take Photo

Events

Private Sub SDUIWebcam1_SnapSuccess (data_URI As String)

SDUIImage1.Src = data_URI
banano.Await(SDUIWebcam1.StopWebCam)
End Sub

Private Sub btnTakePhoto_Click (e As BANanoEvent)

banano.Await(SDUIWebcam1.TakePicture)
End Sub

Private Sub btnStart_Click (e As BANanoEvent)

banano.Await(SDUIWebcam1.StartWebCam)
End Sub

173 / 331
 TailwindCSS WebApps using B4X

Sweet Alert

174 / 331
TailwindCSS WebApps using B4X

175 / 331
 TailwindCSS WebApps using B4X

Lottie Player

Abstract Designer
SDUIPage.page
Properties
Property Value
Page Name* adlottieplayer
Gap 5
Paddings a=5; x=?; y=?; t=?; b=?; l=?; r=?

SDUILottiePlayer.SDUILottiePlayer1
Properties
Property Value
ParentID adlottieplayer
Json URL ./assets/liftoff.json
Loop true

176 / 331
 TailwindCSS WebApps using B4X

FlatPick DateTimePicker

177 / 331
 TailwindCSS WebApps using B4X

Abstract Designer

SDUIPage.page
Properties
Property Value
Page Name* addatepicker
Gap 5

178 / 331
 TailwindCSS WebApps using B4X

Property Value
Paddings a=5; x=?; y=?; t=?; b=?; l=?; r=?

SDUITextBox.SDUITextBox1
Properties
Property Value
ParentID addatepicker
Input Type date-picker
Size md
Color primary
Caption Date Employed
Bordered false
Date Time Format Y-m-d

SDUITextBox.SDUITextBox2
Properties
Property Value
ParentID addatepicker
Input Type date-time-picker
Size md
Color primary
Caption Date & Time of Leave
Bordered false
Date Time Format Y-m-d H:i

SDUITextBox.SDUITextBox3
Properties
Property Value
ParentID addatepicker
Input Type time-picker
Size md
Color primary
Caption Time Only
Bordered false
Date Time Format H:i
DP No Calendar true

SDUITextBox.SDUITextBox4
Properties
Property Value
ParentID addatepicker
Input Type date-picker
Size md
Color primary
Caption Date range
Bordered false
Date Time Format Y-m-d
DP Mode range
DP Week Numbers true

SDUITextBox.SDUITextBox5

179 / 331
 TailwindCSS WebApps using B4X

Properties
Property Value
ParentID addatepicker
Input Type date-picker
Size md
Color primary
Caption Date Multiple
Bordered false
Date Time Format Y-m-d
DP Alt Format F j, Y
DP Alt Input true
DP Mode multiple

180 / 331
 TailwindCSS WebApps using B4X

Roll DateTimePicker

181 / 331
 TailwindCSS WebApps using B4X

Abstract Designer

SDUIPage.page
Properties
Property Value
Page Name* adrolldate
Gap 5
Paddings a=5; x=?; y=?; t=?; b=?; l=?; r=?

182 / 331
 TailwindCSS WebApps using B4X

SDUITextBox.SDUITextBox1
Properties
Property Value
ParentID adrolldate
Input Type roll-date
Size md
Color primary
Caption Date of Birth
Bordered false

SDUITextBox.SDUITextBox2
Properties
Property Value
ParentID adrolldate
Input Type roll-date-time
Size md
Color primary
Caption Date & Time of Entry
Bordered false

SDUITextBox.SDUITextBox3
Properties
Property Value
ParentID adrolldate
Input Type roll-time
Size md
Color primary
Caption Time In
RollDate Step 5
Bordered false

FullCalendar

183 / 331
 TailwindCSS WebApps using B4X

This component can be added by code and also via the abstract designer. It raises an _eventClick event
which receives the event being clicked on the calendar. To add events to the calendar call the .AddEvent
method.

An event can have the following properties:

• allDay
• Title
• Color
• Start
• End
• Constraint e.g. businessHours / available
• groupId
• url
• overlap
• background

More details about the FullCalendar are available from its web site, https://fullcalendar.io/

Abstract Designer
SDUIPage.page
Properties
Property Value
Page Name* adfullcalendar
Flex Wrap false
Paddings a=5; x=?; y=?; t=?; b=?; l=?; r=?

SDUIFullCalendar.calendar1
Properties
Property Value
ParentID adfullcalendar

PropertyTable
A Property Table acts like a property bag, where one can define its schema and use it to display and solicit
input from users. The example below shows a property bag that is placed using the abstract designer and
then its schema designed. This component is based on the SDUITable.

184 / 331
 TailwindCSS WebApps using B4X

One is able to add components to the popety table. Above we have added text-boxes, check-boxes,
ranges etc.

185 / 331
 TailwindCSS WebApps using B4X

To get the entered contents of the property bag, we execute .GetData, the opposite of this is .SetData to
set the contents of the properties of the bag. We have also added an action button at the bottom of the
bag, which when clicked gets the contents of the property bag.

Sub SDUITable1_btnSavePropBag (e As BANanoEvent)

Dim pbag As Map = SDUITable1.GetData
Log(pbag)
End Sub

We can also trap changes to the property bag when any of the input elements change value with.

Private Sub SDUITable1_ChangeProperties (item As Map)

Log("SDUITable1_ChangeProperties...")
Log(item)
End Sub

NB: check-boxes and toggles return "on" when true.

Abstract Designer
Let's look at the layout definition and see each component and which properties were changed:

SDUIPage.page
Properties
Property Value
Page Name* adpropertytable
Flex Wrap false
Paddings a=5; x=?; y=?; t=?; b=?; l=?; r=?

SDUIDiv.SDUIDiv1
Properties
Property Value
ParentID adpropertytable
Gap 6
Grid true
Grid Cols 2

SDUITable.SDUITable1
Properties
Property Value
ParentID SDUIDiv1
Table Type property
Title property table
Pagination false
Is Compact true
Component Size md
Has Addnew false
Has Refresh false
Has Back false

SDUIMockupCode.SDUIMockupCode1
Properties

186 / 331
 TailwindCSS WebApps using B4X

Property Value
ParentID SDUIDiv1
Caption Property Table

SignaturePad

This signature is placed in the abstract designer where people can sign on. We then add methods to clear
and then download the contents as an image. This image can be saved as a base64 string or uploaded to a
server.

Abstract Designer
SDUIPage.page
Properties
Property Value
Page Name* adsignature
Flex Col true
Flex Wrap false
Gap 5
Paddings a=5; x=?; y=?; t=?; b=?; l=?; r=?

SDUIRow.SDUIRow2
Properties
Property Value
ParentID adsignature

SDUICol.SDUICol3
Properties
Property Value
ParentID SDUIRow2
Sizes xs=?; sm=12; md=6; lg=6; xl=6

SDUISignaturePad.SDUISignaturePad1
Properties
Property Value
ParentID SDUICol3

SDUIRow.SDUIRow1
Properties

187 / 331
 TailwindCSS WebApps using B4X

Property Value
ParentID adsignature

SDUICol.SDUICol1
Properties
Property Value
ParentID SDUIRow1
Sizes xs=?; sm=12; md=6; lg=?; xl=?

SDUICol.SDUICol2
Properties
Property Value
ParentID SDUIRow1
Sizes xs=?; sm=12; md=6; lg=?; xl=?

SDUIButton.btnSave
Properties
Property Value
ParentID SDUICol2
Caption Save

SDUIButton.btnClear
Properties
Property Value
ParentID SDUICol1
Caption Clear

DocxTemplator
The DocxTemplator is a class that helps you create reports in MS Word.

You create your MS Word template and then give it fields that will be replaced. Below is an example of a
template. We will replace all the words inside { } in this template.

For the tables, the contents of properties, events and methods are lists / array. Each object in the list is an
object / map with the named fields.

• properties fields are: DisplayName, FieldType, DefaultValue, List and Description.

• events fields are: name

188 / 331
 TailwindCSS WebApps using B4X

• methods fields are: name

To indicate that the records to be displayed are a list, we enclose the list name inside {# [listname]} {/}

{component}
Properties
Property Type Default Value Options Description
{#properties}{Displa {FieldT {DefaultValue} {List} {Description}{/}
yName} ype}

Events
Event Signature
{#events}{name}{/}

Methods (set… is a setter & get is a getter)

Method Name Method Signature
{#methods}{name} {signature}{/}

We then build our document feeding it the template file name and output file name.

API

With the API, one is able to understand the inner workings of each of the components. We look at:

1. Properties - these are the designer properties used in the Abstract Designer.
2. Events - these are events available for that components
3. Methods - these are methods available for that component, including getters and setters.

Alert

SDUIALERT
Properties
Property Type Default Value Options Description
ParentID String The ParentID of this div
Alert Type String normal big|empty|normal|tit Alert Type
le
Variant String info none|error|info|succ Alert Variant
ess|warning
Icon Name String fa-solid fa-bell Icon Name
Icon Color String blue Icon Color
Bg Color String Background Color
Bg Color Intensity String Background Color Intensity

189 / 331
 TailwindCSS WebApps using B4X

Property Type Default Value Options Description

Caption String This is a SithasoDaisy Alert Caption
Alert
Description String Creating Alerts via Alert Description
the Abstract
Designer
Rounded (Big Alert) Boolea True Rounded (Big Alert)
n
Text Color String Text Color
Text Color Intensity String Text Color Intensity
TimeOut String Time Out for 1 second use
1000
Shadow Boolea True Elevation
n
Visible Boolea True If visible.
n
Margins String a=?; x=?; y=?; t=?; Margins A-X-Y-T-B-L-R
b=?; l=?; r=?
Paddings String a=?; x=?; y=?; t=?; Paddings A-X-Y-T-B-L-R
b=?; l=?; r=?
Classes String Classes added to the HTML
tag.
Styles String Styles added to the HTML
tag. Must be a json String-
use =
Attributes String Attributes added to the
HTML tag. Must be a json
String- use =

Events
Event Signature
Click (e As BANanoEvent)
Action (item As String)

Methods (set… is a setter & get is a getter)

Method Name Method Signature
setTimeOut setTimeOut(ti As String)
shadow shadow(s As String)
setBGColor setBGColor(s As String)
BGColorIntensity BGColorIntensity(c As String, s As String)
setTextColor setTextColor(s As String)
TextColorIntensity TextColorIntensity(hcolor As String, intensity As String)
AddAlert AddAlert(mCallback As Object, ParentID As String, ID As String, Label As
String)
AddAlertWithTitle AddAlertWithTitle(mCallback As Object, ParentID As String, ID As String,
sTitle As String, sDescription As String)
AddBigAlert AddBigAlert(mCallback As Object, ParentID As String, ID As String,sIcon As
String, sColor As String, Title As String, Description As String, Rounded As
Boolean)
AddAlertEmpty AddAlertEmpty(mCallback As Object, ParentID As String, ID As String)
AssignElement AssignElement(mCallBack As Object, ID As String)
Enable Enable
Disable Disable
Show Show
Hide Hide
getName getName As String

190 / 331
 TailwindCSS WebApps using B4X

Method Name Method Signature

getHere getHere As String
ShowActions ShowActions
HideActions HideActions
AddActionButton AddActionButton(btnID As String, btnCaption As String, btnColor As
String) As SDUIButton
AddActionButtonIcon AddActionButtonIcon(btnID As String, sIcon As String, btnColor As String)
As SDUIButton
setCaption setCaption(l As String)
setDescription setDescription(l As String)
setIconName setIconName(i As String)
Info Info
Success Success
Warning Warning
Error Error

Art Board
SDUIARTBOARD
Properties
Property Type Default Value Options Description
ParentID String The ParentID of this div
Phone String 1 1|2|3|4|5|6 Phone
Demo Boolea False Demo
n
Horizontal Boolea False Horizontal
n
Visible Boolea True If visible.
n
Margins String a=?; x=?; y=?; t=?; Margins A-X-Y-T-B-L-R
b=?; l=?; r=?
Paddings String a=?; x=?; y=?; t=?; Paddings A-X-Y-T-B-L-R
b=?; l=?; r=?
Classes String Classes added to the
HTML tag.
Styles String Styles added to the HTML
tag. Must be a json String-
use =
Attributes String Attributes added to the
HTML tag. Must be a json
String- use =

Events

Methods (set… is a setter & get is a getter)

Method Name Method Signature
AddArtBoard AddArtBoard(mCallback As Object, ParentID As String, ID As String)
AssignElement AssignElement(mCallBack As Object, ID As String)
getHere getHere As String
setCaption setCaption(l As String)
setHTML setHTML(l As String)

191 / 331
 TailwindCSS WebApps using B4X

Method Name Method Signature

getName getName As String
Show Show
Hide Hide
Enable Enable
Disable Disable
Demo Demo
setPhoneSize setPhoneSize(s As String)
setHorizontal setHorizontal(b As Boolean)
CellID CellID(xRow As Int, xCol As Int) As String
Row Row(xRow As Int) As SDUIDiv
Cell Cell(xRow As Int, xCol As Int) As SDUIDiv

Avatar
SDUIAVATAR
Properties
Property Type Default Value Options Description
ParentID String The ParentID of this div
Size String 12 Avatar Size
Image Url String ./assets/daisywom Url For Image
an1.jpg
Shape String circle none|circle|rounde Shape
d|squircle|heart|he
xagon|hexagon-
2|decagon|pentago
n|diamond|square|
parallelogram|paral
lelogram-
2|parallelogram-
3|parallelogram-
4|star|star-
2|triangle|triangle-
2|triangle-
3|triangle-4|half-
1|half-2
Status String none none|offline|online If Online Or Offline
Online Color String Online Color
Avatar Group Boolea False If Avatar Group
n
Badge Caption String Badge Value
Badge Color String none accent|error|ghost Badge Color
|info|primary|seco
ndary|success|war
ning|none
Badge Outline Boolea False Badge Outline
n
Badge Visible Boolea False If Badge Visible
n
Place Holder String Placeholder
Text Size String Text Size

192 / 331
 TailwindCSS WebApps using B4X

Property Type Default Value Options Description

Bg Color String Background Color
Bg Color Intensity String Background Color
Intensity
Text Color String Text Color
Text Color Intensity String Text Color Intensity
Ring Boolea False Has A Ring
n
Ring Color String Ring Color
Ring Color Intensity String Ring Color Intensity
Ring Offset String Ring Offset
Ring Offset Color String Ring Offset Color
Ring Offset Color String Ring Offset Color Intensity
Intensity
Shadow Boolea False Elevation
n
Visible Boolea True If visible.
n
Margins String a=?; x=?; y=?; t=?; Margins A-X-Y-T-B-L-R
b=?; l=?; r=?
Paddings String a=?; x=?; y=?; t=?; Paddings A-X-Y-T-B-L-R
b=?; l=?; r=?
Classes String Classes added to the
HTML tag.
Styles String Styles added to the HTML
tag. Must be a json String-
use =
Attributes String Attributes added to the
HTML tag. Must be a json
String- use =

Events
Click (e As BANanoEvent)

Methods (set… is a setter & get is a getter)

Method Name Method Signature
TextColorIntensity TextColorIntensity(hcolor As String, intensity As String)
setOnlineColor setOnlineColor(s As String)
shadow shadow(s As String)
AddAvatar AddAvatar(mCallback As Object, ParentID As String, ID As String,
Size As Int, ImgURL As String)
AddAvatarGroup AddAvatarGroup(mCallback As Object, ParentID As String, ID As
String, Size As Int)
setTextSize setTextSize(s As String)
setCaption setCaption(c As String)
CaptionColorIntensity CaptionColorIntensity(c As String, i As String)
Circle Circle
IsRounded IsRounded
setRing setRing(b As Boolean)
setRingColor setRingColor(c As String)
RingColorIntensity RingColorIntensity(c As String, i As String)

193 / 331
 TailwindCSS WebApps using B4X

Method Name Method Signature

setRingOffset setRingOffset(c As String)
RingOffsetColorIntensity RingOffsetColorIntensity(c As String, i As String)
setRoundedSize setRoundedSize(s As String)
Clear Clear
AssignElement AssignElement(mCallBack As Object, ID As String)
setBadgeColor setBadgeColor(value As String)
setBadgeValue setBadgeValue(value As String)
setBadgeOutline setBadgeOutline(b As Boolean)
setBadgeVisible setBadgeVisible(b As Boolean)
On On(event As String, CallBack As Object, MethodName As String)
Enable Enable
Disable Disable
Show Show
Hide Hide
AddItem AddItem(imgURL As String)
AddItemPlaceHolder AddItemPlaceHolder(value As String)
getName getName As String
getHere getHere As String
setSrc setSrc(l As String)
setSize setSize(l As String)
setAvatarGroup setAvatarGroup(b As Boolean)
setOnline setOnline(b As Boolean)
setOffline setOffline(b As Boolean)

Badge
SDUIBADGE
Properties
Property Type Default Value Options Description
ParentID String The ParentID of this div
Variant String accent|error|ghost Variant
|info|none|primary
|secondary|success
|warning
Caption String Caption
Outline Boolea False Outlined
n
Shadow Boolea False Elevation
n
Size String none lg|md|sm|xs|none Size
No Icons Boolea True Hide Left & Right Icons
n
Bg Color String Background Color
Bg Color Intensity String Background Color
Intensity
Left Icon Name String Left Icon Name
Right Icon Name String Right Icon Name
Text Color String Text Color
Text Color Intensity String Text Color Intensity

194 / 331
 TailwindCSS WebApps using B4X

Property Type Default Value Options Description

Visible Boolea True If visible.
n
Margins String a=?; x=?; y=?; t=?; Margins A-X-Y-T-B-L-R
b=?; l=?; r=?
Paddings String a=?; x=?; y=?; t=?; Paddings A-X-Y-T-B-L-R
b=?; l=?; r=?
Classes String Classes added to the
HTML tag.
Styles String Styles added to the HTML
tag. Must be a json String-
use =
Attributes String Attributes added to the
HTML tag. Must be a json
String- use =

Events
Click (e As BANanoEvent)

Methods (set… is a setter & get is a getter)

Method Name Method Signature
AddBadge AddBadge(mCallback As Object, ParentID As String, ID As String,
Label As String)
AddBadgeEmpty AddBadgeEmpty(mCallback As Object, ParentID As String, ID As
String)
setRightIconName setRightIconName(i As String)
setLeftIconName setLeftIconName(i As String)
AssignElement AssignElement(mCallback As Object,ID As String)
Enable Enable
Disable Disable
Show Show
Hide Hide
On On(event As String, CallBack As Object, MethodName As String)
getName getName As String
getHere getHere As String
setCaption setCaption(l As String)
getCaption getCaption As String
setOutline setOutline(b As Boolean)
setGhost setGhost(b As Boolean)
setColor setColor(s As String)
setSize setSize(s As String)
SizeLG SizeLG
SizeSM SizeSM
SizeMD SizeMD
SizeXS SizeXS
ColorIntensity ColorIntensity(s As String, i As String)
SizeResponsiveLG SizeResponsiveLG(xs As Boolean, sm As Boolean, md As Boolean, lg
As Boolean)
SizeResponsiveMD SizeResponsiveMD(xs As Boolean, sm As Boolean, md As Boolean,
lg As Boolean)
SizeResponsiveSM SizeResponsiveSM(xs As Boolean, sm As Boolean, md As Boolean,

195 / 331
 TailwindCSS WebApps using B4X

Method Name Method Signature

lg As Boolean)
SizeResponsiveXS SizeResponsiveXS(xs As Boolean, sm As Boolean, md As Boolean, lg
As Boolean)
BGColorIntensity BGColorIntensity(c As String, s As String)
TextColorIntensity TextColorIntensity(hcolor As String, intensity As String)
setShadow setShadow(s As String)

Bar Code Reader

SDUIBARCODEREADER
Properties
Property Type Default Value Options Description
ParentID String The id of the element to
place this into
Hidden Boolea False The component is visible /
n hidden
Camera String environment environment|user Camera Being Used
Fps Int 60 Frames Per Second
Width String full Width
Height String Height
Qrbox Height Int 350 Qrbox Height
Qrbox Width Int 350 Qrbox Width
Remember Last Boolea False Remember Last Used
Used Camera n Camera
Torch Boolea False Torch On Or Off
n
Margins AXYTBLR String a=?; x=?; y=?; t=?; Margins A-X-Y-T-B-L-R
b=?; l=?; r=?
Paddings AXYTBLR String a=?; x=?; y=?; t=?; Paddings A-X-Y-T-B-L-R
b=?; l=?; r=?
Classes String Classes added to the
HTML tag.
Styles String Styles added to the HTML
tag. Must be a json String
Attributes String Attributes added to the
HTML tag. Must be a json
String

Events
ScanFailure (error As Object)
ScanSuccess (decodedText As String, decodedResult As Map)

Methods (set… is a setter & get is a getter)

Method Name Method Signature
FrontCamera FrontCamera
RearCamera RearCamera
Restart Restart
ScanWait ScanWait As Boolean
TorchOn TorchOn
TorchOff TorchOff

196 / 331
 TailwindCSS WebApps using B4X

Method Name Method Signature

StopScanWait StopScanWait As Boolean
Defaults Defaults
getID getID As String
getHere getHere As String
setCamera setCamera(v As String)
getCamera getCamera As String
setFps setFps(v As Int)
setQrboxHeight setQrboxHeight(v As Int)
setQrboxWidth setQrboxWidth(v As Int)
setRememberLastUsedCamera setRememberLastUsedCamera(v As Boolean)
setTorch setTorch(v As Boolean)
getTorch getTorch As Boolean
setW setW(v As String)
setH setH(v As String)
AddBarCodeReader AddBarCodeReader(CallBack As Object, ParentID As String, id As
String) As SDUIBarCodeReader
Pause Pause(shouldPauseVideo As Boolean)
Resume Resume

Bottom Nav
SDUIBOTTOMNAV
Properties
Property Type Default Value Options Description
ParentID String The ParentID of this div
Bg Color String Background Color
Bg Color Intensity String Background Color
Intensity
Size String none lg|md|sm|xs|none Size
Text Color String Text Color
Text Color Intensity String Text Color Intensity
Visible Boolea True If visible.
n
Margins String a=?; x=?; y=?; t=?; Margins A-X-Y-T-B-L-R
b=?; l=?; r=?
Paddings String a=?; x=?; y=?; t=?; Paddings A-X-Y-T-B-L-R
b=?; l=?; r=?
Classes String Classes added to the
HTML tag.
Styles String Styles added to the HTML
tag. Must be a json String-
use =
Attributes String Attributes added to the
HTML tag. Must be a json
String- use =

Events
Click (item As String)

Methods (set… is a setter & get is a getter)

197 / 331
 TailwindCSS WebApps using B4X

Method Name Method Signature

AddBottomNav AddBottomNav(mCallback As Object, ParentID As String, ID As
String)
AssignElement AssignElement(mCallBack As Object, ID As String)
Size Size As Int
SetElement SetElement(e As BANanoElement)
SetItems SetItems(l As List)
Enable Enable
Disable Disable
Show Show
Hide Hide
On On(event As String, CallBack As Object, MethodName As String)
getName getName As String
getHere getHere As String
Clear Clear
setActive setActive(ID As String)
setDisabledItem setDisabledItem(ID As String)
getItemDisabled getItemDisabled As String
getItemActive getItemActive As String
AddItem AddItem(id As String, IconName As String, Label As String, Color As
String)
ItemButton ItemButton(id As String) As SDUIButton
ItemIndicator ItemIndicator(id As String) As SDUIIndicator
ItemBadge ItemBadge(id As String) As SDUIBadge
SetItemBadgeValue SetItemBadgeValue(id As String, ivalue As string)
SetItemBadgeColor SetItemBadgeColor(id As String, cvalue As String)
SetItemBadgeOutline SetItemBadgeOutline(id As String, b As Boolean)
setColor setColor(s As String)
setSize setSize(s As String)
SizeLG SizeLG
SizeSM SizeSM
SizeMD SizeMD
SizeXS SizeXS
SizeLGResponsive SizeLGResponsive(xs As Boolean, sm As Boolean, md As Boolean, lg
As Boolean)
SizeMDResponsive SizeMDResponsive(xs As Boolean, sm As Boolean, md As Boolean,
lg As Boolean)
SizeSMResponsive SizeSMResponsive(xs As Boolean, sm As Boolean, md As Boolean,
lg As Boolean)
SizeXSResponsive SizeXSResponsive(xs As Boolean, sm As Boolean, md As Boolean, lg
As Boolean)
BGColorIntensity BGColorIntensity(c As String, s As String)
TextColorIntensity TextColorIntensity(hcolor As String, intensity As String)

Bread Crumbs
SDUIBREADCRUMBS
Properties
Property Type Default Value Options Description
ParentID String The ParentID of this div

198 / 331
 TailwindCSS WebApps using B4X

Property Type Default Value Options Description

Size String none lg|md|sm|xs|none Size
Text Color String Text Color
Text Color Intensity String Text Color Intensity
Visible Boolea True If visible.
n
Margins String a=?; x=?; y=?; t=?; Margins A-X-Y-T-B-L-R
b=?; l=?; r=?
Paddings String a=?; x=?; y=?; t=?; Paddings A-X-Y-T-B-L-R
b=?; l=?; r=?
Classes String Classes added to the
HTML tag.
Styles String Styles added to the HTML
tag. Must be a json String-
use =
Attributes String Attributes added to the
HTML tag. Must be a json
String- use =

Events

Methods (set… is a setter & get is a getter)

Method Name Method Signature
AddBreadCrumbs AddBreadCrumbs(mCallback As Object, ParentID As String, ID As
String)
AssignElement AssignElement(mcallback As Object, ID As String)
AddItem AddItem(sID As String, Label As String, href As String)
AddItemIcon AddItemIcon(sID As String, sIcon As String, Label As String, href As
String)
ItemLink ItemLink(sID As String) As SDUILink
ItemIcon ItemIcon(sID As String) As SDUIIcon
Size Size As Int
DisableItem DisableItem(btnID As String)
Item Item(ItemID As String) As SDUIButton
SetElement SetElement(e As BANanoElement)
SetItems SetItems(l As List)
getHere getHere As String
getName getName As String
Show Show
Hide Hide
Enable Enable
Disable Disable
Clear Clear
setTextColor setTextColor(s As String)
setTextSize setTextSize(s As String)
SizeLG SizeLG
SizeSM SizeSM
SizeMD SizeMD
SizeXS SizeXS
TextColorIntensity TextColorIntensity(hcolor As String, intensity As String)

199 / 331
 TailwindCSS WebApps using B4X

Button
SDUIBUTTON
Properties
Property Type Default Value Options Description
ParentID String The ParentID of this div
Caption String Button Caption Of The Button
Button Type String button badge|button|butt Type Of Button Tag
on-
icon|fab|indicator|
minus-plus|normal
Shape String default circle|default|squar Shape Of The Button
e|rounded
Variant String neutral none|accent|error| Button Color Type
ghost|glass|info|lin
k|neutral|primary|
secondary|success|
warning
Active Boolea False If Active
n
Bg Color String Background Color
Bg Color Intensity String Background Color
Intensity
Text Color String Text Color
Text Color Intensity String Text Color Intensity
Disabled Boolea False If Disabled
n
Icon String fa-solid fa-book Icon For Button Icon
Right Icon String Right Icon
Badge String 5 Badge Value
Badge Color String secondary accent|error|ghost Badge Color
|info|primary|seco
ndary|success|war
ning
Badge Outline Boolea False Badge Outline
n
Badge Visible Boolea False If Badge Visible
n
Loading Boolea False If Loading
n
No Animation Boolea False Whether To Show
n Animation
No Icons Boolea False Remove All Icon
n Placeholders
Normal Case Boolea False Caption Is Normal Case
n
Outline Boolea False If Outlined
n
Size String none lg|md|sm|xs|none Button Size
Shadow Boolea False Elevation

200 / 331
 TailwindCSS WebApps using B4X

Property Type Default Value Options Description

n
Wide Boolea False Wide
n
Block Boolea False Full Width Button
n
Visible Boolea True If visible.
n
Margins String a=?; x=?; y=?; t=?; Margins A-X-Y-T-B-L-R
b=?; l=?; r=?
Paddings String a=?; x=?; y=?; t=?; Paddings A-X-Y-T-B-L-R
b=?; l=?; r=?
Classes String Classes added to the
HTML tag.
Styles String Styles added to the HTML
tag. Must be a json String-
use =
Attributes String Attributes added to the
HTML tag. Must be a json
String- use =

Events
Click (e As BANanoEvent)Minus_Click (e As BANanoEvent)Plus_Click (e As BANanoEvent)

Methods (set… is a setter & get is a getter)

Method Name Method Signature
AddFAB AddFAB(mcallback As Object, ParentID As String, id As String,
IconName As String, sWidth As String, sHeight As String) As
SDUIButton
shadow shadow(s As String)
AddButton AddButton(mCallback As Object, ParentID As String, ID As String,
Label As String, ButtonType As String) As SDUIButton
AddButtonMinusPlus AddButtonMinusPlus(mCallback As Object, ParentID As String, ID
As String, sColor As String, xSize As String) As SDUIButton
AddButtonNormal AddButtonNormal(mCallback As Object, ParentID As String, ID As
String, Label As String) As SDUIButton
RemoveLeftIcon RemoveLeftIcon
RemoveRightIcon RemoveRightIcon
RemoveBadge RemoveBadge
RemoveIcon RemoveIcon
setLeftIconName setLeftIconName(i As String)
setRightIconName setRightIconName(i As String)
AddButtonIndicator AddButtonIndicator(mCallback As Object, ParentID As String, ID As
String, Label As String, xBadge As String) As SDUIButton
AddButtonBadge AddButtonBadge(mCallback As Object, ParentID As String, ID As
String, Label As String, xBadge As String) As SDUIButton
AddButtonIcon AddButtonIcon(mCallback As Object, ParentID As String, ID As
String, IconSize As String, IconName As String) As SDUIButton
AddButtonIconLabelTag AddButtonIconLabelTag(mCallback As Object, ParentID As String,
ID As String, IconSize As String, IconName As String) As SDUIButton
AssignElement AssignElement(mCallback As Object, ID As String)

201 / 331
 TailwindCSS WebApps using B4X

Method Name Method Signature

setIconName setIconName(i As String)
setBadgeValue setBadgeValue(ivalue As Int)
getBadgeValue getBadgeValue As Int
setBadgeColor setBadgeColor(cvalue As String)
setBadgeOutline setBadgeOutline(b As Boolean)
setBadgeVisible setBadgeVisible(b As Boolean)
Remove Remove
Show Show As SDUIButton
Hide Hide As SDUIButton
setOpensModal setOpensModal(mdl As SDUIModal)
setClosesModal setClosesModal(mdl As SDUIModal)
setToggle setToggle(s As String)
setFor setFor(l As String)
setHRef setHRef(l As String)
getName getName As String
getHere getHere As String
On On(event As String, mCallBack As Object, MethodName As String)
Enable Enable
Disable Disable
setCaption setCaption(l As String)
getCaption getCaption As String
Increment Increment
Decrement Decrement
IncrementBadge IncrementBadge
DecrementBadge DecrementBadge
FAB FAB As SDUIButton
setNormalCase setNormalCase(b As Boolean)
Glass Glass As SDUIButton
setW setW(i As String)
setH setH(i As String)
Outline Outline As SDUIButton
Ghost Ghost As SDUIButton
Link Link As SDUIButton
setActive setActive(b As Boolean)
Wide Wide As SDUIButton
Block Block As SDUIButton
Circle Circle As SDUIButton
Square Square As SDUIButton
IconMenu IconMenu As SDUIButton
IconHamburger IconHamburger As SDUIButton
setColor setColor(s As String)
setTextSize setTextSize(s As String)
setTextColor setTextColor(s As String)
TextColorIntensity TextColorIntensity(hcolor As String, intensity As String)
setSize setSize(s As String)
SizeLG SizeLG As SDUIButton
SizeSM SizeSM As SDUIButton
SizeMD SizeMD As SDUIButton
SizeXS SizeXS As SDUIButton

202 / 331
 TailwindCSS WebApps using B4X

Method Name Method Signature

SetData SetData(k As String, v As String)
GetData GetData(k As String) As String
setLoading setLoading(b As Boolean)
SizeLGResponsive SizeLGResponsive(xs As Boolean, sm As Boolean, md As Boolean, lg
As Boolean)
SizeMDResponsive SizeMDResponsive(xs As Boolean, sm As Boolean, md As Boolean,
lg As Boolean)
SizeSMResponsive SizeSMResponsive(xs As Boolean, sm As Boolean, md As Boolean,
lg As Boolean)
SizeXSResponsive SizeXSResponsive(xs As Boolean, sm As Boolean, md As Boolean, lg
As Boolean)
WideResponsive WideResponsive(xs As Boolean, sm As Boolean, md As Boolean, lg
As Boolean)
BlockResponsive BlockResponsive(xs As Boolean, sm As Boolean, md As Boolean, lg
As Boolean)
CircleResponsive CircleResponsive(xs As Boolean, sm As Boolean, md As Boolean, lg
As Boolean)
SquareResponsive SquareResponsive(xs As Boolean, sm As Boolean, md As Boolean,
lg As Boolean)
setBGColor setBGColor(s As String)
BGColorIntensity BGColorIntensity(c As String, s As String)
roundedFull roundedFull As SDUIButton
ShowOnSmallOnly ShowOnSmallOnly
NoIcons NoIcons As SDUIButton
NoAnimation NoAnimation

Button Group
SDUIBUTTONGROUP
Properties
Property Type Default Value Options Description
ParentID String The ParentID of this div
Alignment String horizontal horizontal|vertical
Size String none lg|md|sm|xs|none Size
Visible Boolea True If visible.
n
Margins String a=?; x=?; y=?; t=?; Margins A-X-Y-T-B-L-R
b=?; l=?; r=?
Paddings String a=?; x=?; y=?; t=?; Paddings A-X-Y-T-B-L-R
b=?; l=?; r=?
Classes String Classes added to the
HTML tag.
Styles String Styles added to the HTML
tag. Must be a json String-
use =
Attributes String Attributes added to the
HTML tag. Must be a json
String- use =

Events

203 / 331
 TailwindCSS WebApps using B4X

Click (item As string)

Methods (set… is a setter & get is a getter)

Method Name Method Signature
AddButtonGroup AddButtonGroup(mCallback As Object, ParentID As String, ID As
String, iSize As String)
AssignElement AssignElement(mCallBack As Object, ID As String)
Size Size As Int
SetElement SetElement(e As BANanoElement)
SetItems SetItems(l As List)
AddItem AddItem(ID As String, Label As String)
AddItemColor AddItemColor(ID As String, Label As String, color As String)
AddItemIcon AddItemIcon(ID As String, sIcon As String)
AddRadio AddRadio(ID As String, Label As String)
Button Button(ID As String) As SDUIButton
Radio Radio(ID As String) As SDUIRadio
On On(event As String, CallBack As Object, MethodName As String)
getHere getHere As String
getName getName As String
Show Show
Hide Hide
Enable Enable
Disable Disable
Clear Clear
Horizontal Horizontal
Vertical Vertical
HorizontalResponsive HorizontalResponsive(xs As Boolean, sm As Boolean, md As
Boolean, lg As Boolean)
VerticalResponsive VerticalResponsive(xs As Boolean, sm As Boolean, md As Boolean,
lg As Boolean)
setActive setActive(btnID As String)
setRounded setRounded(b As Boolean)
setSize setSize(s As String)
SizeLGResponsive SizeLGResponsive(xs As Boolean, sm As Boolean, md As Boolean, lg
As Boolean)
SizeMDResponsive SizeMDResponsive(xs As Boolean, sm As Boolean, md As Boolean,
lg As Boolean)
SizeSMResponsive SizeSMResponsive(xs As Boolean, sm As Boolean, md As Boolean,
lg As Boolean)
SizeXSResponsive SizeXSResponsive(xs As Boolean, sm As Boolean, md As Boolean, lg
As Boolean)

Card
SDUICARD
Properties
Property Type Default Value Options Description
ParentID String The ParentID of this div
Card Type String default default|empty|for
m
Image Url String ./assets/img_2.jpg Image Url

204 / 331
 TailwindCSS WebApps using B4X

Property Type Default Value Options Description

Image Full Boolea False Image Full
n
Image Height String Image Height
Image Width String Image Width
Figure Class String Figure Classes
Image Class String Image Classes
Title String Card 1 Title
Title Badge String Title Badge
Title Badge Color String Title Badge Color
Description String If a dog chews Description
shoes whose shoes
does he choose?
Center Items Boolea False Center Items
n
Height String 26.25rem Height
Width String 25rem Width
Col Span String Column Span
Row Span String Row Span
Bg Color String base Background Color
Bg Color Intensity String 100 Background Color
Intensity
Text Color String Text Color
Text Color Intensity String Text Color Intensity
Bordered Boolea False Bordered
n
Border Color String Border Color
Border Color String Border Color Intensity
Intensity
Card Side Boolea False Card Side
n
Compact Boolea False Compact
n
Glass Boolea False Apply Glass Effect
n
Visible Boolea True If visible.
n
Title Class String Title Classes
Content Class String Content Classes
Actions Class String Actions Classes
Margins String a=?; x=?; y=?; t=?; Margins A-X-Y-T-B-L-R
b=?; l=?; r=?
Paddings String a=?; x=?; y=?; t=?; Paddings A-X-Y-T-B-L-R
b=?; l=?; r=?
Classes String Classes added to the
HTML tag.
Styles String Styles added to the HTML
tag. Must be a json String-
use =
Attributes String Attributes added to the
HTML tag. Must be a json

205 / 331
 TailwindCSS WebApps using B4X

Property Type Default Value Options Description

String- use =

Events
Click (e As BANanoEvent)Action (item As String)

Methods (set… is a setter & get is a getter)

Method Name Method Signature
setActionClass setActionClass(s As String)
setContentClass setContentClass(s As String)
setImageURL setImageURL(s As String)
AddCard AddCard(mCallback As Object, ParentID As String, ID As String,
ImageURL As String, CardTitle As String)
AddCardEmpty AddCardEmpty(mCallback As Object, ParentID As String, ID As
String)
AddCardForm AddCardForm(mCallback As Object, ParentID As String, ID As
String, xTitle As String)
setFormName setFormName(s As String)
AssignElement AssignElement(mCallBack As Object, ID As String)
setCenterChildren setCenterChildren(b As Boolean)
AddActionButton AddActionButton(btnID As String, btnCaption As String, btnColor
As String) As SDUIButton
AddActionButtonIcon AddActionButtonIcon(btnID As String, sIcon As String, btnColor As
String) As SDUIButton
AddActionBadgeColor AddActionBadgeColor(btnID As String, btnCaption As String, Color
As String) As SDUIBadge
AddTitleBadgeColor AddTitleBadgeColor(btnID As String, btnCaption As String, Color As
String) As SDUIBadge
On On(event As String, CallBack As Object, MethodName As String)
getHere getHere As String
getName getName As String
Show Show
Hide Hide
Enable Enable
Disable Disable
ClearActions ClearActions
setBGColor setBGColor(s As String)
BGColorIntensity BGColorIntensity(c As String, s As String)
setBorderColor setBorderColor(c As String)
BorderColorIntensity BorderColorIntensity(c As String, i As String)
Bordered Bordered
ImageFull ImageFull
Normal Normal
Compact Compact
Side Side
SideResponsive SideResponsive(xs As Boolean, sm As Boolean, md As Boolean, lg
As Boolean)
NormalResponsive NormalResponsive(xs As Boolean, sm As Boolean, md As Boolean,
lg As Boolean)
CompactResponsive CompactResponsive(xs As Boolean, sm As Boolean, md As Boolean,
lg As Boolean)

206 / 331
 TailwindCSS WebApps using B4X

Method Name Method Signature

setW setW(s As String)
setH setH(s As String)
setShadow setShadow(s As String)
RoundedBox RoundedBox
Glass Glass
CellID CellID(xRow As Int, xCol As Int) As String
Row Row(xRow As Int) As SDUIDiv
Cell Cell(xRow As Int, xCol As Int) As SDUIDiv
DropDownContent DropDownContent
setSrc setSrc(l As String)
setTitleCaption setTitleCaption(l As String)
setDescriptionCaption setDescriptionCaption(l As String)
flexGrow flexGrow As SDUICard
flex flex As SDUICard
flex1 flex1 As SDUICard
wFull wFull As SDUICard
BuildGrid BuildGrid
ResetValidation ResetValidation
ValidateEach ValidateEach
ValidateAll ValidateAll
Validate Validate(response As Boolean)
IsValid IsValid As Boolean
TextColorIntensity TextColorIntensity(hcolor As String, intensity As String)
setColSpan setColSpan(s As String)
setRowSpan setRowSpan(s As String)

Carousel
SDUICAROUSEL
Properties
Property Type Default Value Options Description
ParentID String The ParentID of this div
Height String 500px Height
Width String 500px Width
Item Alignment String center center|end Item Alignment
Rounded Box Boolea False Rounded Box
n
Shadow Boolea True Shadow
n
Vertical Boolea False Vertical
n
Visible Boolea True If visible.
n
Margins String a=?; x=?; y=?; t=?; Margins A-X-Y-T-B-L-R
b=?; l=?; r=?
Paddings String a=?; x=?; y=?; t=?; Paddings A-X-Y-T-B-L-R
b=?; l=?; r=?
Classes String Classes added to the
HTML tag.

207 / 331
 TailwindCSS WebApps using B4X

Property Type Default Value Options Description

Styles String Styles added to the HTML
tag. Must be a json String-
use =
Attributes String Attributes added to the
HTML tag. Must be a json
String- use =

Events

Methods (set… is a setter & get is a getter)

Method Name Method Signature
AddCarousel AddCarousel(mCallback As Object, ParentID As String, ID As String,
iWidth As String, iHeight As String)
AssignElement AssignElement(mCallBack As Object, ID As String)
AddImage AddImage(id As String, imageURL As String, imageAlt As String) As
SDUICarouselItem
AddItem AddItem(id As String) As SDUICarouselItem
Panel Panel(id As String) As SDUIDiv
RoundedBox RoundedBox
setW setW(w As String)
setH setH(h As String)
setWFull setWFull(c As Boolean)
setHFull setHFull(c As Boolean)
setFullBleed setFullBleed(c As Boolean)
On On(event As String, CallBack As Object, MethodName As String)
getHere getHere As String
getName getName As String
Show Show
Hide Hide
Enable Enable
Disable Disable
Clear Clear
Center Center
AtEnd AtEnd
Vertical Vertical
setShadow setShadow(s As String)

ChartKick
SDUICHARTKICK
Properties
Property Type Default Value Options Description
ParentID String The id of the element to
place this into
Title String My Chart Title
XTitle String X XTitle
YTitle String Y YTitle
Hidden Boolea False Hidden
n

208 / 331
 TailwindCSS WebApps using B4X

Property Type Default Value Options Description

BorderDash String 0 Border Dash
BorderWidth String 0 Border Width
Bytes Boolea False Friendly bytes sizes
n
ChartType String LineChart AreaChart|BarChart ChartType
|BubbleChart|Colu
mnChart|LineChart
|PieChart|ScatterC
hart
DownloadBackgrou String accent|amber|blac DownloadBackgroundColo
ndColor k|blue|blue- r
grey|brown|cyan|d
eep-orange|deep-
purple|error|green
|grey|indigo|info|li
ght-blue|light-
green|lime|none|o
range|pink|primary
|purple|red|secon
dary|success|teal|t
ransparent|warning
|white|yellow
Curve Boolea False Curve
n
Decimals String Decimals
Discrete Boolea False Discrete
n
Donut Boolea False Donut
n
EmptyLabel String No Data EmptyLabel
FileName String chart FileName
Download Boolea True Download
n
Height String 25rem Height
Width String 25rem Width
LegendPosition String bottom|none|right LegendPosition
|top
LibraryBackgroundC String accent|amber|blac LibraryBackgroundColor
olor k|blue|blue-
grey|brown|cyan|d
eep-orange|deep-
purple|error|green
|grey|indigo|info|li
ght-blue|light-
green|lime|none|o
range|pink|primary
|purple|red|secon
dary|success|teal|t
ransparent|warning
|white|yellow
LoadingLabel String Loading... LoadingLabel

209 / 331
 TailwindCSS WebApps using B4X

Property Type Default Value Options Description

Max String Max
Min String Min
SetMinMax Boolea False SetMinMax
n
Points Boolea False Points
n
SetPrecision Boolea False SetPrecision
n
Precision String Precision
SetRound Boolea False SetRound
n
Round String Round
Prefix String Prefix
Refresh String 0 Refresh
Stacked Boolea False Stacked
n
Suffix String Suffix
Thousands String Thousands
XMax String XMax
XMin String XMin
SetXMinXMax Boolea False SetXMinXMax
n
ShowLine Boolea True ShowLine
n
Zeros Boolea False Zeros
n
Classes String Classes added to the
HTML tag.
Styles String Styles added to the HTML
tag. Must be a json String-
use =
Attributes String Attributes added to the
HTML tag. Must be a json
String- use =
Disabled Boolea False Disabled
n
Margins AXYTBLR String a=?; x=?; y=?; t=?; Margins A-X-Y-T-B-L-R
b=?; l=?; r=?
Paddings AXYTBLR String a=?; x=?; y=?; t=?; Paddings A-X-Y-T-B-L-R
b=?; l=?; r=?

Events
Click (e As BANanoEvent)

Methods (set… is a setter & get is a getter)

Method Name Method Signature
Remove Remove()
getID getID As String
getHere getHere As String
setBorderDash setBorderDash(vBorderDash As String)

210 / 331
 TailwindCSS WebApps using B4X

Method Name Method Signature

setBorderWidth setBorderWidth(vBorderWidth As String)
setBytes setBytes(vBytes As Boolean)
setChartType setChartType(vChartType As String)
setCurve setCurve(vCurve As Boolean)
setDecimal setDecimal(vDecimals As String)
setDiscrete setDiscrete(vDiscrete As Boolean)
setDonut setDonut(vDonut As Boolean)
setDownload setDownload(vDownload As Boolean)
setDownloadBackground setDownloadBackground(vDownloadBackgroundColor As String)
setEmptyLabel setEmptyLabel(vEmptyLabel As String)
getFileName getFileName As String
setFileName setFileName(vFileName As String)
setH setH(vHeight As String)
setTitle setTitle(xLabel As String)
setLegendPosition setLegendPosition(vLegendPosition As String)
setLibraryBackgroundColor setLibraryBackgroundColor(vLibraryBackgroundColor As String)
setLoadingLabel setLoadingLabel(vLoadingLabel As String)
setMax setMax(vMax As String)
setMin setMin(vMin As String)
setPoints setPoints(vPoints As Boolean)
setPrecision setPrecision(vPrecision As String)
setPrefix setPrefix(vPrefix As String)
setRefresh setRefresh(vRefresh As String)
setRound setRound(vRound As String)
setStacked setStacked(vStacked As Boolean)
setSuffix setSuffix(vSuffix As String)
setThousands setThousands(vThousands As String)
setW setW(vWidth As String)
setXMax setXMax(vXMax As String)
setXMin setXMin(vXMin As String)
setXTitle setXTitle(vXTitle As String)
setYTitle setYTitle(vYTitle As String)
setZeros setZeros(vZeros As Boolean)
Clear Clear
AddXYMap AddXYMap(values As Map)
AddBubble AddBubble(X As String, y As String, size As Double)
AddSeries1 AddSeries1(seriesCaption As String, seriesColor As String,
seriesCurve As Boolean)
AddSeries AddSeries(seriesCaption As String, seriesColor As String,
seriesCurve As Boolean, seriesData As Map)
AddSeriesXY AddSeriesXY(seriesCaption As String, X As String, Y As String)
AddSeriesXYMap AddSeriesXYMap(seriesName As String, values As Map)
AddXY AddXY(X As String, y As String)
AddXYColor AddXYColor(X As String, y As String, color As String)
Refresh Refresh
getHTML getHTML As String
HiddenIndices HiddenIndices As Map
ChartObject ChartObject As BANanoObject

211 / 331
 TailwindCSS WebApps using B4X

Chat
SDUICHAT
Properties
Property Type Default Value Options Description
ParentID String The ParentID of this div
Show Image Boolea True Show Image
n
Image Shape String circle none|circle|rounde Image Shape
d|squircle|heart|he
xagon|hexagon-
2|decagon|pentago
n|diamond|square|
parallelogram|paral
lelogram-
2|parallelogram-
3|parallelogram-
4|star|star-
2|triangle|triangle-
2|triangle-
3|triangle-4|half-
1|half-2
Image Size String 10 Image Size
Show Header Boolea True Show Header
n
Show Footer Boolea True Show Footer
n
Text Color String Text Color
Text Color Intensity String Text Color Intensity
Bg Color String Bg Color
Bg Color Intensity String Bg Color Intensity
Height String Height
Width String full Width
Rounded Box Boolea False Rounded Box
n
Shadow String Shadow
Visible Boolea True If visible.
n
Margins String a=?; x=?; y=?; t=?; Margins A-X-Y-T-B-L-R
b=?; l=?; r=?
Paddings String a=?; x=?; y=?; t=?; Paddings A-X-Y-T-B-L-R
b=?; l=?; r=?
Classes String Classes added to the
HTML tag.
Styles String Styles added to the HTML
tag. Must be a json String-
use =
Attributes String Attributes added to the
HTML tag. Must be a json
String- use =

Events

212 / 331
 TailwindCSS WebApps using B4X

Event Signature

Methods (set… is a setter & get is a getter)

Method Name Method Signature
Class_Globals Class_Globals
DesignerCreateView DesignerCreateView (Target As BANanoElement, Props As Map)
Initialize Initialize (CallBack As Object, cName As String, EventName As
String)
shadow shadow(s As String)
RoundedBox RoundedBox
TextColorIntensity TextColorIntensity(hcolor As String, intensity As String)
BGColorIntensity BGColorIntensity(c As String, s As String)
setBgColor setBgColor(s As String)
height height(s As String)
width width(s As String)
AssignElement AssignElement(mCallBack As Object, ID As String)
AddChat AddChat(mCallback As Object, ParentID As String, ID As String)
Clear Clear
Enable Enable
Disable Disable
getName getName As String
getHere getHere As String
Show Show
Hide Hide
setShowFooter setShowFooter(b As Boolean)
setShowHeader setShowHeader(b As Boolean)
setShowImage setShowImage(b As Boolean)
AddConversationFromBasic AddConversationFromBasic(cID As String, sMessage As String) As
SDUIChat
AddConversationToBasic AddConversationToBasic(cID As String, sMessage As String) As
SDUIChat
AddConversation AddConversation(cID As String, bIncoming As Boolean,
sSenderImage As String, sSenderName As String, sSenderTime As
String, sMessage As String, sFooter As String) As SDUIChat
DeleteConversation DeleteConversation(cID As String) As SDUIChat
HideConversation HideConversation(cID As String) As SDUIChat
ShowConversation ShowConversation(cID As String) As SDUIChat
ShowConversationImage ShowConversationImage(cID As String) As SDUIChat
HideConversationImage HideConversationImage(cID As String) As SDUIChat
ShowConversationHeader ShowConversationHeader(cID As String) As SDUIChat
HideConversationHeader HideConversationHeader(cID As String) As SDUIChat
ShowConversationFooter ShowConversationFooter(cID As String) As SDUIChat
HideConversationFooter HideConversationFooter(cID As String) As SDUIChat
ShowConversationMessage ShowConversationMessage(cID As String) As SDUIChat
HideConversationMessage HideConversationMessage(cID As String) As SDUIChat
UpdateConversation UpdateConversation(cID As String, sSenderImage As String,
sSenderName As String, sSenderTime As String, sMessage As
String, sFooter As String) As SDUIChat
SetConversationSenderTime SetConversationSenderTime(cID As String, sSenderTime As String)
As SDUIChat

213 / 331
 TailwindCSS WebApps using B4X

Method Name Method Signature

SetConversationFooter SetConversationFooter(cID As String, sFooter As String) As
SDUIChat
SetConversationSenderName SetConversationSenderName(cID As String, sSenderName As
String) As SDUIChat
SetConversationSenderImage SetConversationSenderImage(cID As String, sSenderImage As
String) As SDUIChat
SetConversationMessage SetConversationMessage(cID As String, sMessage As String) As
SDUIChat
SetConversationColor SetConversationColor(cID As String, sColor As String) As SDUIChat
AddToParent AddToParent(targetID As String, props As Map)

Checkbox
SDUICHECKBOX
Properties
Property Type Default Value Options Description
ParentID String The ParentID of this div
Caption String CheckBox 1 Caption
Variant String neutral accent|error|ghost Variant
|info|none|nuetral
|primary|secondary
|success|warning
Checked Boolea False Checked
n
Check Mark Color String The color of the check
(Hex) mark (Hex)
Checked BG Color String Checked background Color
(Hex) (Hex)
Disabled Boolea False If Disabled
n
Placement String left left|right Placement Of The
Component
Read Only Boolea False Read Only
n
Size String none lg|md|sm|xs|none Size
Width String full Width
Indeterminate Boolea False Indeterminate
n
Auto Focus Boolea False Auto Focus
n
Text Color String Text Color
Text Color Intensity String Text Color Intensity
Visible Boolea True If visible.
n
Margins String a=?; x=?; y=?; t=?; Margins A-X-Y-T-B-L-R
b=?; l=?; r=?
Paddings String a=?; x=?; y=?; t=?; Paddings A-X-Y-T-B-L-R
b=?; l=?; r=?
Classes String Classes added to the
HTML tag.

214 / 331
 TailwindCSS WebApps using B4X

Property Type Default Value Options Description

Styles String Styles added to the HTML
tag. Must be a json String-
use =
Attributes String Attributes added to the
HTML tag. Must be a json
String- use =

Events
Change (Checked As Boolean)

Methods (set… is a setter & get is a getter)

Method Name Method Signature
setW setW(v As String)
AddCheckBox AddCheckBox(mCallback As Object, ParentID As String, ID As
String)
setFieldName setFieldName(s As String)
AddCheckBoxLabel AddCheckBoxLabel(mCallback As Object, ParentID As String, ID As
String, Label As String, position As String)
AssignElement AssignElement(mCallBack As Object, ID As String)
setAutoFocus setAutoFocus(p As Boolean)
Enable Enable
Disable Disable
Show Show
Hide Hide
Toggle Toggle
setChecked setChecked(b As Boolean)
getChecked getChecked As Boolean
setIndeterminate setIndeterminate (b As Boolean)
getIndeterminate getIndeterminate As Boolean
getDisabled getDisabled As Boolean
On On(event As String, CallBack As Object, MethodName As String)
getHere getHere As String
getName getName As String
setCaption setCaption(l As String)
setColor setColor(s As String)
setSize setSize(s As String)
setRequired setRequired(b As Boolean)
setReadOnly setReadOnly(b As Boolean)
SizeLG SizeLG
SizeSM SizeSM
SizeMD SizeMD
SizeXS SizeXS
SizeLGResponsive SizeLGResponsive(xs As Boolean, sm As Boolean, md As Boolean, lg
As Boolean)
SizeMDResponsive SizeMDResponsive(xs As Boolean, sm As Boolean, md As Boolean,
lg As Boolean)
SizeSMResponsive SizeSMResponsive(xs As Boolean, sm As Boolean, md As Boolean,
lg As Boolean)
SizeXSResponsive SizeXSResponsive(xs As Boolean, sm As Boolean, md As Boolean, lg
As Boolean)

215 / 331
 TailwindCSS WebApps using B4X

Method Name Method Signature

setCheckMarkColor setCheckMarkColor(c As String)
setCheckedBGColor setCheckedBGColor(c As String)

Col
SDUICOL
Properties
Property Type Default Value Options Description
ParentID String The ParentID of this div
Caption String The caption of the
element
Sizes String xs=?; sm=?; md=?; Sizes xs=?; sm=12; md=?;
lg=?; xl=? lg=?; xl=?
Absolute Boolea False Absolute
n
Align Content String none around|baseline|be Align Content
tween|center|end|
evenly|none|start
Align Items String none baseline|center|en Align Items
d|none|start|stretc
h
Background Image String Background Image
Bg Color String Background Color
Bg Color Intensity String Background Color
Intensity
Border String Border Size
Border Color String Border Color
Border Color String Border Color Intensity
Intensity
Columns String Number Of Columns
Within An Element
Gap String Gap
Height String Height
Hover String Classes To Apply On Hover
Place Content String none around|baseline|be How Content Is Justified
tween|center|end| And Aligned At The Same
evenly|none|start| Time
stretch
Place Items String none baseline|center|en Place Items
d|none|start|stretc
h
Relative Boolea False Relative
n
Rounded String Rounded
Shadow String Shadow
Text Color String Text Color
Text Color Intensity String Text Color Intensity
Width String Width
Visible Boolea True If visible.
n

216 / 331
 TailwindCSS WebApps using B4X

Property Type Default Value Options Description

Margins String a=?; x=?; y=?; t=?; Margins A-X-Y-T-B-L-R
b=?; l=?; r=?
Paddings String a=?; x=?; y=?; t=?; Paddings A-X-Y-T-B-L-R
b=?; l=?; r=?
Classes String Classes added to the
HTML tag.
Styles String Styles added to the HTML
tag. Must be a json String-
use =
Attributes String Attributes added to the
HTML tag. Must be a json
String- use =

Events
Click (e As BANanoEvent)

Methods (set… is a setter & get is a getter)

Method Name Method Signature
DesignerCreateView DesignerCreateView (Target As BANanoElement, Props As Map)
Initialize Initialize (CallBack As Object, cName As String, EventName As
String)
AssignElement AssignElement(mCallBack As Object, ID As String)
setCaption setCaption(l As String)
getCaption getCaption As String
setHTML setHTML(hx As String)
shadow shadow(s As String)
RoundedBox RoundedBox
TextColorIntensity TextColorIntensity(hcolor As String, intensity As String)
BGColorIntensity BGColorIntensity(c As String, s As String)
alignContent alignContent(s As String) As SDUICol
alignItems alignItems(s As String) As SDUICol
setBackgroundImage setBackgroundImage(s As String)
bgColor bgColor(s As String) As SDUICol
border border(s As String) As SDUICol
borderColor borderColor(s As String) As SDUICol
borderColorIntensity borderColorIntensity(c As String, i As String) As SDUICol
columns columns(s As String) As SDUICol
setGap setGap(s As String)
height height(s As String) As SDUICol
hover hover(s As String) As SDUICol
placeContent placeContent(s As String) As SDUICol
placeItems placeItems(s As String) As SDUICol
rounded rounded(s As String) As SDUICol
textColor textColor(s As String) As SDUICol
width width(s As String) As SDUICol
Enable Enable
Disable Disable
getName getName As String
getHere getHere As String
Show Show

217 / 331
 TailwindCSS WebApps using B4X

Method Name Method Signature

Hide Hide
absolute absolute As SDUICol
relative relative As SDUICol

Collapse Panels
SDUICOLLAPSEPANELS
Properties
Property Type Default Value Options Description
ReadMe Children String [name]_1_content The id of each panel
ParentID String The ParentID of this div
Titles String Panel 1; Panel 2; Panels Separated By ;
Panel 3
Plus Boolea False Use Plus And Not Arrow
n
Rounded Box Boolea True Rounded Box
n
Shadow Boolea True Shadow
n
Open Boolea True If Open.
n
Bg Color String Background Color
Bg Color Intensity String Background Color
Intensity
Text Color String Text Color
Text Color Intensity String Text Color Intensity
Visible Boolea True If visible.
n
Margins String a=?; x=?; y=?; t=?; Margins A-X-Y-T-B-L-R
b=?; l=?; r=?
Paddings String a=?; x=?; y=?; t=?; Paddings A-X-Y-T-B-L-R
b=?; l=?; r=?
Classes String Classes added to the
HTML tag.
Styles String Styles added to the HTML
tag. Must be a json String-
use =
Attributes String Attributes added to the
HTML tag. Must be a json
String- use =

Events
Change (pos As Int)

Methods (set… is a setter & get is a getter)

Method Name Method Signature
shadow shadow(s As String)
RoundedBox RoundedBox
setTextColor setTextColor(s As String)
TextColorIntensity TextColorIntensity(hcolor As String, intensity As String)

218 / 331
 TailwindCSS WebApps using B4X

Method Name Method Signature

AddCollapsePanels AddCollapsePanels(mCallback As Object, ParentID As String, ID As
String)
Clear Clear
AssignElement AssignElement(mCallBack As Object, ID As String)
BGColorIntensity BGColorIntensity(c As String, s As String)
Size Size As Int
SetElement SetElement(e As BANanoElement)
SetItems SetItems(l As List)
Arrow Arrow
Plus Plus
AddItems AddItems(ItemsToAdd As List)
setActive setActive(pos As Int)
Item Item(pos As Int) As SDUICollapse
Panel Panel(pos As Int) As SDUIDiv
On On(event As String, CallBack As Object, MethodName As String)
getHere getHere As String
getName getName As String
Show Show
Hide Hide
Enable Enable
Disable Disable

Div

SDUIDIV
Properties
Property Type Default Value Options Description
ParentID String The ParentID of this div
Caption String The caption of the element
HTML String RAW HTML. Overrides the
Caption property.
Container Boolea False Container
n
Mx Auto Boolea False Mx-auto
n
BackgroundImage String The background image of the
page
FullPage Boolea False w-full & h-full
n
Flex Boolea False Flex
n
Flex1 Boolea False Flex1
n
Flex Col Boolea False FlexCol
n
Flex None Boolea False FlexNone
n
Flex Row Boolea False FlexRow
n
Flex Grow Boolea False Flex Grow
n

219 / 331
 TailwindCSS WebApps using B4X

Property Type Default Value Options Description

Flex Wrap Boolea False Wrap Overflow Contents
n
Gap String Gap Between Items
Grid Boolea False Grid
n
Grid Cols String GridCols
Device Grid Cols String xs=?; sm=?; md=?; Grid Cols Per Device xs=?;
lg=?; xl=? sm=?; md=?; lg=?; xl=?
Gap X String Gap X
Gap Y String Gap Y
Grid Flow Col Boolea False Grid-flow-col
n
Grid Rows String GridRows
Grid Flow Row Boolea False Grid-flow-row
n
Col Span String ColSpan
Row Span String RowSpan
Justify Content String none none|around|betwee
n|center|end|evenly
|start
Justify Items String none none|center|end|sta
rt|stretch
Align Content String none around|baseline|bet Align Content
ween|center|end|ev
enly|none|start
Align Items String none baseline|center|end| Align Items
none|start|stretch
Bg Color String Background Color
Bg Color Intensity String Background Color Intensity
Text Color String Text Color
Text Color Intensity String Text Color Intensity
Rounded Boolea False Rounded
n
Stack Boolea False Stack
n
Bordered Boolea False Bordered
n
Border Color String Border Color
Border Color Intensity String Border Color Intensity
Columns String Number Of Columns Within
An Element
Place Content String none around|baseline|bet How Content Is Justified And
ween|center|end|ev Aligned At The Same Time
enly|none|start|stret
ch
Place Items String none baseline|center|end| Place Items
none|start|stretch
Width String Width
Min Width String MinW
Max Width String MaxW
Height String Height
Min Height String MinH
Max Height String MaxH
H Full Boolea False HFull
n

220 / 331
 TailwindCSS WebApps using B4X

Property Type Default Value Options Description

W Full Boolea False WFull
n
Visible Boolea True If visible.
n
Margins String a=?; x=?; y=?; t=?; Margins A-X-Y-T-B-L-R
b=?; l=?; r=?
Paddings String a=?; x=?; y=?; t=?; Paddings A-X-Y-T-B-L-R
b=?; l=?; r=?
Classes String Classes added to the HTML
tag.
Styles String Styles added to the HTML
tag. Must be a json String-
use =
Attributes String Attributes added to the
HTML tag. Must be a json
String- use =

Events
Event Signature
Click (e As BANanoEvent)KeyClick (item As string)

Methods (set… is a setter & get is a getter)

Method Name Method Signature
setDeviceGridCols setDeviceGridCols(s As String)
hasborder hasborder
alignContent alignContent(s As String) As SDUIDiv
alignItems alignItems(s As String) As SDUIDiv
setFullPage setFullPage(b As Boolean)
CreateDiv CreateDiv(mCallback As Object, ParentID As String, ID As String) As
SDUIDiv
CreateCustomTag CreateCustomTag(mCallback As Object, ParentID As String, ID As String,
sTag As String) As SDUIDiv
AddFileInputCamera AddFileInputCamera(ID As String, xSize As String, sColor As String) As
SDUIFileInput
AddFileInputProgress AddFileInputProgress(ID As String, xsize As String, sColor As String) As
SDUIFileInput
AssignElement AssignElement(mCallBack As Object, ID As String)
CenterChildren CenterChildren As SDUIDiv
AddStyleComputed AddStyleComputed(var As String, value As String) As SDUIDiv
GetStyleComputed GetStyleComputed(var As String) As Object
RemoveStyleComputed RemoveStyleComputed(var As String) As SDUIDiv
styles styles(varStyles As String) As SDUIDiv
classes classes(varStyles As String) As SDUIDiv
attributes attributes(varStyles As String) As SDUIDiv
bordered bordered As SDUIDiv
colStart colStart(s As String) As SDUIDiv
colEnd colEnd(i As String) As SDUIDiv
colSpan colSpan(i As String) As SDUIDiv
rowSpan rowSpan(i As String) As SDUIDiv
opacity opacity(i As String) As SDUIDiv
borderOpacity borderOpacity(i As String) As SDUIDiv
divideOpacity divideOpacity(i As String) As SDUIDiv
objectCover objectCover As SDUIDiv
colSpanResponsive colSpanResponsive(xs As String, sm As String, md As String, lg As String, xl
As String) As SDUIDiv

221 / 331
 TailwindCSS WebApps using B4X

Method Name Method Signature

gap gap(i As String) As SDUIDiv
gapX gapX(i As String) As SDUIDiv
spaceX spaceX(i As String) As SDUIDiv
spaceY spaceY(i As String) As SDUIDiv
spaceYPx spaceYPx As SDUIDiv
spaceYReverse spaceYReverse As SDUIDiv
spaceXReverse spaceXReverse As SDUIDiv
spaceXPx spaceXPx As SDUIDiv
toColorIntensity toColorIntensity(c As String, i As String) As SDUIDiv
fromColor fromColor(c As String) As SDUIDiv
toColor toColor(c As String) As SDUIDiv
viaColorIntensity viaColorIntensity(c As String, i As String) As SDUIDiv
fromCurrent fromCurrent As SDUIDiv
fromTransparent fromTransparent As SDUIDiv
listNone listNone As SDUIDiv
FixColor FixColor(prefix As String, v As String) As String
FixColorIntensity FixColorIntensity(prefix As String, v As String, i As String) As String
FixSize FixSize(prefix As String, v As String) As String
hiddenResponsive hiddenResponsive(xs As Boolean, sm As Boolean, md As Boolean, lg As
Boolean) As SDUIDiv
AddContainer AddContainer(mCallback As Object, ParentID As String, ID As String)
AddRollDateTime AddRollDateTime(sID As String, sCaption As String, sHint As String, sPrefix
As String, sSuffix As String, options As RollDateOptions) As SDUITextBox
AddFlatPickDateTime AddFlatPickDateTime(sID As String, sCaption As String, sHint As String,
sPrefix As String, sSuffix As String, bIncludeTime As Boolean) As
SDUITextBox
AddDateTimePicker AddDateTimePicker(sID As String, xCaption As String, xHint As String,
xPrefix As String, xSuffix As String, bIncludeTime As Boolean, sDateFormat
As String, nMode As String, bAltInput As Boolean, sAltInput As String,
bNoCalendar As Boolean, bWeekNumbers As Boolean) As SDUITextBox
AddForm AddForm(mCallback As Object, ParentID As String, ID As String)
container container As SDUIDiv
Show Show As SDUIDiv
Hide Hide As SDUIDiv
Enable Enable As SDUIDiv
Disable Disable As SDUIDiv
Clear Clear As SDUIDiv
Empty Empty As SDUIDiv
designMode designMode(b As Boolean) As SDUIDiv
getDisabled getDisabled As Boolean
BuildGrid BuildGrid As SDUIDiv
Shrink Shrink As SDUIDiv
Append Append(varText As String) As SDUIDiv
On On(event As String, CallBack As Object, MethodName As String)
getName getName As String
getHere getHere As String
RemoveAttr RemoveAttr(k As String) As SDUIDiv
AddAttr AddAttr(k As String, v As String) As SDUIDiv
AddStyleM AddStyleM(ms As Map) As SDUIDiv
NextRow NextRow As Int
ThisRow ThisRow As Int
Row Row(r As Int) As SDUIDiv
RowID RowID(r As Int) As String
CellID CellID(r As Int, c As Int) As String
Cell Cell(r As Int, c As Int) As SDUIDiv

222 / 331
 TailwindCSS WebApps using B4X

Method Name Method Signature

AddRows1 AddRows1 As SDUIDiv
AddRows2 AddRows2 As SDUIDiv
AddRows3 AddRows3 As SDUIDiv
AddRows4 AddRows4 As SDUIDiv
AddRows5 AddRows5 As SDUIDiv
AddRows6 AddRows6 As SDUIDiv
AddRows7 AddRows7 As SDUIDiv
AddRows8 AddRows8 As SDUIDiv
AddRows9 AddRows9 As SDUIDiv
AddRows10 AddRows10 As SDUIDiv
AddRows11 AddRows11 As SDUIDiv
AddRows12 AddRows12 As SDUIDiv
AddRows AddRows(iRows As Int) As SDUIDiv
AddColumns AddColumns(iColumns As Int, gxs As Int, gsm As Int, gmd As Int, glg As Int,
gxl As Int) As SDUIDiv
AddColumnsOS AddColumnsOS(iColumns As Int, osxs As Int, osm As Int, omd As Int, olg
As Int, oxl As Int, gxs As Int, gsm As Int, gmd As Int, glg As Int, gxl As Int)
As SDUIDiv
AddColumnsOSMP AddColumnsOSMP(iColumns As Int, osm As Int, omd As Int, olg As Int, oxl
As Int, gsm As Int, gmd As Int, glg As Int, gxl As Int, gpa As Int, gpx As Int,
gpy As Int, gpt As Int, gpb As Int, gpl As Int, gpr As Int, _
AddColumns3x4 AddColumns3x4 As SDUIDiv
AddColumns4x3 AddColumns4x3 As SDUIDiv
AddColumns2x6 AddColumns2x6 As SDUIDiv
AddColumns6x2 AddColumns6x2 As SDUIDiv
AddColumns5x2 AddColumns5x2 As SDUIDiv
AddColumns3x2 AddColumns3x2 As SDUIDiv
AddColumns11x1 AddColumns11x1 As SDUIDiv
AddColumns10x1 AddColumns10x1 As SDUIDiv
AddColumns9x1 AddColumns9x1 As SDUIDiv
AddColumns8x1 AddColumns8x1 As SDUIDiv
AddColumns7x1 AddColumns7x1 As SDUIDiv
AddColumns12x1 AddColumns12x1 As SDUIDiv
AddColumns8p4 AddColumns8p4 As SDUIDiv
AddColumns4p8 AddColumns4p8 As SDUIDiv
AddColumns1p11 AddColumns1p11 As SDUIDiv
AddColumns11p1 AddColumns11p1 As SDUIDiv
AddColumns2p10 AddColumns2p10 As SDUIDiv
AddColumns10p2 AddColumns10p2 As SDUIDiv
AddColumns3p9 AddColumns3p9 As SDUIDiv
AddColumns9p3 AddColumns9p3 As SDUIDiv
AddColumns3p6p3 AddColumns3p6p3 As SDUIDiv
AddColumns6p3p3 AddColumns6p3p3 As SDUIDiv
AddColumns7p5 AddColumns7p5 As SDUIDiv
AddColumns5p7 AddColumns5p7 As SDUIDiv
AddColumns12 AddColumns12 As SDUIDiv
AddColumns6 AddColumns6 As SDUIDiv
AddColumns2 AddColumns2 As SDUIDiv
AddColumns1 AddColumns1 As SDUIDiv
AddColumns3 AddColumns3 As SDUIDiv
AddColumns4 AddColumns4 As SDUIDiv
AddColumns5 AddColumns5 As SDUIDiv
AddColumns7 AddColumns7 As SDUIDiv
AddColumns8 AddColumns8 As SDUIDiv

223 / 331
 TailwindCSS WebApps using B4X

Method Name Method Signature

AddColumns9 AddColumns9 As SDUIDiv
AddColumns10 AddColumns10 As SDUIDiv
AddColumns11 AddColumns11 As SDUIDiv
setCaption setCaption(l As String)
getCaption getCaption As String
setHTML setHTML(hx As String)
setText setText(hx As String)
backGroundImage backGroundImage(url As String) As SDUIDiv
backgroundImageFull backgroundImageFull(url As String) As SDUIDiv
itemsCenter itemsCenter As SDUIDiv
contentCenter contentCenter As SDUIDiv
inlineBlock inlineBlock As SDUIDiv
AddDiv AddDiv(id As String) As SDUIDiv
Remove Remove
action action(s As String) As SDUIDiv
absolute absolute As SDUIDiv
method method(s As String) As SDUIDiv
autoComplete autoComplete(b As Boolean) As SDUIDiv
encType encType(s As String) As SDUIDiv
noValidate noValidate(p1 As Boolean) As SDUIDiv
focusWithin focusWithin(c As String) As SDUIDiv
applyTheme applyTheme(app As SDUIApp, themeName As String) As SDUIDiv
addClass addClass(c As String) As SDUIDiv
removeClass removeClass(c As String) As SDUIDiv
loremIpsum loremIpsum As SDUIDiv
AddTable AddTable(id As String) As SDUITable
AddTableCard AddTableCard(id As String) As SDUITable
AddPropertyTable AddPropertyTable(id As String) As SDUITable
AddFigure AddFigure(id As String, scaption As String) As SDUILabel
AddFigCaption AddFigCaption(id As String, scaption As String) As SDUILabel
AddFooterTitle AddFooterTitle(id As String, scaption As String) As SDUIDiv
AddBlockQuote AddBlockQuote(id As String, scaption As String) As SDUILabel
AddParagraph AddParagraph(id As String, scaption As String) As SDUILabel
AddButtonMinusPlus AddButtonMinusPlus(ID As String, sColor As String, sSize As String) As
SDUIButton
AddFAB AddFAB(id As String, IconName As String, sWidth As String, sHeight As
String) As SDUIButton
AddFooter AddFooter(id As String) As SDUIFooter
AddH1 AddH1(id As String, scaption As String) As SDUILabel
AddCustomTag AddCustomTag(id As String, sTag As String) As SDUIDiv
AddLabel AddLabel(id As String, scaption As String) As SDUILabel
AddLabelFor AddLabelFor(id As String, forE As String, scaption As String) As SDUILabel
AddInput AddInput(id As String, stypeOf As String) As SDUILabel
AddLoremIpsum AddLoremIpsum(id As String) As SDUILabel
AddLoremIpsumWords AddLoremIpsumWords(id As String, howMany As Int) As SDUILabel
AddH2 AddH2(id As String, scaption As String) As SDUILabel
AddH3 AddH3(id As String, scaption As String) As SDUILabel
AddH4 AddH4(id As String, scaption As String) As SDUILabel
AddH5 AddH5(id As String, scaption As String) As SDUILabel
AddH6 AddH6(id As String, scaption As String) As SDUILabel
AddKeyboardKey AddKeyboardKey(id As String, caption As String) As SDUIKbd
AddKeyboardKeys AddKeyboardKeys(keys As List)
AddImage AddImage(id As String, URL As String, alt As String, swidth As String,
sheight As String) As SDUIImage

224 / 331
 TailwindCSS WebApps using B4X

Method Name Method Signature

AddMenu AddMenu(id As String) As SDUIMenu
AddCarousel AddCarousel(id As String, iWidth As String, iHeight As String) As
SDUICarousel
AddHero AddHero(id As String) As SDUIHero
textCenter textCenter As SDUIDiv
verticalAlign verticalAlign(s As String) As SDUIDiv
textAlign textAlign(s As String) As SDUIDiv
fontWeight fontWeight(s As String) As SDUIDiv
AddButton AddButton(id As String, label As String) As SDUIButton
AddButtonNormal AddButtonNormal(id As String, label As String) As SDUIButton
AddButtonAnchor AddButtonAnchor(id As String, label As String) As SDUIButton
AddButtonLabel AddButtonLabel(id As String, label As String) As SDUIButton
AddButtonBadge AddButtonBadge(ID As String, Label As String, sBadge As String) As
SDUIButton
AddButtonIndicator AddButtonIndicator(ID As String, Label As String, sBadge As String) As
SDUIButton
AddDivider AddDivider(id As String) As SDUIDivider
AddSection AddSection(ID As String) As SDUILabel
AddAlertInfo AddAlertInfo(id As String, label As String) As SDUIAlert
AddAlertEmpty AddAlertEmpty(id As String) As SDUIAlert
AddBigAlert AddBigAlert(ID As String, sIcon As String, sColor As String, Title As String,
Description As String, xrounded As Boolean) As SDUIAlert
AddAlertSuccess AddAlertSuccess(id As String, label As String) As SDUIAlert
AddAlertWarning AddAlertWarning(id As String, label As String) As SDUIAlert
AddAlertWithTitle AddAlertWithTitle(ID As String, sCaption As String, sAlertDescription As
String) As SDUIAlert
AddAlert AddAlert(id As String, label As String) As SDUIAlert
AddLottiePlayer AddLottiePlayer(id As String, url As String, xwidth As String, xheight As
String) As SDUILottiePlayer
AddArticle AddArticle(id As String) As SDUILabel
AddSummary AddSummary(id As String, scaption As String) As SDUILabel
AddDetails AddDetails(id As String) As SDUILabel
AddHeader AddHeader(id As String) As SDUILabel
AddAlertError AddAlertError(id As String, label As String) As SDUIAlert
AddArtBoard AddArtBoard(id As String, xSize As Int) As SDUIArtboard
AddAvatar AddAvatar(id As String, xsize As String, url As String) As SDUIAvatar
AddAvatarGroup AddAvatarGroup(id As String, xsize As String) As SDUIAvatar
AddBadge AddBadge(id As String, label As String) As SDUIBadge
AddBadgeEmpty AddBadgeEmpty(id As String) As SDUIBadge
AddBottomNav AddBottomNav(id As String) As SDUIBottomNav
AddBreadCrumbs AddBreadCrumbs(id As String) As SDUIBreadCrumbs
AddButtonGroup AddButtonGroup(id As String, xsize As String) As SDUIButtonGroup
AddCardEmpty AddCardEmpty(ID As String) As SDUICard
AddCardForm AddCardForm(ID As String, sTitle As String) As SDUICard
AddCard AddCard(ID As String, ImageURL As String, sCardTitle As String) As
SDUICard
AddCheckBoxLabel AddCheckBoxLabel(ID As String, Label As String, position As String) As
SDUICheckbox
AddCheckBox AddCheckBox(ID As String) As SDUICheckbox
AddChat AddChat(ID As String) As SDUIChat
AddCollapsePanels AddCollapsePanels(ID As String, Plus As Boolean, ItemsToAdd As List) As
SDUICollapsePanels
AddDropDown AddDropDown(ID As String, Label As String) As SDUIDropDown
AddDropDownAvatar AddDropDownAvatar(ID As String, xSize As Int, URL As String) As
SDUIDropDown

225 / 331
 TailwindCSS WebApps using B4X

Method Name Method Signature

AddDropDownIcon AddDropDownIcon(ID As String, xsize As Int, IconName As String) As
SDUIDropDown
AddIcon AddIcon(ID As String, Label As String) As SDUIIcon
AddIndicator AddIndicator(ID As String) As SDUIIndicator
AddIndicatorCard AddIndicatorCard(ID As String, sButtonColor As String, sButtonCaption As
String) As SDUIIndicator
AddLink AddLink(id As String, scaption As String, href As String) As SDUILink
AddAnchor AddAnchor(id As String, scaption As String, href As String) As SDUILink
AddList AddList(id As String, xbordered As Boolean, ispaceY As String, ipadL As
String) As SDUIList
AddSpan AddSpan(id As String, scaption As String) As SDUILabel
AddMockUpCode AddMockUpCode(id As String, lang As String) As SDUIMockupCode
AddMockUpPhone AddMockUpPhone(id As String) As SDUIMockupPhone
AddMockUpWindow AddMockUpWindow(id As String) As SDUIMockupWindow
AddModal AddModal(id As String, Label As String, YesLabel As String, NoLabel As
String, CancelLabel As String, sWidth As String) As SDUIModal
AddModalAsDrawer AddModalAsDrawer(id As String, position As String, iwidth As String) As
SDUIModal
AddNavBar AddNavBar(id As String) As SDUINavBar
AddProgress AddProgress(id As String, iValue As Int) As SDUIProgress
AddProgressLabel AddProgressLabel(id As String, Label As String, iValue As Int, sHint As
String) As SDUIProgress
AddRatingLabel AddRatingLabel(id As String, Label As String, sHint As String, iSize As Int)
As SDUIRating
AddRangeLabel AddRangeLabel(id As String, Label As String, sHint As String, iValue As Int)
As SDUIRange
AddRadialProgress AddRadialProgress(id As String, iValue As Int) As SDUIRadialProgress
AddSelectNormal AddSelectNormal(id As String, bMultiple As Boolean, options As Map) As
SDUISelect
AddSelect AddSelect(id As String, sCaption As String, sHint As String, options As
Map) As SDUISelect
AddRadioGroup AddRadioGroup(id As String, sCaption As String, sHint As String, RowView
As Boolean, sSize As String, sColor As String, options As Map) As
SDUIRadioGroup
AddRange AddRange(id As String) As SDUIRange
AddRating AddRating(id As String, xsize As Int) As SDUIRating
AddStats AddStats(id As String) As SDUIStats
AddInfoCard AddInfoCard(ID As String, Icon As String, IconColor As String, Value As
String, Description As String) As SDUIStats
getHTML getHTML As String
AddStack AddStack(id As String) As SDUIDiv
AddSteps AddSteps(id As String, xcolor As String, xItems As List) As SDUISteps
AddSwap AddSwap(id As String, offi As String, Oni As String) As SDUISwap
AddSwapIcon AddSwapIcon(id As String, xsize As String, offi As String, Oni As String) As
SDUISwap
AddTabs AddTabs(id As String, TabSize As String, TabType As String, xitems As List)
As SDUITabs
AddToast AddToast(id As String, Label As String) As SDUIToast
AddToastEmpty AddToastEmpty(id As String) As SDUIToast
AddToggleLabel AddToggleLabel(id As String, Label As String, position As String) As
SDUIToggle
AddToggle AddToggle(id As String) As SDUIToggle
AddTextBox AddTextBox(id As String) As SDUITextBox
AddTextBoxSearch AddTextBoxSearch(id As String) As SDUITextBox
AddTextBoxGroup AddTextBoxGroup(sID As String, sCaption As String, sHint As String,

226 / 331
 TailwindCSS WebApps using B4X

Method Name Method Signature

sPrefix As String, sSuffix As String) As SDUITextBox
AddTextAreaGroup AddTextAreaGroup(sID As String, sCaption As String, sHint As String) As
SDUITextArea
AddTextBoxLabel AddTextBoxLabel(id As String, label As String, hint As String) As
SDUITextBox
AddDialer AddDialer(id As String, label As String, minvalue As String, maxvalue As
String, stepvalue As String, hint As String) As SDUITextBox
AddFullCalendar AddFullCalendar(id As String) As SDUIFullCalendar
AddPassword AddPassword(id As String, label As String, hint As String, showEyes As
Boolean) As SDUITextBox
AddFileInput AddFileInput(id As String, multiple As Boolean) As SDUIFileInput
AddFileInputLabel AddFileInputLabel(id As String, label As String, hint As String, multiple As
Boolean) As SDUIFileInput
AddEmail AddEmail(id As String, label As String, hint As String) As SDUITextBox
AddTelephone AddTelephone(id As String, label As String, hint As String) As SDUITextBox
AddNumber AddNumber(id As String, label As String, hint As String, iMin As Int, iMax
As Int) As SDUITextBox
AddURL AddURL(id As String, label As String, hint As String) As SDUITextBox
AddTextArea AddTextArea(id As String) As SDUITextArea
AddTextAreaLabel AddTextAreaLabel(id As String, label As String, hint As String) As
SDUITextArea
AddTooltipButton AddTooltipButton(id As String, label As String, stooltip As String) As
SDUITooltip
AddBeautifulTimeLine AddBeautifulTimeLine(ID As String) As SDUITimeLine
AddTimeLine1 AddTimeLine1(ID As String) As SDUITimeLine
TooltipButton TooltipButton(id As String) As SDUIButton
AddTooltip AddTooltip(id As String, stooltip As String) As SDUITooltip
fitScreen fitScreen As SDUIDiv
AddButtonIcon AddButtonIcon(ID As String, IconSize As String, IconName As String) As
SDUIButton
AddButtonIconLabelTag AddButtonIconLabelTag(ID As String, IconSize As String, IconName As
String) As SDUIButton
AddListView AddListView(ID As String) As SDUIListView
AddOptionsCard AddOptionsCard(ID As String) As SDUIOptionsCard
AddSignaturePad AddSignaturePad(ID As String) As SDUISignaturePad
AddBR AddBR
AddMockUpCodeCard AddMockUpCodeCard(sID As String, lang As String, sCaption As String) As
SDUIMockupCode
responsivePer responsivePer(device As String, className As String) As SDUIDiv
fontMedium fontMedium As SDUIDiv
selectionTextColor selectionTextColor(c As String) As SDUIDiv
selectionTextColorIntensity selectionTextColorIntensity(c As String, i As String) As SDUIDiv
selectionBGColor selectionBGColor(c As String) As SDUIDiv
selectionBGColorIntensity selectionBGColorIntensity(c As String, i As String) As SDUIDiv
markerTextColor markerTextColor(c As String) As SDUIDiv
markerTextColorIntensity markerTextColorIntensity(c As String, i As String) As SDUIDiv
listDisc listDisc As SDUIDiv
listDecimal listDecimal As SDUIDiv
AddSpacer AddSpacer(id As String) As SDUIDiv
fromInherit fromInherit As SDUIDiv
fromColorIntensity fromColorIntensity(c As String, i As String) As SDUIDiv
bgGradientToR bgGradientToR As SDUIDiv
bgGradientToL bgGradientToL As SDUIDiv
bgGradientToT bgGradientToT As SDUIDiv
bgGradientToB bgGradientToB As SDUIDiv

227 / 331
 TailwindCSS WebApps using B4X

Method Name Method Signature

bgGradientToTR bgGradientToTR As SDUIDiv
bgGradientToTL bgGradientToTL As SDUIDiv
bgGradientToBR bgGradientToBR As SDUIDiv
bgGradientToBL bgGradientToBL As SDUIDiv
textTransparent textTransparent As SDUIDiv
bgClipText bgClipText As SDUIDiv
block block As SDUIDiv
fontSemiBold fontSemiBold As SDUIDiv
maxW maxW(s As String) As SDUIDiv
maxH maxH(s As String) As SDUIDiv
minW minW(s As String) As SDUIDiv
minH minH(s As String) As SDUIDiv
delay delay(s As String) As SDUIDiv
skewY skewY(s As String) As SDUIDiv
skewX skewX(s As String) As SDUIDiv
duration duration(s As String) As SDUIDiv
forID forID(s As String) As SDUIDiv
placeHolder placeHolder(s As String) As SDUIDiv
mxAuto mxAuto As SDUIDiv
myAuto myAuto As SDUIDiv
mtAuto mtAuto As SDUIDiv
mbAuto mbAuto As SDUIDiv
mrAuto mrAuto As SDUIDiv
mAuto mAuto As SDUIDiv
mlAuto mlAuto As SDUIDiv
targetBlank targetBlank As SDUIDiv
bgNoRepeat bgNoRepeat As SDUIDiv
bgArbitrary bgArbitrary(s As String) As SDUIDiv
transitionArbitrary transitionArbitrary(s As String) As SDUIDiv
bgBottom bgBottom As SDUIDiv
transition transition As SDUIDiv
divideY divideY As SDUIDiv
divideYSize divideYSize(s As String) As SDUIDiv
divideX divideX As SDUIDiv
divideXSize divideXSize(s As String) As SDUIDiv
divideColorIntensity divideColorIntensity(c As String, i As String) As SDUIDiv
whitespaceNowrap whitespaceNowrap As SDUIDiv
truncate truncate As SDUIDiv
bgCover bgCover As SDUIDiv
bgCenter bgCenter As SDUIDiv
bgImageURL bgImageURL(s As String) As SDUIDiv
roundedBrFull roundedBrFull As SDUIDiv
cursorPointer cursorPointer As SDUIDiv
gapY gapY(i As String) As SDUIDiv
textSize textSize(s As String) As SDUIDiv
size size(prefix As String, s As String) As SDUIDiv
textBase textBase As SDUIDiv
color color(prefix As String, s As String) As SDUIDiv
ColorIntensity ColorIntensity(prefix As String, c As String, i As String) As SDUIDiv
textColor textColor(s As String) As SDUIDiv
decorationColor decorationColor(s As String) As SDUIDiv
fontSize fontSize(s As String) As SDUIDiv
minHScreen minHScreen As SDUIDiv
grid grid As SDUIDiv

228 / 331
 TailwindCSS WebApps using B4X

Method Name Method Signature

roundedBox roundedBox As SDUIDiv
relative relative As SDUIDiv
overflowXAuto overflowXAuto As SDUIDiv
overflowHidden overflowHidden As SDUIDiv
gridFlowRowDense gridFlowRowDense As SDUIDiv
gridCols gridCols(s As String) As SDUIDiv
first first(s As String) As SDUIDiv
last last(s As String) As SDUIDiv
gridColsSM gridColsSM(s As String) As SDUIDiv
gridColsLG gridColsLG(s As String) As SDUIDiv
gridColsXL gridColsXL(s As String) As SDUIDiv
gridColsMD gridColsMD(s As String) As SDUIDiv
gridColsResponsive gridColsResponsive(cols As String, xs As String, sm As String, md As String,
lg As String, xl As String)
placeItemsCenter placeItemsCenter As SDUIDiv
placeItemsStart placeItemsStart As SDUIDiv
placeItemsEnd placeItemsEnd As SDUIDiv
placeItemsStretch placeItemsStretch As SDUIDiv
placeContentCenter placeContentCenter As SDUIDiv
placeContentStart placeContentStart As SDUIDiv
placeContentEnd placeContentEnd As SDUIDiv
placeContentBetween placeContentBetween As SDUIDiv
placeContentAround placeContentAround As SDUIDiv
placeContentEvenly placeContentEvenly As SDUIDiv
placeContentStretch placeContentStretch As SDUIDiv
border border(s As String) As SDUIDiv
borderRColor borderRColor(s As String) As SDUIDiv
borderLColor borderLColor(s As String) As SDUIDiv
borderTColor borderTColor(s As String) As SDUIDiv
borderBColor borderBColor(s As String) As SDUIDiv
borderRColorIntensity borderRColorIntensity(c As String, i As Int) As SDUIDiv
borderTColorIntensity borderTColorIntensity(c As String, i As Int) As SDUIDiv
borderLColorIntensity borderLColorIntensity(c As String, i As Int) As SDUIDiv
borderBColorIntensity borderBColorIntensity(c As String, i As Int) As SDUIDiv
borderXColor borderXColor(c As String) As SDUIDiv
borderYColor borderYColor(c As String) As SDUIDiv
borderR borderR(s As String) As SDUIDiv
borderL borderL(s As String) As SDUIDiv
borderT borderT(s As String) As SDUIDiv
borderB borderB(s As String) As SDUIDiv
borderX borderX(s As String) As SDUIDiv
borderY borderY(s As String) As SDUIDiv
shadow shadow(s As String) As SDUIDiv
antialiased antialiased As SDUIDiv
textColorIntensity textColorIntensity(s As String, i As String) As SDUIDiv
decorationColorIntensity decorationColorIntensity(s As String, i As String) As SDUIDiv
ringColorIntensity ringColorIntensity(s As String, i As String) As SDUIDiv
ringColor ringColor(s As String) As SDUIDiv
wFull wFull As SDUIDiv
wPx wPx As SDUIDiv
hPx hPx As SDUIDiv
wScreen wScreen As SDUIDiv
hScreen hScreen As SDUIDiv
roundedFull roundedFull As SDUIDiv

229 / 331
 TailwindCSS WebApps using B4X

Method Name Method Signature

normalCase normalCase As SDUIDiv
glass glass As SDUIDiv
loading loading(b As Boolean) As SDUIDiv
noAnimation noAnimation As SDUIDiv
sticky sticky As SDUIDiv
rounded rounded(s As String) As SDUIDiv
isRounded isRounded As SDUIDiv
h h(i As String) As SDUIDiv
w w(i As String) As SDUIDiv
mx mx(sma As String) As SDUIDiv
my my(sma As String) As SDUIDiv
mt mt(sma As String) As SDUIDiv
mb mb(sma As String) As SDUIDiv
ml ml(sma As String) As SDUIDiv
mr mr(sma As String) As SDUIDiv
p p(sma As String) As SDUIDiv
px px(sma As String) As SDUIDiv
py py(sma As String) As SDUIDiv
pt pt(sma As String) As SDUIDiv
pb pb(sma As String) As SDUIDiv
pl pl(sma As String) As SDUIDiv
pr pr(sma As String) As SDUIDiv
m m(sma As String) As SDUIDiv
fontMono fontMono As SDUIDiv
fontBold fontBold As SDUIDiv
underline underline As SDUIDiv
trackingNormal trackingNormal As SDUIDiv
trackingWider trackingWider As SDUIDiv
trackingWidest trackingWidest As SDUIDiv
trackingWide trackingWide As SDUIDiv
trackingTight trackingTight As SDUIDiv
trackingTighter trackingTighter As SDUIDiv
autoColsMax autoColsMax As SDUIDiv
divideColor divideColor(s As String) As SDUIDiv
bgColor bgColor(s As String) As SDUIDiv
shadowColor shadowColor(s As String) As SDUIDiv
shadowColorIntensity shadowColorIntensity(c As String, i As String) As SDUIDiv
borderColor borderColor(s As String) As SDUIDiv
borderColorIntensity borderColorIntensity(c As String, i As String) As SDUIDiv
hoverBorderColorIntensity hoverBorderColorIntensity(c As String, i As String) As SDUIDiv
hoverClass hoverClass(s As String) As SDUIDiv
hoverBGColorIntensity hoverBGColorIntensity(c As String, i As String) As SDUIDiv
hoverBorderColor hoverBorderColor(scolor As String) As SDUIDiv
hoverBGColor hoverBGColor(scolor As String) As SDUIDiv
hoverTextColor hoverTextColor(scolor As String) As SDUIDiv
hoverTextColorIntensity hoverTextColorIntensity(c As String, i As Int) As SDUIDiv
hoverTextSize hoverTextSize(ssize As String) As SDUIDiv
hover hover(c As String) As SDUIDiv
focus focus(c As String) As SDUIDiv
AddStyle AddStyle(k As String, v As String) As SDUIDiv
bgColorIntensity bgColorIntensity(xcolor As String, intensity As String) As SDUIDiv
bgOpacity bgOpacity(intensity As String) As SDUIDiv
flex flex As SDUIDiv
flexCol flexCol As SDUIDiv

230 / 331
 TailwindCSS WebApps using B4X

Method Name Method Signature

basisAuto basisAuto As SDUIDiv
basis basis(s As String) As SDUIDiv
basisFull basisFull As SDUIDiv
basisPx basisPx As SDUIDiv
flexColReverse flexColReverse As SDUIDiv
readOnly readOnly(b As Boolean) As SDUIDiv
required required(b As Boolean) As SDUIDiv
flexRow flexRow As SDUIDiv
flexRowReverse flexRowReverse As SDUIDiv
wrap wrap As SDUIDiv
nowrap nowrap As SDUIDiv
selfStart selfStart As SDUIDiv
roundedTLBox roundedTLBox As SDUIDiv
roundedBLBox roundedBLBox As SDUIDiv
roundedBRBox roundedBRBox As SDUIDiv
roundedBBox roundedBBox As SDUIDiv
roundedTRBox roundedTRBox As SDUIDiv
selfAuto selfAuto As SDUIDiv
selfEnd selfEnd As SDUIDiv
selfCenter selfCenter As SDUIDiv
selfStretch selfStretch As SDUIDiv
justifySelfStart justifySelfStart As SDUIDiv
justifySelfAuto justifySelfAuto As SDUIDiv
justifySelfEnd justifySelfEnd As SDUIDiv
justifySelfCenter justifySelfCenter As SDUIDiv
justifySelfStretch justifySelfStretch As SDUIDiv
justifyStart justifyStart As SDUIDiv
justifyEnd justifyEnd As SDUIDiv
justifyCenter justifyCenter As SDUIDiv
justifyBetween justifyBetween As SDUIDiv
justifyAround justifyAround As SDUIDiv
contentAround contentAround As SDUIDiv
justifyEvenly justifyEvenly As SDUIDiv
contentEvenly contentEvenly As SDUIDiv
itemsStart itemsStart As SDUIDiv
contentStart contentStart As SDUIDiv
contentBetween contentBetween As SDUIDiv
itemsEnd itemsEnd As SDUIDiv
contentEnd contentEnd As SDUIDiv
itemsBaseline itemsBaseline As SDUIDiv
itemsStretch itemsStretch As SDUIDiv
flexGrow0 flexGrow0 As SDUIDiv
flexGrow flexGrow As SDUIDiv
flexWrap flexWrap As SDUIDiv
flex1 flex1 As SDUIDiv
flexAuto flexAuto As SDUIDiv
flexInitial flexInitial As SDUIDiv
flexNone flexNone As SDUIDiv
flexGrow1 flexGrow1 As SDUIDiv
flexShrink0 flexShrink0 As SDUIDiv
flexShrink1 flexShrink1 As SDUIDiv
orderFirst orderFirst As SDUIDiv
order order(s As String) As SDUIDiv
orderLast orderLast As SDUIDiv

231 / 331
 TailwindCSS WebApps using B4X

Method Name Method Signature

orderNone orderNone As SDUIDiv
responsiveClass responsiveClass(className As String, xs As Boolean, sm As Boolean, md
As Boolean, lg As Boolean) As SDUIDiv
responsiveOnDevice responsiveOnDevice(device As String, className As String) As SDUIDiv
responsiveXS responsiveXS(className As String) As SDUIDiv
responsiveSM responsiveSM(className As String) As SDUIDiv
responsiveMD responsiveMD(className As String) As SDUIDiv
responsiveLG responsiveLG(className As String) As SDUIDiv
fontThin fontThin As SDUIDiv
fontExtralight fontExtralight As SDUIDiv
fontLight fontLight As SDUIDiv
fontNormal fontNormal As SDUIDiv
inlineFlex inlineFlex As SDUIDiv
lowercase lowercase As SDUIDiv
fontExtrabold fontExtrabold As SDUIDiv
fontBlack fontBlack As SDUIDiv
italic italic As SDUIDiv
overline overline As SDUIDiv
outline outline(s As String) As SDUIDiv
noUnderline noUnderline As SDUIDiv
upperCase upperCase As SDUIDiv
capitalize capitalize As SDUIDiv
lineThrough lineThrough(b As Boolean) As SDUIDiv
emptyBGColor emptyBGColor(xcolor As String) As SDUIDiv
emptyBGColorIntensity emptyBGColorIntensity(c As String, i As String) As SDUIDiv
rotate rotate(sma As String) As SDUIDiv
disabled disabled(b As Boolean) As SDUIDiv
stack stack As SDUIDiv
hidden hidden(b As Boolean) As SDUIDiv
SetData SetData(k As String, v As String) As SDUIDiv
GetData GetData(k As String) As String
borderStyle borderStyle(s As String) As SDUIDiv
role role(r As String) As SDUIDiv
formMultiselect formMultiselect As SDUIDiv
focusOutlineNone focusOutlineNone As SDUIDiv
animateSpin animateSpin As SDUIDiv
animatePing animatePing As SDUIDiv
animateBounce animateBounce As SDUIDiv
animatePulse animatePulse As SDUIDiv
hoverAnimateSpin hoverAnimateSpin As SDUIDiv
hoverAnimatePing hoverAnimatePing As SDUIDiv
hoverAnimateBounce hoverAnimateBounce As SDUIDiv
hoverAnimatePulse hoverAnimatePulse As SDUIDiv
animateNone animateNone As SDUIDiv
top top(i As Int) As SDUIDiv
bottom bottom(i As Int) As SDUIDiv
left left(i As Int) As SDUIDiv
right right(i As Int) As SDUIDiv
placeholderTransparent placeholderTransparent As SDUIDiv
AddRemoveClassCondition AddRemoveClassCondition(b As Boolean, c As String)
peer peer As SDUIDiv
focusBorderColorIntensity focusBorderColorIntensity(c As String, s As String) As SDUIDiv
focusShadow focusShadow(s As String) As SDUIDiv
hFull hFull As SDUIDiv

232 / 331
 TailwindCSS WebApps using B4X

Method Name Method Signature

transitionAll transitionAll As SDUIDiv
easeInOut easeInOut As SDUIDiv
originLeft originLeft As SDUIDiv
transform transform As SDUIDiv
scale scale(s As String) As SDUIDiv
translateX translateX(i As String) As SDUIDiv
translateY translateY(i As String) As SDUIDiv
pointerEventsNone pointerEventsNone As SDUIDiv
peerPlaceholderShownOpacity peerPlaceholderShownOpacity(s As String) As SDUIDiv
peerFocusOpacity peerFocusOpacity(s As String) As SDUIDiv
peerPlaceholderShownScale peerPlaceholderShownScale(s As String) As SDUIDiv
peerFocusScale peerFocusScale(s As String) As SDUIDiv
peerPlaceholderShownTranslateY peerPlaceholderShownTranslateY(s As String) As SDUIDiv
peerFocusTranslateY peerFocusTranslateY(s As String) As SDUIDiv
peerPlaceholderShownTranslateX peerPlaceholderShownTranslateX(s As String) As SDUIDiv
peerFocusTranslateX peerFocusTranslateX(s As String) As SDUIDiv
selectNone selectNone As SDUIDiv
leadingNone leadingNone As SDUIDiv
card card As SDUIDiv
hoverScale hoverScale(s As String) As SDUIDiv
hoverShadow hoverShadow(s As String) As SDUIDiv
transitionTransform transitionTransform As SDUIDiv
smGridCols smGridCols(s As String) As SDUIDiv
PaddingAXYTBLR PaddingAXYTBLR(varsetPaddingTBLR As String) As SDUIDiv
MarginAXYTBLR MarginAXYTBLR(varMarginAXYTBLR As String) As SDUIDiv
DevicesSizes DevicesSizes(vSizes As String) As SDUIDiv
GetMarginPadding GetMarginPadding(varOffsets As String) As Map
GetSizes GetSizes(varOffsets As String) As Map
AddQRCode AddQRCode(id As String) As SDUIQRCode
AddBarCodeReader AddBarCodeReader(id As String) As SDUIBarCodeReader
AddWebCam AddWebCam(id As String) As SDUIWebcam
AddVideo AddVideo(id As String, src As String, sMp4url As String, sOggurl As String,
sWebmUrl As String) As SDUIVideo
textLeft textLeft As SDUIDiv
textRight textRight As SDUIDiv
textJustify textJustify As SDUIDiv
textStart textStart As SDUIDiv
textEnd textEnd As SDUIDiv
wAuto wAuto As SDUIDiv
wFit wFit As SDUIDiv
wMin wMin As SDUIDiv
wMax wMax As SDUIDiv
minWFull minWFull As SDUIDiv
minWMin minWMin As SDUIDiv
minWMax minWMax As SDUIDiv
minWFit minWFit As SDUIDiv
hAuto hAuto As SDUIDiv
hFit hFit As SDUIDiv
hMin hMin As SDUIDiv
hMax hMax As SDUIDiv
minHFull minHFull As SDUIDiv
minHMin minHMin As SDUIDiv
minHMax minHMax As SDUIDiv
minHFit minHFit As SDUIDiv

233 / 331
 TailwindCSS WebApps using B4X

Method Name Method Signature

minH1 minH1 As SDUIDiv
minHPx minHPx As SDUIDiv
maxH1 maxH1 As SDUIDiv
maxHPx maxHPx As SDUIDiv
maxHFull maxHFull As SDUIDiv
maxHMin maxHMin As SDUIDiv
maxHMax maxHMax As SDUIDiv
maxHFit maxHFit As SDUIDiv
OnClick OnClick As SDUIDiv
OnChange OnChange As SDUIDiv
maxWNone maxWNone As SDUIDiv
maxWFull maxWFull As SDUIDiv
maxWMin maxWMin As SDUIDiv
maxWMax maxWMax As SDUIDiv
maxWFit maxWFit As SDUIDiv
maxWProse maxWProse As SDUIDiv
maxHScreen maxHScreen As SDUIDiv
autoColsAuto autoColsAuto As SDUIDiv
autoColsFr autoColsFr As SDUIDiv
autoColsMin autoColsMin As SDUIDiv
autoRowsAuto autoRowsAuto As SDUIDiv
autoRowsFr autoRowsFr As SDUIDiv
autoRowsMax autoRowsMax As SDUIDiv
autoRowsMin autoRowsMin As SDUIDiv
colAuto colAuto As SDUIDiv
content content(s As String) As SDUIDiv
flexNowrap flexNowrap As SDUIDiv
flexWrapReverse flexWrapReverse As SDUIDiv
gridColsNone gridColsNone As SDUIDiv
gridFlowCol gridFlowCol As SDUIDiv
gridFlowColDense gridFlowColDense As SDUIDiv
gridFlowDense gridFlowDense As SDUIDiv
gridFlowRow gridFlowRow As SDUIDiv
gridRows gridRows(s As String) As SDUIDiv
gridRowsNone gridRowsNone As SDUIDiv
grow grow As SDUIDiv
grow0 grow0 As SDUIDiv
items items(s As String) As SDUIDiv
justify justify(s As String) As SDUIDiv
justifyItems justifyItems(s As String) As SDUIDiv
justifySelf justifySelf(s As String) As SDUIDiv
minW0 minW0 As SDUIDiv
placeContent placeContent(s As String) As SDUIDiv
placeItems placeItems(s As String) As SDUIDiv
placeSelf placeSelf(s As String) As SDUIDiv
rowAuto rowAuto As SDUIDiv
rowEnd rowEnd(s As String) As SDUIDiv
rowEndAuto rowEndAuto As SDUIDiv
rowSpanFull rowSpanFull As SDUIDiv
rowStart rowStart(s As String) As SDUIDiv
rowStartAuto rowStartAuto As SDUIDiv
self self(s As String) As SDUIDiv
shrink0 shrink0 As SDUIDiv
normalNums normalNums As SDUIDiv

234 / 331
 TailwindCSS WebApps using B4X

Method Name Method Signature

ordinal ordinal As SDUIDiv
slashedZero slashedZero As SDUIDiv
liningNums liningNums As SDUIDiv
oldstyleNums oldstyleNums As SDUIDiv
proportionalNums proportionalNums As SDUIDiv
tabularNums tabularNums As SDUIDiv
diagonalFractions diagonalFractions As SDUIDiv
stackedFractions stackedFractions As SDUIDiv
leading leading(s As String) As SDUIDiv
leadingTight leadingTight As SDUIDiv
leadingSnug leadingSnug As SDUIDiv
leadingNormal leadingNormal As SDUIDiv
leadingRelaxed leadingRelaxed As SDUIDiv
leadingLoose leadingLoose As SDUIDiv
fontSans fontSans As SDUIDiv
fontSerif fontSerif As SDUIDiv
notItalic notItalic As SDUIDiv
subpixelAntialiased subpixelAntialiased As SDUIDiv
textBlack textBlack As SDUIDiv
textCurrent textCurrent As SDUIDiv
textInherit textInherit As SDUIDiv
textWhite textWhite As SDUIDiv
decorationBlack decorationBlack As SDUIDiv
decorationCurrent decorationCurrent As SDUIDiv
decorationInherit decorationInherit As SDUIDiv
decorationTransparent decorationTransparent As SDUIDiv
decorationWhite decorationWhite As SDUIDiv
decorationDashed decorationDashed As SDUIDiv
decorationDotted decorationDotted As SDUIDiv
decorationDouble decorationDouble As SDUIDiv
decorationSolid decorationSolid As SDUIDiv
decorationWavy decorationWavy As SDUIDiv
decorationSize decorationSize(s As String) As SDUIDiv
decorationAuto decorationAuto As SDUIDiv
decorationFromFont decorationFromFont As SDUIDiv
underlineOffsetAuto underlineOffsetAuto As SDUIDiv
underlineOffsetSize underlineOffsetSize(s As String) As SDUIDiv
textClip textClip As SDUIDiv
textEllipsis textEllipsis As SDUIDiv
indentPx indentPx As SDUIDiv
indentSize indentSize(s As String) As SDUIDiv
alignBaseline alignBaseline As SDUIDiv
alignBottom alignBottom As SDUIDiv
alignMiddle alignMiddle As SDUIDiv
alignSub alignSub As SDUIDiv
alignSuper alignSuper As SDUIDiv
alignTextBottom alignTextBottom As SDUIDiv
alignTextTop alignTextTop As SDUIDiv
alignTop alignTop As SDUIDiv
whitespaceNormal whitespaceNormal As SDUIDiv
whitespacePre whitespacePre As SDUIDiv
whitespacePreLine whitespacePreLine As SDUIDiv
whitespacePreWrap whitespacePreWrap As SDUIDiv
breakAll breakAll As SDUIDiv

235 / 331
 TailwindCSS WebApps using B4X

Method Name Method Signature

breakKeep breakKeep As SDUIDiv
breakNormal breakNormal As SDUIDiv
breakWords breakWords As SDUIDiv
contentNone contentNone As SDUIDiv
bgFixed bgFixed As SDUIDiv
bgLocal bgLocal As SDUIDiv
bgScroll bgScroll As SDUIDiv
bgClipBorder bgClipBorder As SDUIDiv
bgClipContent bgClipContent As SDUIDiv
bgClipPadding bgClipPadding As SDUIDiv
bgBlack bgBlack As SDUIDiv
bgCurrent bgCurrent As SDUIDiv
bgInherit bgInherit As SDUIDiv
bgTransparent bgTransparent As SDUIDiv
bgWhite bgWhite As SDUIDiv
bgOriginBorder bgOriginBorder As SDUIDiv
bgOriginContent bgOriginContent As SDUIDiv
bgOriginPadding bgOriginPadding As SDUIDiv
bgLeft bgLeft As SDUIDiv
bgLeftBottom bgLeftBottom As SDUIDiv
bgLeftTop bgLeftTop As SDUIDiv
bgRight bgRight As SDUIDiv
bgRightBottom bgRightBottom As SDUIDiv
bgRightTop bgRightTop As SDUIDiv
bgTop bgTop As SDUIDiv
bgRepeat bgRepeat As SDUIDiv
bgRepeatRound bgRepeatRound As SDUIDiv
bgRepeatSpace bgRepeatSpace As SDUIDiv
bgRepeatX bgRepeatX As SDUIDiv
bgRepeatY bgRepeatY As SDUIDiv
bgAuto bgAuto As SDUIDiv
bgContain bgContain As SDUIDiv
bgNone bgNone As SDUIDiv
roundedB roundedB(s As String) As SDUIDiv
roundedBFull roundedBFull As SDUIDiv
roundedBNone roundedBNone As SDUIDiv
roundedBl roundedBl As SDUIDiv
roundedBlFull roundedBlFull As SDUIDiv
roundedBlNone roundedBlNone As SDUIDiv
roundedBr roundedBr As SDUIDiv
roundedBrNone roundedBrNone As SDUIDiv
roundedL roundedL(s As String) As SDUIDiv
roundedLFull roundedLFull As SDUIDiv
roundedLNone roundedLNone As SDUIDiv
roundedNone roundedNone As SDUIDiv
roundedR roundedR(s As String) As SDUIDiv
roundedRFull roundedRFull As SDUIDiv
roundedRNone roundedRNone As SDUIDiv
roundedT roundedT(s As String) As SDUIDiv
roundedTFull roundedTFull As SDUIDiv
roundedTNone roundedTNone As SDUIDiv
roundedTl roundedTl As SDUIDiv
roundedTlFull roundedTlFull As SDUIDiv
roundedTlNone roundedTlNone As SDUIDiv

236 / 331
 TailwindCSS WebApps using B4X

Method Name Method Signature

roundedTr roundedTr As SDUIDiv
roundedTrFull roundedTrFull As SDUIDiv
roundedTrNone roundedTrNone As SDUIDiv
borderBBlack borderBBlack As SDUIDiv
borderBCurrent borderBCurrent As SDUIDiv
borderBInherit borderBInherit As SDUIDiv
borderBTransparent borderBTransparent As SDUIDiv
borderBWhite borderBWhite As SDUIDiv
borderBlack borderBlack As SDUIDiv
borderCurrent borderCurrent As SDUIDiv
borderInherit borderInherit As SDUIDiv
borderLBlack borderLBlack As SDUIDiv
borderLCurrent borderLCurrent As SDUIDiv
borderLInherit borderLInherit As SDUIDiv
borderLTransparent borderLTransparent As SDUIDiv
borderLWhite borderLWhite As SDUIDiv
borderRBlack borderRBlack As SDUIDiv
borderRCurrent borderRCurrent As SDUIDiv
borderRInherit borderRInherit As SDUIDiv
borderRTransparent borderRTransparent As SDUIDiv
borderRWhite borderRWhite As SDUIDiv
borderTBlack borderTBlack As SDUIDiv
borderTCurrent borderTCurrent As SDUIDiv
borderTInherit borderTInherit As SDUIDiv
borderTTransparent borderTTransparent As SDUIDiv
borderTWhite borderTWhite As SDUIDiv
borderTransparent borderTransparent As SDUIDiv
borderWhite borderWhite As SDUIDiv
borderXBlack borderXBlack As SDUIDiv
borderXCurrent borderXCurrent As SDUIDiv
borderXInherit borderXInherit As SDUIDiv
borderXTransparent borderXTransparent As SDUIDiv
borderXWhite borderXWhite As SDUIDiv
borderYBlack borderYBlack As SDUIDiv
borderYCurrent borderYCurrent As SDUIDiv
borderYInherit borderYInherit As SDUIDiv
borderYTransparent borderYTransparent As SDUIDiv
borderYWhite borderYWhite As SDUIDiv
outlineColorIntensity outlineColorIntensity(c As String, i As Int) As SDUIDiv
borderDashed borderDashed As SDUIDiv
borderDotted borderDotted As SDUIDiv
borderDouble borderDouble As SDUIDiv
borderHidden borderHidden As SDUIDiv
borderNone borderNone As SDUIDiv
borderSolid borderSolid As SDUIDiv
divideBlack divideBlack As SDUIDiv
divideCurrent divideCurrent As SDUIDiv
divideInherit divideInherit As SDUIDiv
divideTransparent divideTransparent As SDUIDiv
divideWhite divideWhite As SDUIDiv
divideDashed divideDashed As SDUIDiv
divideDotted divideDotted As SDUIDiv
divideDouble divideDouble As SDUIDiv
divideNone divideNone As SDUIDiv

237 / 331
 TailwindCSS WebApps using B4X

Method Name Method Signature

divideSolid divideSolid As SDUIDiv
outlineBlack outlineBlack As SDUIDiv
outlineCurrent outlineCurrent As SDUIDiv
outlineInherit outlineInherit As SDUIDiv
outlineTransparent outlineTransparent As SDUIDiv
outlineWhite outlineWhite As SDUIDiv
outlineDashed outlineDashed As SDUIDiv
outlineDotted outlineDotted As SDUIDiv
outlineDouble outlineDouble As SDUIDiv
outlineNone outlineNone As SDUIDiv
outlineOffset outlineOffset(s As String) As SDUIDiv
ring ring(s As String) As SDUIDiv
ringInset ringInset As SDUIDiv
ringBlack ringBlack As SDUIDiv
ringCurrent ringCurrent As SDUIDiv
ringInherit ringInherit As SDUIDiv
ringTransparent ringTransparent As SDUIDiv
ringWhite ringWhite As SDUIDiv
ringOffsetColor ringOffsetColor(s As String) As SDUIDiv
ringOffsetColorIntensity ringOffsetColorIntensity(c As String, i As Int) As SDUIDiv
ringOffsetBlack ringOffsetBlack As SDUIDiv
ringOffsetCurrent ringOffsetCurrent As SDUIDiv
ringOffsetInherit ringOffsetInherit As SDUIDiv
ringOffsetTransparent ringOffsetTransparent As SDUIDiv
ringOffsetWhite ringOffsetWhite As SDUIDiv
ringOffsetWidth ringOffsetWidth(s As String) As SDUIDiv
shadowInner shadowInner As SDUIDiv
shadowNone shadowNone As SDUIDiv
shadowBlack shadowBlack As SDUIDiv
shadowCurrent shadowCurrent As SDUIDiv
shadowInherit shadowInherit As SDUIDiv
shadowTransparent shadowTransparent As SDUIDiv
shadowWhite shadowWhite As SDUIDiv
mixBlendColor mixBlendColor As SDUIDiv
mixBlendColorBurn mixBlendColorBurn As SDUIDiv
mixBlendColorDodge mixBlendColorDodge As SDUIDiv
mixBlendDarken mixBlendDarken As SDUIDiv
mixBlendDifference mixBlendDifference As SDUIDiv
mixBlendExclusion mixBlendExclusion As SDUIDiv
mixBlendHardLight mixBlendHardLight As SDUIDiv
mixBlendHue mixBlendHue As SDUIDiv
mixBlendLighten mixBlendLighten As SDUIDiv
mixBlendLuminosity mixBlendLuminosity As SDUIDiv
mixBlendMultiply mixBlendMultiply As SDUIDiv
mixBlendNormal mixBlendNormal As SDUIDiv
mixBlendOverlay mixBlendOverlay As SDUIDiv
mixBlendPlusLighter mixBlendPlusLighter As SDUIDiv
mixBlendSaturation mixBlendSaturation As SDUIDiv
mixBlendScreen mixBlendScreen As SDUIDiv
mixBlendSoftLight mixBlendSoftLight As SDUIDiv
bgBlendColor bgBlendColor As SDUIDiv
bgBlendColorBurn bgBlendColorBurn As SDUIDiv
bgBlendColorDodge bgBlendColorDodge As SDUIDiv
bgBlendDarken bgBlendDarken As SDUIDiv

238 / 331
 TailwindCSS WebApps using B4X

Method Name Method Signature

bgBlendDifference bgBlendDifference As SDUIDiv
bgBlendExclusion bgBlendExclusion As SDUIDiv
bgBlendHardLight bgBlendHardLight As SDUIDiv
bgBlendHue bgBlendHue As SDUIDiv
bgBlendLighten bgBlendLighten As SDUIDiv
bgBlendLuminosity bgBlendLuminosity As SDUIDiv
bgBlendMultiply bgBlendMultiply As SDUIDiv
bgBlendNormal bgBlendNormal As SDUIDiv
bgBlendOverlay bgBlendOverlay As SDUIDiv
bgBlendSaturation bgBlendSaturation As SDUIDiv
bgBlendScreen bgBlendScreen As SDUIDiv
bgBlendSoftLight bgBlendSoftLight As SDUIDiv
blur blur(s As String) As SDUIDiv
blurNone blurNone As SDUIDiv
brightness brightness(s As String) As SDUIDiv
contrast contrast(s As String) As SDUIDiv
dropShadow dropShadow(s As String) As SDUIDiv
dropShadowNone dropShadowNone As SDUIDiv
grayscale grayscale(s As String) As SDUIDiv
hueRotate hueRotate(i As String) As SDUIDiv
invert invert(s As String) As SDUIDiv
saturate saturate(s As String) As SDUIDiv
sepia sepia(s As String) As SDUIDiv
backdropBlur backdropBlur(i As String) As SDUIDiv
backdropBlurNone backdropBlurNone As SDUIDiv
backdropBrightness backdropBrightness(i As String) As SDUIDiv
backdropContrast backdropContrast(i As String) As SDUIDiv
backdropGrayscale backdropGrayscale(i As String) As SDUIDiv
backdropHueRotate backdropHueRotate(s As String) As SDUIDiv
backdropInvert backdropInvert(i As String) As SDUIDiv
backdropOpacity backdropOpacity(i As String) As SDUIDiv
backdropSaturate backdropSaturate(i As String) As SDUIDiv
backdropSepia backdropSepia(i As String) As SDUIDiv
borderCollapse borderCollapse As SDUIDiv
borderSeparate borderSeparate As SDUIDiv
borderSpacingPx borderSpacingPx As SDUIDiv
borderSpacingXPx borderSpacingXPx As SDUIDiv
borderSpacingYPx borderSpacingYPx As SDUIDiv
borderSpacing borderSpacing(i As String) As SDUIDiv
borderSpacingX borderSpacingX(s As String) As SDUIDiv
borderSpacingY borderSpacingY(s As String) As SDUIDiv
transitionColors transitionColors As SDUIDiv
transitionNone transitionNone As SDUIDiv
transitionOpacity transitionOpacity As SDUIDiv
transitionShadow transitionShadow As SDUIDiv
easeIn easeIn As SDUIDiv
easeLinear easeLinear As SDUIDiv
easeOut easeOut As SDUIDiv
scaleX scaleX(i As String) As SDUIDiv
scaleY scaleY(i As String) As SDUIDiv
translateXFull translateXFull As SDUIDiv
translateXPx translateXPx As SDUIDiv
translateYFull translateYFull As SDUIDiv
translateYPx translateYPx As SDUIDiv

239 / 331
 TailwindCSS WebApps using B4X

Method Name Method Signature

skew skew(s As String) As SDUIDiv
originBottom originBottom As SDUIDiv
originBottomLeft originBottomLeft As SDUIDiv
originBottomRight originBottomRight As SDUIDiv
originCenter originCenter As SDUIDiv
originRight originRight As SDUIDiv
originTop originTop As SDUIDiv
originTopLeft originTopLeft As SDUIDiv
originTopRight originTopRight As SDUIDiv
accentAuto accentAuto As SDUIDiv
accentColorIntensity accentColorIntensity(c As String, i As Int) As SDUIDiv
accentBlack accentBlack As SDUIDiv
accentCurrent accentCurrent As SDUIDiv
accentInherit accentInherit As SDUIDiv
accentTransparent accentTransparent As SDUIDiv
accentWhite accentWhite As SDUIDiv
appearanceNone appearanceNone As SDUIDiv
cursorAlias cursorAlias As SDUIDiv
cursorAllScroll cursorAllScroll As SDUIDiv
cursorAuto cursorAuto As SDUIDiv
cursorCell cursorCell As SDUIDiv
cursorColResize cursorColResize As SDUIDiv
cursorContextMenu cursorContextMenu As SDUIDiv
cursorCopy cursorCopy As SDUIDiv
cursorCrosshair cursorCrosshair As SDUIDiv
cursorDefault cursorDefault As SDUIDiv
cursorEResize cursorEResize As SDUIDiv
cursorEwResize cursorEwResize As SDUIDiv
cursorGrab cursorGrab As SDUIDiv
cursorGrabbing cursorGrabbing As SDUIDiv
cursorHelp cursorHelp As SDUIDiv
cursorMove cursorMove As SDUIDiv
cursorNResize cursorNResize As SDUIDiv
cursorNeResize cursorNeResize As SDUIDiv
cursorNeswResize cursorNeswResize As SDUIDiv
cursorNoDrop cursorNoDrop As SDUIDiv
cursorNone cursorNone As SDUIDiv
cursorNotAllowed cursorNotAllowed As SDUIDiv
cursorNsResize cursorNsResize As SDUIDiv
cursorNwResize cursorNwResize As SDUIDiv
cursorNwseResize cursorNwseResize As SDUIDiv
cursorProgress cursorProgress As SDUIDiv
cursorRowResize cursorRowResize As SDUIDiv
cursorSResize cursorSResize As SDUIDiv
cursorSeResize cursorSeResize As SDUIDiv
cursorSwResize cursorSwResize As SDUIDiv
cursorText cursorText As SDUIDiv
cursorVerticalText cursorVerticalText As SDUIDiv
cursorWResize cursorWResize As SDUIDiv
cursorWait cursorWait As SDUIDiv
cursorZoomIn cursorZoomIn As SDUIDiv
cursorZoomOut cursorZoomOut As SDUIDiv
caretBlack caretBlack As SDUIDiv
caretCurrent caretCurrent As SDUIDiv

240 / 331
 TailwindCSS WebApps using B4X

Method Name Method Signature

caretInherit caretInherit As SDUIDiv
caretTransparent caretTransparent As SDUIDiv
caretWhite caretWhite As SDUIDiv
caretColorIntensity caretColorIntensity(c As String, i As Int) As SDUIDiv
pointerEventsAuto pointerEventsAuto As SDUIDiv
resize resize As SDUIDiv
resizeNone resizeNone As SDUIDiv
resizeX resizeX As SDUIDiv
resizeY resizeY As SDUIDiv
scrollAuto scrollAuto As SDUIDiv
scrollSmooth scrollSmooth As SDUIDiv
scrollMPx scrollMPx(s As String) As SDUIDiv
scrollMbPx scrollMbPx(s As String) As SDUIDiv
scrollMlPx scrollMlPx(s As String) As SDUIDiv
scrollMrPx scrollMrPx(s As String) As SDUIDiv
scrollMtPx scrollMtPx(s As String) As SDUIDiv
scrollMxPx scrollMxPx(s As String) As SDUIDiv
scrollMyPx scrollMyPx(s As String) As SDUIDiv
scrollPPx scrollPPx(s As String) As SDUIDiv
scrollPbPx scrollPbPx(s As String) As SDUIDiv
scrollPlPx scrollPlPx(s As String) As SDUIDiv
scrollPrPx scrollPrPx(s As String) As SDUIDiv
scrollPtPx scrollPtPx(s As String) As SDUIDiv
scrollPxPx scrollPxPx(s As String) As SDUIDiv
scrollPyPx scrollPyPx(s As String) As SDUIDiv
snapAlignNone snapAlignNone As SDUIDiv
snapCenter snapCenter As SDUIDiv
snapEnd snapEnd As SDUIDiv
snapStart snapStart As SDUIDiv
snapAlways snapAlways As SDUIDiv
snapNormal snapNormal As SDUIDiv
snapBoth snapBoth As SDUIDiv
snapMandatory snapMandatory As SDUIDiv
snapNone snapNone As SDUIDiv
snapProximity snapProximity As SDUIDiv
snapX snapX As SDUIDiv
snapY snapY As SDUIDiv
touchAuto touchAuto As SDUIDiv
touchManipulation touchManipulation As SDUIDiv
touchNone touchNone As SDUIDiv
touchPanDown touchPanDown As SDUIDiv
touchPanLeft touchPanLeft As SDUIDiv
touchPanRight touchPanRight As SDUIDiv
touchPanUp touchPanUp As SDUIDiv
touchPanX touchPanX As SDUIDiv
touchPanY touchPanY As SDUIDiv
touchPinchZoom touchPinchZoom As SDUIDiv
selectAll selectAll As SDUIDiv
selectAuto selectAuto As SDUIDiv
selectText selectText As SDUIDiv
willChangeAuto willChangeAuto As SDUIDiv
willChangeContents willChangeContents As SDUIDiv
willChangeScroll willChangeScroll As SDUIDiv
willChangeTransform willChangeTransform As SDUIDiv

241 / 331
 TailwindCSS WebApps using B4X

Method Name Method Signature

fillColorIntensity fillColorIntensity(c As String, i As Int) As SDUIDiv
fillBlack fillBlack As SDUIDiv
fillCurrent fillCurrent As SDUIDiv
fillInherit fillInherit As SDUIDiv
fillNone fillNone As SDUIDiv
fillTransparent fillTransparent As SDUIDiv
fillWhite fillWhite As SDUIDiv
strokeColorIntensity strokeColorIntensity(c As String, i As Int) As SDUIDiv
strokeBlack strokeBlack As SDUIDiv
strokeCurrent strokeCurrent As SDUIDiv
strokeInherit strokeInherit As SDUIDiv
strokeNone strokeNone As SDUIDiv
strokeTransparent strokeTransparent As SDUIDiv
strokeWhite strokeWhite As SDUIDiv
stroke stroke(s As String) As SDUIDiv
notSrOnly notSrOnly As SDUIDiv
srOnly srOnly As SDUIDiv
prose prose(s As String) As SDUIDiv
aspectAuto aspectAuto As SDUIDiv
aspectSquare aspectSquare As SDUIDiv
aspectVideo aspectVideo As SDUIDiv
columns columns(s As String) As SDUIDiv
columnsAuto columnsAuto As SDUIDiv
breakAfterAll breakAfterAll As SDUIDiv
breakAfterAuto breakAfterAuto As SDUIDiv
breakAfterAvoid breakAfterAvoid As SDUIDiv
breakAfterAvoidPage breakAfterAvoidPage As SDUIDiv
breakAfterColumn breakAfterColumn As SDUIDiv
breakAfterLeft breakAfterLeft As SDUIDiv
breakAfterPage breakAfterPage As SDUIDiv
breakAfterRight breakAfterRight As SDUIDiv
breakBeforeAll breakBeforeAll As SDUIDiv
breakBeforeAuto breakBeforeAuto As SDUIDiv
breakBeforeAvoid breakBeforeAvoid As SDUIDiv
breakBeforeAvoidPage breakBeforeAvoidPage As SDUIDiv
breakBeforeColumn breakBeforeColumn As SDUIDiv
breakBeforeLeft breakBeforeLeft As SDUIDiv
breakBeforePage breakBeforePage As SDUIDiv
breakBeforeRight breakBeforeRight As SDUIDiv
breakInsideAuto breakInsideAuto As SDUIDiv
breakInsideAvoid breakInsideAvoid As SDUIDiv
breakInsideAvoidColumn breakInsideAvoidColumn As SDUIDiv
breakInsideAvoidPage breakInsideAvoidPage As SDUIDiv
boxDecorationClone boxDecorationClone As SDUIDiv
boxDecorationSlice boxDecorationSlice As SDUIDiv
boxBorder boxBorder As SDUIDiv
boxContent boxContent As SDUIDiv
contents contents As SDUIDiv
flowRoot flowRoot As SDUIDiv
inline inline As SDUIDiv
inlineGrid inlineGrid As SDUIDiv
inlineTable inlineTable As SDUIDiv
listItem listItem As SDUIDiv
table table As SDUIDiv

242 / 331
 TailwindCSS WebApps using B4X

Method Name Method Signature

tableCaption tableCaption As SDUIDiv
tableCell tableCell As SDUIDiv
tableColumn tableColumn As SDUIDiv
tableColumnGroup tableColumnGroup As SDUIDiv
tableFooterGroup tableFooterGroup As SDUIDiv
tableHeaderGroup tableHeaderGroup As SDUIDiv
tableRow tableRow As SDUIDiv
tableRowGroup tableRowGroup As SDUIDiv
floatLeft floatLeft As SDUIDiv
floatNone floatNone As SDUIDiv
floatRight floatRight As SDUIDiv
clearBoth clearBoth As SDUIDiv
clearLeft clearLeft As SDUIDiv
clearNone clearNone As SDUIDiv
clearRight clearRight As SDUIDiv
isolate isolate As SDUIDiv
isolationAuto isolationAuto As SDUIDiv
objectContain objectContain As SDUIDiv
objectFill objectFill As SDUIDiv
objectNone objectNone As SDUIDiv
objectScaleDown objectScaleDown As SDUIDiv
objectBottom objectBottom As SDUIDiv
objectCenter objectCenter As SDUIDiv
objectLeft objectLeft As SDUIDiv
objectLeftBottom objectLeftBottom As SDUIDiv
objectLeftTop objectLeftTop As SDUIDiv
objectRight objectRight As SDUIDiv
objectRightBottom objectRightBottom As SDUIDiv
objectRightTop objectRightTop As SDUIDiv
objectTop objectTop As SDUIDiv
overflowAuto overflowAuto As SDUIDiv
overflowClip overflowClip As SDUIDiv
overflowScroll overflowScroll As SDUIDiv
overflowVisible overflowVisible As SDUIDiv
overflowXClip overflowXClip As SDUIDiv
overflowXHidden overflowXHidden As SDUIDiv
overflowXScroll overflowXScroll As SDUIDiv
overflowXVisible overflowXVisible As SDUIDiv
overflowYAuto overflowYAuto As SDUIDiv
overflowYClip overflowYClip As SDUIDiv
overflowYHidden overflowYHidden As SDUIDiv
overflowYScroll overflowYScroll As SDUIDiv
overflowYVisible overflowYVisible As SDUIDiv
overscrollAuto overscrollAuto As SDUIDiv
overscrollContain overscrollContain As SDUIDiv
overscrollNone overscrollNone As SDUIDiv
overscrollXAuto overscrollXAuto As SDUIDiv
overscrollXContain overscrollXContain As SDUIDiv
overscrollXNone overscrollXNone As SDUIDiv
overscrollYAuto overscrollYAuto As SDUIDiv
overscrollYContain overscrollYContain As SDUIDiv
overscrollYNone overscrollYNone As SDUIDiv
fixed fixed As SDUIDiv
static static As SDUIDiv

243 / 331
 TailwindCSS WebApps using B4X

Method Name Method Signature

bottomAuto bottomAuto As SDUIDiv
bottomFull bottomFull As SDUIDiv
bottomPx bottomPx As SDUIDiv
insetAuto insetAuto As SDUIDiv
inset inset(s As String) As SDUIDiv
insetFull insetFull As SDUIDiv
insetPx insetPx As SDUIDiv
insetXAuto insetXAuto As SDUIDiv
insetXFull insetXFull As SDUIDiv
insetXPx insetXPx As SDUIDiv
insetYAuto insetYAuto As SDUIDiv
insetYFull insetYFull As SDUIDiv
insetYPx insetYPx As SDUIDiv
leftAuto leftAuto As SDUIDiv
leftFull leftFull As SDUIDiv
leftPx leftPx As SDUIDiv
rightAuto rightAuto As SDUIDiv
rightFull rightFull As SDUIDiv
rightPx rightPx As SDUIDiv
topAuto topAuto As SDUIDiv
topFull topFull As SDUIDiv
topPx topPx As SDUIDiv
collapse collapse As SDUIDiv
invisible invisible As SDUIDiv
visible visible As SDUIDiv
zAuto zAuto As SDUIDiv
z z(s As String) As SDUIDiv
ShowItem ShowItem(elID As String)
HideItem HideItem(elID As String)
AddEvent AddEvent(event As String, args As List)
SetBorder SetBorder(xBorderPosition As String, xBorderStyle As String,
xBorderWidth As String, xBorderColor As String, xBorderRadius As String)

Divider
SDUIDIVIDER
Properties
Property Type Default Value Options Description
ParentID String The ParentID of this div
Alignment String none horizontal|none|ve Alignment
rtical
Caption String Caption
Bg Color String Background Color
Bg Color Intensity String Background Color
Intensity
Text Color String Text Color
Text Color Intensity String Text Color Intensity
Visible Boolea True If visible.
n
Margins String a=?; x=?; y=?; t=?; Margins A-X-Y-T-B-L-R
b=?; l=?; r=?
Paddings String a=?; x=?; y=?; t=?; Paddings A-X-Y-T-B-L-R

244 / 331
 TailwindCSS WebApps using B4X

Property Type Default Value Options Description

b=?; l=?; r=?
Classes String Classes added to the
HTML tag.
Styles String Styles added to the HTML
tag. Must be a json String-
use =
Attributes String Attributes added to the
HTML tag. Must be a json
String- use =

Events

Methods (set… is a setter & get is a getter)

Method Name Method Signature
AddDivider AddDivider(mCallback As Object, ParentID As String, ID As String)
AssignElement AssignElement(mCallBack As Object, ID As String)
Enable Enable
Disable Disable
Show Show
Hide Hide
getName getName As String
getHere getHere As String
setCaption setCaption(l As String)
Vertical Vertical
Horizontal Horizontal
setBGColor setBGColor(s As String)
HorizontalResponsive HorizontalResponsive(xs As Boolean, sm As Boolean, md As
Boolean, lg As Boolean)
VerticalResponsive VerticalResponsive(xs As Boolean, sm As Boolean, md As Boolean,
lg As Boolean)
BGColorIntensity BGColorIntensity(c As String, s As String)
TextColorIntensity TextColorIntensity(hcolor As String, intensity As String)

Drawer
SDUIDRAWER
Properties
Property Type Default Value Options Description
ParentID String The ParentID of this div
Clipped Left Boolea False Clipped Left
n
Height String screen Height
Width String 80 Width
Has Navbar Boolea False Has Navbar
n
Has Bottom Nav Boolea False Has Bottom Navigation
n
Has Footer Boolea False Has Footer
n

245 / 331
 TailwindCSS WebApps using B4X

Property Type Default Value Options Description

At Right Boolea False At Right
n
Bg Color String Background Color
Bg Color Intensity String Background Color
Intensity
Overlay Bg Color String Overlay Background Color
Overlay Bg Color String Overlay Background Color
Intensity Intensity
Mobile Boolea False Mobile
n
Text Color String Text Color
Text Color Intensity String Text Color Intensity
Visible Boolea True If visible.
n
Margins String a=?; x=?; y=?; t=?; Margins A-X-Y-T-B-L-R
b=?; l=?; r=?
Paddings String a=?; x=?; y=?; t=?; Paddings A-X-Y-T-B-L-R
b=?; l=?; r=?
Classes String Classes added to the
HTML tag.
Styles String Styles added to the HTML
tag. Must be a json String-
use =
Attributes String Attributes added to the
HTML tag. Must be a json
String- use =

Events
Menu_Click (item As String)

Methods (set… is a setter & get is a getter)

Method Name Method Signature
DesignerCreateView DesignerCreateView (Target As BANanoElement, Props As Map)
Initialize Initialize (CallBack As Object, cName As String, EventName As
String)
AddDrawer AddDrawer(mCallback As Object, ParentID As String, ID As String,
xHasNavBar As Boolean)
AssignElement AssignElement(mCallBack As Object, ID As String)
Toggle Toggle
getMenuID getMenuID As String
ClearContent ClearContent
ClearSide ClearSide
Show Show
Hide Hide
Close Close
Open Open
getContentID getContentID As String
getName getName As String
getHere getHere As String
Enable Enable

246 / 331
 TailwindCSS WebApps using B4X

Method Name Method Signature

Disable Disable
Mobile Mobile
AtRight AtRight
setW setW(s As String)
setH setH(s As String)
setBGColor setBGColor(s As String)
Clear Clear(parentID As String)
AddItem AddItem(ID As String, Label As String)
AddItemChild AddItemChild(parentID As String, ID As String, Label As String)
AddItemPage AddItemPage(pgObj As Object)
AddItemChildPage AddItemChildPage(parentID As String, pgObj As Object)
ClippedLeft ClippedLeft
AdjustClippedLeft AdjustClippedLeft(b As Boolean)
ClippedLeftWithFooter ClippedLeftWithFooter
HScreen HScreen
TextColorIntensity TextColorIntensity(hcolor As String, intensity As String)
BGColorIntensity BGColorIntensity(c As String, s As String)
ClearPageView ClearPageView

Drop Down
SDUIDROPDOWN
Properties
Property Type Default Value Options Description
ParentID String The ParentID of this div
Activator String button avatar|button|icon Dropdown Activator
Button Caption String Button Caption (if
Activator Is Button)
Icon Name String Icon Name (if Activator Is
Icon)
Button/Avatar/Icon String 20 Button/Avatar/Icon Size
Size
Avatar Url String Avatar Image Url
Avatar Status String none none|offline|online
Badge Color String Badge Color
Badge Value String Badge Value
Badge Visible Boolea False Badge Visible
n
Position String default default|end|left|rig
ht|top
Bg Color String Background Color
Bg Color Intensity String Background Color
Intensity
Highlight Active Boolea False Highlight Active Item
n
Hover Boolea False Hover To Open
n
Item Color String Background Color Of Items
Item Color Intensity String Item Color Intensity
Menu Compact Boolea False Menu Compact

247 / 331
 TailwindCSS WebApps using B4X

Property Type Default Value Options Description

n
Menu Normal Boolea False Menu Normal
n
Menu Vertical Boolea True Menu Vertical
n
Open Boolea False If Opened
n
Rounded Box Boolea False Rounded Box
n
Shadow Boolea False Shadow
n
Text Color String Text Color
Text Color Intensity String Text Color Intensity
Width String 52 Width - do not set for
'horizontal' menu
Height String Height
Visible Boolea True If visible.
n
Margins String a=?; x=?; y=?; t=?; Margins A-X-Y-T-B-L-R
b=?; l=?; r=?
Paddings String a=?; x=?; y=?; t=?; Paddings A-X-Y-T-B-L-R
b=?; l=?; r=?
Classes String Classes added to the
HTML tag.
Styles String Styles added to the HTML
tag. Must be a json String-
use =
Attributes String Attributes added to the
HTML tag. Must be a json
String- use =

Events
Click (item As String)

Methods (set… is a setter & get is a getter)

Method Name Method Signature
AddDropDown AddDropDown(mCallback As Object, ParentID As String, ID As
String, Label As String)
AddDropDownAvatar AddDropDownAvatar(mCallback As Object, ParentID As String, ID
As String, sSize As String, ImgURL As String)
AddDropDownIcon AddDropDownIcon(mCallback As Object, ParentID As String, ID As
String, xSize As String, xIconName As String)
SetElement SetElement(e As BANanoElement)
SetItems SetItems(l As List)
ItemColorIntensity ItemColorIntensity(c As String, i As String)
AssignElement AssignElement(mcallback As Object, ID As String)
setBadgeValue setBadgeValue(value As Int)
setBadgeColor setBadgeColor(value As String)
setAvatarOnline setAvatarOnline(b As Boolean)
setBadgeVisible setBadgeVisible(b As Boolean)

248 / 331
 TailwindCSS WebApps using B4X

Method Name Method Signature

setAvatarOffline setAvatarOffline(b As Boolean)
Size Size As Int
AddItemBadge AddItemBadge(parentID As String, ID As String, Label As String,
sBadge As String)
AddItemChildBadge AddItemChildBadge(parentID As String, ID As String, Label As
String, sBadge As String)
ItemChildren ItemChildren(ItemID As String) As SDUIDiv
SetItemBadgeValue SetItemBadgeValue(id As String, value As String)
SetItemBadgeColor SetItemBadgeColor(id As String, value As String)
SetItemBadgeOutline SetItemBadgeOutline(id As String, bb As Boolean)
AddTitle AddTitle(ID As String, Label As String)
Link Link(btnID As String) As SDUILink
ItemBadge ItemBadge(ItemID As String) As SDUIBadge
setActive setActive(btnID As String)
DisableItem DisableItem(btnID As String)
Item Item(ItemID As String) As SDUIButton
Clear Clear(parentID As String)
Normal Normal
Compact Compact
Vertical Vertical
Horizontal Horizontal
HorizontalResponsive HorizontalResponsive(xs As Boolean, sm As Boolean, md As
Boolean, lg As Boolean)
VerticalResponsive VerticalResponsive(xs As Boolean, sm As Boolean, md As Boolean,
lg As Boolean)
AddItemChild AddItemChild(parentID As String, ID As String, Label As String)
AddItemParent AddItemParent(ID As String, Label As String)
AddItem AddItem(ID As String, Label As String)
AddItemDivider AddItemDivider(parentID As String, Label As String)
AddItemIcon AddItemIcon(ID As String, IconName As String, Label As String)
AddItemIcon1 AddItemIcon1(parentID As String, ID As String, IconName As String,
Label As String)
AddItemIconOnly AddItemIconOnly(ID As String, IconName As String)
AddItemIconOnly1 AddItemIconOnly1(ParentID As String, ID As String, IconName As
String)
AddItem1 AddItem1(parentID As String, ID As String, Label As String,
HasChildren As Boolean)
setW setW(i As String)
setH setH(i As String)
Enable Enable
Disable Disable
Show Show
Hide Hide
On On(event As String, CallBack As Object, MethodName As String)
getName getName As String
getHere getHere As String
AtEnd AtEnd
AtTop AtTop
AtLeft AtLeft
AtRight AtRight

249 / 331
 TailwindCSS WebApps using B4X

Method Name Method Signature

Hover Hover
setOpen setOpen(b As Boolean)
RoundedBox RoundedBox
NormalResponsive NormalResponsive(xs As Boolean, sm As Boolean, md As Boolean,
lg As Boolean)
CompactResponsive CompactResponsive(xs As Boolean, sm As Boolean, md As Boolean,
lg As Boolean)
shadow shadow(s As String)
TextColorIntensity TextColorIntensity(hcolor As String, intensity As String)
BGColorIntensity BGColorIntensity(c As String, s As String)
setAvatarImage setAvatarImage(l As String)
setAvatarSize setAvatarSize(l As String)

DocxTemplator
SDUIDOCXTEMPLATOR
Events
Finished

Methods (set… is a setter & get is a getter)

Method Name Method Signature
Initialize Initialize(mcb As Object, event As String, tmpFile As String, target
As String)
SetField SetField(key As String, value As Object)
BuildWait BuildWait

File Input
SDUIFILEINPUT
Properties
Property Type Default Value Options Description
ParentID String The ParentID of this div
Type String default camera|default|inp
ut-group|progress
Size String none lg|md|sm|xs|none Size
OwnSize String 100px Own Size for progress &
camera
Width String full Width
Caption String Progress 1 Caption
Color String primary accent|error|ghost Variant
|ghost|info|none|n
uetral|primary|sec
ondary|success|wa
rning
Bordered Boolea True Bordered
n
Auto Focus Boolea False Auto Focus
n
Prefix String Prefix
Prepend Icon String Prepend Icon

250 / 331
 TailwindCSS WebApps using B4X

Property Type Default Value Options Description

Append Icon String Append Icon
Suffix String Suffix
Disabled Boolea False If Disabled
n
Error Message String Error Message
Hide Details Boolea False Hide Details
n
Hint String Hint
Read Only Boolea False Read Only
n
Required Boolea False Is Required
n
Rounded Full Boolea False Rounded Full
n
Visible Boolea True If visible.
n
Margins String a=?; x=?; y=?; t=?; Margins A-X-Y-T-B-L-R
b=?; l=?; r=?
Paddings String a=?; x=?; y=?; t=?; Paddings A-X-Y-T-B-L-R
b=?; l=?; r=?
Classes String Classes added to the
HTML tag.
Styles String Styles added to the HTML
tag. Must be a json String-
use =
Attributes String Attributes added to the
HTML tag. Must be a json
String- use =

Events
Focus (event As BANanoEvent)
Blur (event As BANanoEvent)
Keydown (event As BANanoEvent)
KeyUp (event As BANanoEvent)
TouchEnd (event As BANanoEvent)
Change (event As BANanoEvent)
Prepend_Click (event As BANanoEvent)
Append_Click (event As BANanoEvent)
Click (event As BANanoEvent)
Uploading (b as Boolean)

Methods (set… is a setter & get is a getter)

Method Name Method Signature
BorderColorIntensity BorderColorIntensity(c As String, i As String)
Enable Enable
Disable Disable
AddFileInput AddFileInput(mCallback As Object, ParentID As String, ID As String)
As SDUIFileInput
setFieldName setFieldName(s As String)
AddFileInputProgress AddFileInputProgress(mCallback As Object, ParentID As String, ID
As String, xSize As String, xColor As String) As SDUIFileInput

251 / 331
 TailwindCSS WebApps using B4X

Method Name Method Signature

setLoadingFile setLoadingFile(b As Boolean)
setW setW(v As String)
uploadit_tick uploadit_tick
setPreviewImage setPreviewImage(s As String)
AddFileInputGroup AddFileInputGroup(mCallback As Object, ParentID As String, sID As
String, xCaption As String, xHint As String, xPrefix As String, xSuffix
As String) As SDUIFileInput
setHideDetails setHideDetails(b As Boolean)
AssignElement AssignElement(mCallBack As Object, ID As String)
setMultiple setMultiple(b As Boolean) As SDUIFileInput
setPrependIcon setPrependIcon(picon As String)
setAppendIcon setAppendIcon(picon As String)
setAppendIconBGColor setAppendIconBGColor(c As String)
setPrependIconBGColor setPrependIconBGColor(c As String)
setValue setValue(s As String)
getValue getValue As String
setCaption setCaption(l As String)
setHintCaption setHintCaption(l As String)
setPrefix setPrefix(l As String)
setSuffix setSuffix(l As String)
On On(event As String, CallBack As Object, MethodName As String)
getName getName As String
getHere getHere As String
setBordered setBordered(b As Boolean)
setGhost setGhost(b As Boolean)
setPlaceholder setPlaceholder(s As String)
getDisabled getDisabled As Boolean
setRequired setRequired(b As Boolean)
setReadOnly setReadOnly(b As Boolean)
setInputGroupSize setInputGroupSize(S As String)
setInputGroupVertical setInputGroupVertical(b As Boolean)
Show Show
Hide Hide
setColor setColor(s As String)
setSize setSize(s As String)
setAutoFocus setAutoFocus(p As Boolean)
setErrorMessage setErrorMessage(p As String)
HintColorIntensity HintColorIntensity(hcolor As String, intensity As String)
IsBlank IsBlank As Boolean
Large Large
Small Small
Medium Medium
Tiny Tiny
BackCamera BackCamera
FrontCamera FrontCamera
AcceptImagesOnly AcceptImagesOnly
ChangeSingleAsJSon ChangeSingleAsJSon
ChangeSingleAsArrayBuffer ChangeSingleAsArrayBuffer
ChangeSingleAsText ChangeSingleAsText

252 / 331
 TailwindCSS WebApps using B4X

Method Name Method Signature

ChangeSingleAsDataURL ChangeSingleAsDataURL
ChangeSingle ChangeSingle
ChangeMultiple ChangeMultiple
SizeLG SizeLG
SizeSM SizeSM
SizeMD SizeMD
SizeXS SizeXS
SizeLGResponsive SizeLGResponsive(xs As Boolean, sm As Boolean, md As Boolean, lg
As Boolean)
SizeMDResponsive SizeMDResponsive(xs As Boolean, sm As Boolean, md As Boolean,
lg As Boolean)
SizeSMResponsive SizeSMResponsive(xs As Boolean, sm As Boolean, md As Boolean,
lg As Boolean)
SizeXSResponsive SizeXSResponsive(xs As Boolean, sm As Boolean, md As Boolean, lg
As Boolean)
GetFiles GetFiles As List
GetFile GetFile As Map
rounded rounded(s As String) As SDUIFileInput
roundedFull roundedFull As SDUIFileInput
wFull wFull As SDUIFileInput

Flex
SDUIFLEX
Properties
Property Type Default Value Options Description
ParentID String The ParentID of this div
Flex Type String String 1|auto|flex|initial|Flex Type
none
Align Content String around|baseline|be Align Content
tween|center|end|
evenly|none|start
Align Items String baseline|baseline|c Align Items
enter|end|none|st
art
Align Self String auto|baseline|cent Align Self
er|end|none|start|
stretch
Bg Color String Background Color
Bg Color Intensity String Background Color
Intensity
Flex Basis String Flex Basis
Flex Direction String col|col- Flex Direction
reverse|none|row|
row-reverse
Flex Grow String none|grow|0 Flex Grow
Flex Shrink String none|shrink|0 Flex Shrink
Gap String Gap
Horizontal Gap String Horizontal Gap
Vertical Gap String Vertical Gap

253 / 331
 TailwindCSS WebApps using B4X

Property Type Default Value Options Description

Height String Height
Min Height String Min Height
Max Height String Max Height
Width String Width
Min Width String Min Width
Max Width String Max Width
Horizontal Spacing String 0 0|0.5|1|1.5|2|2.5| Horizontal Spacing
3|3.5|4|5|6|7|8|9
|10
Vertical Spacing String 0|0.5|1|1.5|2|2.5| Vertical Spacing
3|3.5|4|5|6|7|8|9
|10
Justify Content String around|between|c Justify Content
enter|end|evenly|
none|start
Justify Items String center|end|none|s Justify Items
tart|stretch
Justify Self String center|end|none|s Justify Self
tart|stretch
Order String 1|10|11|12|2|3|4 Order
|5|6|7|8|9|first|la
st|none
Place Content String around|baseline|be Place Content
tween|center|end|
evenly|none|start|
stretch
Place Items String baseline|center|en Place Items
d|none|start|stretc
h
Place Self String String auto|center|end|n Place Self
one|start|stretch
Text Color String Text Color
Text Color Intensity String Text Color Intensity
Wrap String flex-nowrap|flex- Wrap
wrap|flex-wrap-
reverse|none
Visible Boolea True If visible.
n
Margins String a=?; x=?; y=?; t=?; Margins A-X-Y-T-B-L-R
b=?; l=?; r=?
Paddings String a=?; x=?; y=?; t=?; Paddings A-X-Y-T-B-L-R
b=?; l=?; r=?
Classes String Classes added to the
HTML tag.
Styles String Styles added to the HTML
tag. Must be a json String-
use =
Attributes String Attributes added to the
HTML tag. Must be a json
String- use =

254 / 331
 TailwindCSS WebApps using B4X

Events
Click (e As BANanoEvent)

Methods (set… is a setter & get is a getter)

Method Name Method Signature
Class_Globals Class_Globals
DesignerCreateView DesignerCreateView (Target As BANanoElement, Props As Map)
Initialize Initialize (CallBack As Object, cName As String, EventName As
String)
CreateDiv CreateDiv(mCallback As Object, ParentID As String, ID As String) As
SDUIFlex
shadow shadow(s As String)
RoundedBox RoundedBox
TextColorIntensity TextColorIntensity(hcolor As String, intensity As String)
BGColorIntensity BGColorIntensity(c As String, s As String)
alignContent alignContent(s As String) As SDUIFlex
alignItems alignItems(s As String) As SDUIFlex
alignSelf alignSelf(s As String) As SDUIFlex
flexBasis flexBasis(s As String) As SDUIFlex
flexDirection flexDirection(s As String) As SDUIFlex
flexGrow flexGrow(s As String) As SDUIFlex
flexShrink flexShrink(s As String) As SDUIFlex
flexType flexType(s As String) As SDUIFlex
gap gap(s As String) As SDUIFlex
height height(s As String) As SDUIFlex
horizontalGap horizontalGap(s As String) As SDUIFlex
horizontalSpacing horizontalSpacing(s As String) As SDUIFlex
justifyContent justifyContent(s As String) As SDUIFlex
justifyItems justifyItems(s As String) As SDUIFlex
justifySelf justifySelf(s As String) As SDUIFlex
maxHeight maxHeight(s As String) As SDUIFlex
maxWidth maxWidth(s As String) As SDUIFlex
minHeight minHeight(s As String) As SDUIFlex
minWidth minWidth(s As String) As SDUIFlex
order order(s As String) As SDUIFlex
placeContent placeContent(s As String) As SDUIFlex
placeItems placeItems(s As String) As SDUIFlex
placeSelf placeSelf(s As String) As SDUIFlex
verticalGap verticalGap(s As String) As SDUIFlex
verticalSpacing verticalSpacing(s As String) As SDUIFlex
width width(s As String) As SDUIFlex
wrap wrap(s As String) As SDUIFlex
AssignElement AssignElement(mCallBack As Object, ID As String)
Enable Enable
Disable Disable
getName getName As String
getHere getHere As String
Show Show
Hide Hide

255 / 331
 TailwindCSS WebApps using B4X

Footer
SDUIFOOTER
Properties
Property Type Default Value Options Description
ParentID String The ParentID of this div
Center Boolea False Center
n
Bg Color String Background Color
Bg Color Intensity String Background Color
Intensity
Text Color String Text Color
Text Color Intensity String Text Color Intensity
Visible Boolea True If visible.
n
Margins String a=?; x=?; y=?; t=?; Margins A-X-Y-T-B-L-R
b=?; l=?; r=?
Paddings String a=?; x=?; y=?; t=?; Paddings A-X-Y-T-B-L-R
b=?; l=?; r=?
Classes String Classes added to the
HTML tag.
Styles String Styles added to the HTML
tag. Must be a json String-
use =
Attributes String Attributes added to the
HTML tag. Must be a json
String- use =

Events

Methods (set… is a setter & get is a getter)

Method Name Method Signature
AddFooter AddFooter(mCallback As Object, ParentID As String, ID As String)
AssignElement AssignElement(mCallBack As Object, ID As String)
AddColumn AddColumn(id As String, scaption As String) As SDUIDiv
getHere getHere As String
setCaption setCaption(l As String)
getName getName As String
Show Show
Hide Hide
Enable Enable
Disable Disable
setBGColor setBGColor(s As String)
BGColorIntensity BGColorIntensity(c As String, s As String)
Center Center As SDUIFooter
CellID CellID(xRow As Int, xCol As Int) As String
Row Row(xRow As Int) As SDUIDiv
Cell Cell(xRow As Int, xCol As Int) As SDUIDiv
TextColorIntensity TextColorIntensity(hcolor As String, intensity As String)

256 / 331
 TailwindCSS WebApps using B4X

FullCalendar
SDUIFULLCALENDAR
Properties
Property Type Default Value Options Description
ParentID String The ParentID of this div
Initial View String dayGridMonth dayGridMonth|day Initial View
GridWeek|listMont
h|listWeek|timeGri
dDay|timeGridWee
k
Initial Date String now Initial Date
Aspect Ratio String 3 Aspect Ratio
Business Hours Boolea False Business Hours
n
Button Icons Boolea True Show The Prev/next Text
n
Day Max Events Boolea True Day Max Events
n
Editable Boolea True Editable
n
Selectable Boolea True Selectable
n
Select Mirror Boolea True Select Mirror
n
Locale String en Locale
Month Text String month Month Text
Week Text String week Week Text
Day Text String day Day Text
Nav Links Boolea True Nav Links
n
Now Indicator Boolea True Now Indicator
n
Week Numbers Boolea False Week Numbers
n
Visible Boolea True If visible.
n
Margins String a=?; x=?; y=?; t=?; Margins A-X-Y-T-B-L-R
b=?; l=?; r=?
Paddings String a=?; x=?; y=?; t=?; Paddings A-X-Y-T-B-L-R
b=?; l=?; r=?
Classes String Classes added to the
HTML tag.
Styles String Styles added to the HTML
tag. Must be a json String-
use =
Attributes String Attributes added to the
HTML tag. Must be a json
String- use =

Events
Event Signature

257 / 331
 TailwindCSS WebApps using B4X

EventClick (args As Map)

Methods (set… is a setter & get is a getter)

Method Name Method Signature
Class_Globals Class_Globals
DesignerCreateView DesignerCreateView (Target As BANanoElement, Props As Map)
AddFullCalendar AddFullCalendar(mCallback As Object, ParentID As String, ID As
String)
Refresh Refresh
Initialize Initialize (CallBack As Object, cName As String, EventName As
String)
shadow shadow(s As String)
RoundedBox RoundedBox
TextColorIntensity TextColorIntensity(hcolor As String, intensity As String)
BGColorIntensity BGColorIntensity(c As String, s As String)
AddEvent AddEvent(eID As String, egroupId As String, eTitle As String, eStart
As String, eEnd As String, eAllDay As Boolean, eurl As String, eColor
As String, eConstraint As String, eBackground As Boolean, eOverlap
As Boolean)
UnSelect UnSelect
setAspectRatio setAspectRatio(s As String)
setBusinessHours setBusinessHours(b As Boolean)
setButtonIcons setButtonIcons(b As Boolean)
setContentHeight setContentHeight(s As String)
setDayMaxEvents setDayMaxEvents(b As Boolean)
setDroppable setDroppable(b As Boolean)
setEditable setEditable(b As Boolean)
setInitialDate setInitialDate(s As String)
setInitialView setInitialView(s As String)
setLocale setLocale(s As String)
setMonthText setMonthText(s As String)
setDayText setDayText(s As String)
setNavLinks setNavLinks(b As Boolean)
setNow setNow(s As String)
setNowIndicator setNowIndicator(b As Boolean)
setSelectMirror setSelectMirror(b As Boolean)
setSelectable setSelectable(b As Boolean)
setWeekNumbers setWeekNumbers(b As Boolean)
setWeekText setWeekText(s As String)
AssignElement AssignElement(mCallBack As Object, ID As String)
Enable Enable
Disable Disable
getName getName As String
getHere getHere As String
Show Show
Hide Hide
AddToParent AddToParent(targetID As String, props As Map)

258 / 331
 TailwindCSS WebApps using B4X

Grid
SDUIGRID
Properties
Property Type Default Value Options Description
ParentID String The ParentID of this div
Grid Boolea False Grid
n
Align Content String around|baseline|be Align Content
tween|center|end|
evenly|none|start
Align Items String baseline|baseline|c Align Items
enter|end|none|st
art
Align Self String auto|baseline|cent Align Self
er|end|none|start|
stretch
Align Self String auto|baseline|cent Align Self
er|end|none|start|
stretch
Auto Cols String auto|fr|max|min|n Auto Cols
one
Auto Rows String auto|fr|max|min|n Auto Rows
one
Bg Color String Background Color
Bg Color Intensity String Background Color
Intensity
Col End String Column End
Col Span String Col Span
Device Col Span String xs=?; sm=?; md=?; Grid Cols Per Device xs=?;
lg=?; xl=? sm=?; md=?; lg=?; xl=?
Col Start String Column Start
Gap String Gap
Grid Cols String Grid Columns
Device Grid Cols String xs=?; sm=?; md=?; Grid Cols Per Device xs=?;
lg=?; xl=? sm=?; md=?; lg=?; xl=?
Grid Flow String col|col- Grid Flow
dense|dense|none
|row|row-dense
Grid Rows String Grid Rows
Height String 1 of 2|1 of 3|1 of Height
4|2 of 3|3 of
4|auto|full|max|mi
n|none|screen
Horizontal Gap String Horizontal Gap
Horizontal Spacing String 0 0|0.5|1|1.5|2|2.5| Horizontal Spacing
3|3.5|4|5|6|7|8|9
|10
Justify Content String around|between|c Justify Content
enter|end|evenly|
none|start
Justify Items String center|end|none|s Justify Items

259 / 331
 TailwindCSS WebApps using B4X

Property Type Default Value Options Description

tart|stretch
Justify Self String center|end|none|s Justify Self
tart|stretch
Max Height String Max Height
Max Width String Max Width
Min Height String Min Height
Min Width String Min Width
Order String 1|10|11|12|2|3|4 Order
|5|6|7|8|9|first|la
st|none
Place Content String around|baseline|be Place Content
tween|center|end|
evenly|none|start|
stretch
Place Items String baseline|center|en Place Items
d|none|start|stretc
h
Place Self String auto|center|end|n Place Self
one|start|stretch
Row End String Row End
Row Span String Row Span
Row Start String Row Start
Text Color String Text Color
Text Color Intensity String Text Color Intensity
Vertical Gap String Vertical Gap
Vertical Spacing String 0|0.5|1|1.5|2|2.5| Vertical Spacing
3|3.5|4|5|6|7|8|9
|10
Width String 1 of 2|1 of 3|1 of Width
4|2 of 3|3 of
4|auto|full|max|mi
n|none|screen
Visible Boolea True If visible.
n
Margins String a=?; x=?; y=?; t=?; Margins A-X-Y-T-B-L-R
b=?; l=?; r=?
Paddings String a=?; x=?; y=?; t=?; Paddings A-X-Y-T-B-L-R
b=?; l=?; r=?
Classes String Classes added to the
HTML tag.
Styles String Styles added to the HTML
tag. Must be a json String-
use =
Attributes String Attributes added to the
HTML tag. Must be a json
String- use =

Events
Click (e As BANanoEvent)

Methods (set… is a setter & get is a getter)

260 / 331
 TailwindCSS WebApps using B4X

Method Name Method Signature

Class_Globals Class_Globals
DesignerCreateView DesignerCreateView (Target As BANanoElement, Props As Map)
setDeviceGridCols setDeviceGridCols(s As String)
CreateDiv CreateDiv(mCallback As Object, ParentID As String, ID As String) As
SDUIGrid
Initialize Initialize (CallBack As Object, cName As String, EventName As
String)
shadow shadow(s As String)
RoundedBox RoundedBox
TextColorIntensity TextColorIntensity(hcolor As String, intensity As String)
BGColorIntensity BGColorIntensity(c As String, s As String)
alignContent alignContent(s As String) As SDUIGrid
alignItems alignItems(s As String) As SDUIGrid
alignSelf alignSelf(s As String) As SDUIGrid
gap gap(s As String) As SDUIGrid
height height(s As String) As SDUIGrid
horizontalGap horizontalGap(s As String) As SDUIGrid
horizontalSpacing horizontalSpacing(s As String) As SDUIGrid
justifyContent justifyContent(s As String) As SDUIGrid
justifyItems justifyItems(s As String) As SDUIGrid
justifySelf justifySelf(s As String) As SDUIGrid
maxHeight maxHeight(s As String) As SDUIGrid
maxWidth maxWidth(s As String) As SDUIGrid
minHeight minHeight(s As String) As SDUIGrid
minWidth minWidth(s As String) As SDUIGrid
order order(s As String) As SDUIGrid
placeContent placeContent(s As String) As SDUIGrid
placeItems placeItems(s As String) As SDUIGrid
placeSelf placeSelf(s As String) As SDUIGrid
verticalGap verticalGap(s As String) As SDUIGrid
verticalSpacing verticalSpacing(s As String) As SDUIGrid
width width(s As String) As SDUIGrid
wrap wrap(s As String) As SDUIGrid
AssignElement AssignElement(mCallBack As Object, ID As String)
Enable Enable
Disable Disable
getName getName As String
getHere getHere As String
Show Show
Hide Hide
autoCols autoCols(s As String) As SDUIGrid
autoRows autoRows(s As String) As SDUIGrid
colEnd colEnd(s As String) As SDUIGrid
colSpan colSpan(s As String) As SDUIGrid
colStart colStart(s As String) As SDUIGrid
gridCols gridCols(s As String) As SDUIGrid
gridFlow gridFlow(s As String) As SDUIGrid
gridRows gridRows(s As String) As SDUIGrid
rowEnd rowEnd(s As String) As SDUIGrid

261 / 331
 TailwindCSS WebApps using B4X

Method Name Method Signature

rowSpan rowSpan(s As String) As SDUIGrid
rowStart rowStart(s As String) As SDUIGrid

Hero
SDUIHERO
Properties
Property Type Default Value Options Description
ParentID String The ParentID of this div
Overlay Opacity String Overlay Opacity
Overlay Visible Boolea False Overlay Is Visible
n
Content Classes String Content Classes
Bg Color String base Background Color
Bg Color Intensity String 200 Background Color
Intensity
Text Color String Text Color
Text Color Intensity String Text Color Intensity
Height String Height
Width String Width
Background Image String Background Image Url
Min H Screen Boolea False Min H Screen
n
Rounded Box Boolea False Rounded Box
n
Shadow Boolea False Shadow
n
Visible Boolea True If visible.
n
Margins String a=?; x=?; y=?; t=?; Margins A-X-Y-T-B-L-R
b=?; l=?; r=?
Paddings String a=?; x=?; y=?; t=?; Paddings A-X-Y-T-B-L-R
b=?; l=?; r=?
Classes String Classes added to the
HTML tag.
Styles String Styles added to the HTML
tag. Must be a json String-
use =
Attributes String Attributes added to the
HTML tag. Must be a json
String- use =

Events

Methods (set… is a setter & get is a getter)

Method Name Method Signature
AddHero AddHero(mCallback As Object, ParentID As String, ID As String)
AssignElement AssignElement(mCallBack As Object, ID As String)
getHere getHere As String

262 / 331
 TailwindCSS WebApps using B4X

Method Name Method Signature

getName getName As String
Show Show
Hide Hide
Enable Enable
Disable Disable
MinHScreen MinHScreen
setBackgroundImage setBackgroundImage(url As String)
CellID CellID(xRow As Int, xCol As Int) As String
Row Row(xRow As Int) As SDUIDiv
Cell Cell(xRow As Int, xCol As Int) As SDUIDiv
shadow shadow(s As String)
RoundedBox RoundedBox
TextColorIntensity TextColorIntensity(hcolor As String, intensity As String)
BGColorIntensity BGColorIntensity(c As String, s As String)
setW setW(s As String)
setH setH(s As String)

Image
SDUIIMAGE
Properties
Property Type Default Value Options Description
ParentID String The ParentID of this div
Source String The image source.
Shape String none none|circle|rounde Shape
d|squircle|heart|he
xagon|hexagon-
2|decagon|pentago
n|diamond|square|
parallelogram|paral
lelogram-
2|parallelogram-
3|parallelogram-
4|star|star-
2|triangle|triangle-
2|triangle-
3|triangle-4|half-
1|half-2
Alt text String Text shown if the image is
not available.
Object Resize String none contain|cover|fill|s Object Resize
cale-down|none
Width String 12 Width of image
Height String 12 Height of image
Max Width String Max Width
Min Width String Min Width
Min Height String Min Height
Max Height String Max Height
Rounded String Rounded
Shadow Boolea False Shadow

263 / 331
 TailwindCSS WebApps using B4X

Property Type Default Value Options Description

n
Visible Boolea True If visible.
n
Margins String a=?; x=?; y=?; t=?; Margins A-X-Y-T-B-L-R
b=?; l=?; r=?
Paddings String a=?; x=?; y=?; t=?; Paddings A-X-Y-T-B-L-R
b=?; l=?; r=?
Classes String Classes added to the
HTML tag.
Styles String Styles added to the HTML
tag. Must be a json String-
use =
Attributes String Attributes added to the
HTML tag. Must be a json
String- use =

Events
Click (e As BANanoEvent)

Methods (set… is a setter & get is a getter)

Method Name Method Signature
setClasses setClasses(s As String)
setStyles setStyles(s As String)
setAttributes setAttributes(s As String)
setObjectResize setObjectResize(s As String)
Circle Circle
isRounded isRounded
maxW maxW(s As String)
maxH maxH(s As String)
minW minW(s As String)
minH minH(s As String)
AddImage AddImage(mCallback As Object, ParentID As String, ID As String,
URL As String, Alt As String, width As String, height As String)
AssignElement AssignElement(mCallBack As Object, ID As String)
ObjectContain ObjectContain As SDUIImage
ObjectCover ObjectCover As SDUIImage
ObjectFill ObjectFill As SDUIImage
ObjectScaleDown ObjectScaleDown As SDUIImage
Enable Enable
Disable Disable
Show Show
Hide Hide
setAlt setAlt(s As String)
On On(event As String, CallBack As Object, MethodName As String)
getHere getHere As String
getName getName As String
setSrc setSrc(URL As String)
getSrc getSrc As String
setValue setValue(URL As String)
getValue getValue As String

264 / 331
 TailwindCSS WebApps using B4X

Method Name Method Signature

setW setW(s As String)
setH setH(s As String)
SrcFromFile SrcFromFile(fi As SDUIFileInput)
Rounded Rounded(s As String) As SDUIImage
RoundedFull RoundedFull As SDUIImage
hFull hFull As SDUIImage
wFull wFull As SDUIImage
shadow shadow(s As String)
RoundedBox RoundedBox

Indicator
SDUIINDICATOR
Properties
Property Type Default Value Options Description
ParentID String The ParentID of this div
Type String default default|card
Color String Color
Caption String Caption
Size String none lg|md|sm|xs|none Size
Button Color String neutral Button Color
Button Caption String Apply Button Caption
Start Boolea False Start
n
End Boolea False End
n
Top Boolea False Top
n
Bottom Boolea False Bottom
n
Center Boolea False Center
n
Middle Boolea False Middle
n
Visible Boolea True If visible.
n
Margins String a=?; x=?; y=?; t=?; Margins A-X-Y-T-B-L-R
b=?; l=?; r=?
Paddings String a=?; x=?; y=?; t=?; Paddings A-X-Y-T-B-L-R
b=?; l=?; r=?
Classes String Classes added to the
HTML tag.
Styles String Styles added to the HTML
tag. Must be a json String-
use =
Attributes String Attributes added to the
HTML tag. Must be a json
String- use =

Events

265 / 331
 TailwindCSS WebApps using B4X

Click (e As BANanoEvent)

Methods (set… is a setter & get is a getter)

Method Name Method Signature
AddIndicator AddIndicator(mCallback As Object, ParentID As String, ID As String)
AddIndicatorCard AddIndicatorCard(mCallback As Object, ParentID As String, ID As
String, xButtonColor As String, xButtonCaption As String)
AddDiv AddDiv(id As String, w As String, h As String) As SDUIDiv
On On(event As String, CallBack As Object, MethodName As String)
AssignElement AssignElement(mCallback As Object, ID As String)
setCaption setCaption(value As String)
setColor setColor(value As String)
setOutline setOutline(b As Boolean)
setVisible setVisible(b As Boolean)
getHere getHere As String
getName getName As String
Show Show
Hide Hide
Enable Enable
Disable Disable
AtStart AtStart
AtCenter AtCenter
AtEnd AtEnd
AtTop AtTop
AtMiddle AtMiddle
AtBottom AtBottom
StartResponsive StartResponsive(xs As Boolean, sm As Boolean, md As Boolean, lg
As Boolean)
CenterResponsive CenterResponsive(xs As Boolean, sm As Boolean, md As Boolean, lg
As Boolean)
EndResponsive EndResponsive(xs As Boolean, sm As Boolean, md As Boolean, lg As
Boolean)
TopResponsive TopResponsive(xs As Boolean, sm As Boolean, md As Boolean, lg As
Boolean)
MiddleResponsive MiddleResponsive(xs As Boolean, sm As Boolean, md As Boolean,
lg As Boolean)
BottomResponsive BottomResponsive(xs As Boolean, sm As Boolean, md As Boolean,
lg As Boolean)
setSize setSize(s As String)
SizeLG SizeLG
SizeSM SizeSM
SizeMD SizeMD
SizeXS SizeXS

Kbd
SDUIKBD
Properties
Property Type Default Value Options Description
ParentID String The ParentID of this div
Caption String Caption

266 / 331
 TailwindCSS WebApps using B4X

Property Type Default Value Options Description

Size String none lg|md|sm|xs|none Size
Shadow Boolea False Shadow
n
Visible Boolea True If visible.
n
Margins String a=?; x=?; y=?; t=?; Margins A-X-Y-T-B-L-R
b=?; l=?; r=?
Paddings String a=?; x=?; y=?; t=?; Paddings A-X-Y-T-B-L-R
b=?; l=?; r=?
Classes String Classes added to the
HTML tag.
Styles String Styles added to the HTML
tag. Must be a json String-
use =
Attributes String Attributes added to the
HTML tag. Must be a json
String- use =

Events
Click (e As BANanoEvent)

Methods (set… is a setter & get is a getter)

Method Name Method Signature
AddKBD AddKBD(mCallback As Object, ParentID As String, ID As String,
Label As String)
AssignElement AssignElement(mCallBack As Object, ID As String)
On On(event As String, CallBack As Object, MethodName As String)
getHere getHere As String
setCaption setCaption(l As String)
getCaption getCaption As String
getName getName As String
Show Show
Hide Hide
Enable Enable
Disable Disable
setSize setSize(s As String)
SizeLG SizeLG As SDUIKbd
SizeSM SizeSM As SDUIKbd
SizeMD SizeMD As SDUIKbd
SizeXS SizeXS As SDUIKbd
SizeLGResponsive SizeLGResponsive(xs As Boolean, sm As Boolean, md As Boolean, lg
As Boolean)
SizeMDResponsive SizeMDResponsive(xs As Boolean, sm As Boolean, md As Boolean,
lg As Boolean)
SizeSMResponsive SizeSMResponsive(xs As Boolean, sm As Boolean, md As Boolean,
lg As Boolean)
SizeXSResponsive SizeXSResponsive(xs As Boolean, sm As Boolean, md As Boolean, lg
As Boolean)
shadow shadow(s As String)

267 / 331
 TailwindCSS WebApps using B4X

Label
SDUILABEL
Properties
Property Type Default Value Options Description
ParentID String The ParentID of this div
Size String p p|nav|article|aside Size of the label
|section|div|span|
h1|h2|h3|h4|h5|h
6|header|main|li
CustomTag String Use a custom tag
Caption String The caption of the
element
HTML String RAW HTML. Overrides the
Caption property.
Lorem Ipsum Boolea False Is Lorem Ipsum
n
For String For attribute
Text Size String Text
Text Align String none none|left|center|ri Text Align
ght|justify|start|en
d
Vertical Align String none none|baseline|top| Text Align
middle|bottom|tex
t-top|text-
bottom|sub|super
Font Weight String none none|thin|extraligh Font Weight
t|light|normal|med
ium|semibold|bold
|extrabold|black
Bg Color String Background Color
Bg Color Intensity String Background Color
Intensity
Decoration String none line-through|no- Text Decoration
underline|none|ov
erline|underline
Decoration Style String none dashed|dotted|dou Decoration Style
ble|none|solid|wav
y
Decoration Color String Decoration Color
Decoration Color String Decoration Color Intensity
Intensity
Text Color String Text Color
Text Color Intensity String Text Color Intensity
Text Overflow String none none|text-clip|text- Text Overflow
ellipsis|truncate
Text Transform String none capitalize|lowercas Text Transform
e|none|normal-
case|uppercase
White Space String none none|normal|nowr White Space
ap|pre|pre-
line|pre-wrap

268 / 331
 TailwindCSS WebApps using B4X

Property Type Default Value Options Description

Word Break String none all|keep|none|nor Word Break
mal|words
Italic Boolea False Italic
n
Visible Boolea True If visible.
n
Margins String a=?; x=?; y=?; t=?; Margins A-X-Y-T-B-L-R
b=?; l=?; r=?
Paddings String a=?; x=?; y=?; t=?; Paddings A-X-Y-T-B-L-R
b=?; l=?; r=?
Classes String Classes added to the
HTML tag.
Styles String Styles added to the HTML
tag. Must be a json String-
use =
Attributes String Attributes added to the
HTML tag. Must be a json
String- use =

Events
Click (e As BANanoEvent)
MouseDown (e As BANanoEvent)
MouseEnter (e As BANanoEvent)
MouseLeave (e As BANanoEvent)
MouseMove (e As BANanoEvent)
MouseOver (e As BANanoEvent)
MouseOut (e As BANanoEvent)
MouseUp (e As BANanoEvent)

Methods (set… is a setter & get is a getter)

Method Name Method Signature
decorationStyle decorationStyle(s As String)
textDecoration textDecoration(s As String)
textOverflow textOverflow(s As String)
textTransform textTransform(s As String)
whiteSpace whiteSpace(s As String)
wordBreak wordBreak(s As String)
AddLabel AddLabel(mCallback As Object, ParentID As String, ID As String,
Size As String, sCaption As String)
AssignElement AssignElement(mCallBack As Object, ID As String)
textColor textColor(s As String) As SDUILabel
textColorIntensity textColorIntensity(s As String, i As Int) As SDUILabel
decorationColorIntensity decorationColorIntensity(s As String, i As Int) As SDUILabel
bgColor bgColor(s As String) As SDUILabel
bgColorIntensity bgColorIntensity(s As String, i As Int) As SDUILabel
LoremIpsum LoremIpsum
LoremIpsumWords LoremIpsumWords(howMany As Int)
Enable Enable
Disable Disable
Show Show

269 / 331
 TailwindCSS WebApps using B4X

Method Name Method Signature

Hide Hide
Append Append(varText As String)
Remove Remove
On On(event As String, CallBack As Object, MethodName As String)
getHere getHere As String
getName getName As String
setCaption setCaption(l As String)
setFor setFor(s As String)
Clear Clear
CellID CellID(xRow As Int, xCol As Int) As String
Row Row(xRow As Int) As SDUIDiv
Cell Cell(xRow As Int, xCol As Int) As SDUIDiv
textSize textSize(s As String) As SDUILabel
textAlign textAlign(s As String)
fontWeight fontWeight(s As String)
verticalAlign verticalAlign(s As String)

Link
SDUILINK
Properties
Property Type Default Value Options Description
ParentID String The ParentID of this div
Caption String Link Caption
Hover Boolea False Hover
n
Href String # Href
Normal Anchor Boolea False Normal Anchor
n
Target String _blank _blank|_parent|_se Target
lf|_top|none
Variant String none accent|error|info|n Variant
one|nuetral|primar
y|secondary|succes
s|warning
Text Color String Text Color
Text Color Intensity String Text Color Intensity
Visible Boolea True If visible.
n
Margins String a=?; x=?; y=?; t=?; Margins A-X-Y-T-B-L-R
b=?; l=?; r=?
Paddings String a=?; x=?; y=?; t=?; Paddings A-X-Y-T-B-L-R
b=?; l=?; r=?
Classes String Classes added to the
HTML tag.
Styles String Styles added to the HTML
tag. Must be a json String-
use =
Attributes String Attributes added to the
HTML tag. Must be a json

270 / 331
 TailwindCSS WebApps using B4X

Property Type Default Value Options Description

String- use =

Events
Click (e As BANanoEvent)

Methods (set… is a setter & get is a getter)

Method Name Method Signature
setTextColor setTextColor(s As String)
TextColorIntensity TextColorIntensity(hcolor As String, intensity As String)
AddLink AddLink(mCallback As Object, ParentID As String, ID As String,
Label As String, href As String)
AddAnchor AddAnchor(mCallback As Object, ParentID As String, ID As String,
Label As String, href As String)
AssignElement AssignElement(mCallBack As Object, ID As String)
Enable Enable
Disable Disable
Show Show
Hide Hide
getName getName As String
getHere getHere As String
On On(event As String, CallBack As Object, MethodName As String)
setCaption setCaption(l As String)
setTarget setTarget(t As String)
setHRef setHRef(l As String)
Hover Hover As SDUILink
setColor setColor(s As String)
targetBlank targetBlank As SDUILink

List
SDUILIST
Properties
Property Type Default Value Options Description
ParentID String The ParentID of this div
List Type String none decimal|disc|none List Type
Space Y String 1 Space Y
Style Position String none none|inside|outsid Style Position
e
Ordered Boolea False Ordered List
n
Text Size String Text Size
Visible Boolea True If visible.
n
Margins String a=?; x=?; y=?; t=?; Margins A-X-Y-T-B-L-R
b=?; l=?; r=?
Paddings String a=?; x=?; y=?; t=?; Paddings A-X-Y-T-B-L-R
b=?; l=?; r=?
Classes String Classes added to the
HTML tag.
Styles String Styles added to the HTML

271 / 331
 TailwindCSS WebApps using B4X

Property Type Default Value Options Description

tag. Must be a json String-
use =
Attributes String Attributes added to the
HTML tag. Must be a json
String- use =

Events
Click (e As BANanoEvent)

Methods (set… is a setter & get is a getter)

Method Name Method Signature
AddList AddList(mCallback As Object, ParentID As String, ID As String,
HasOrder As Boolean)
AssignElement AssignElement(mCallBack As Object, ID As String)
markerTextColor markerTextColor(c As String) As SDUIList
markerTextColorIntensity markerTextColorIntensity(c As String, i As String) As SDUIList
listDisc listDisc As SDUIList
listDecimal listDecimal As SDUIList
listNone listNone As SDUIList
textColor textColor(s As String) As SDUIList
textSize textSize(s As String) As SDUIList
textColorIntensity textColorIntensity(s As String, i As Int) As SDUIList
bgColor bgColor(s As String) As SDUIList
bgColorIntensity bgColorIntensity(s As String, i As Int) As SDUIList
Enable Enable
Disable Disable
Show Show
Hide Hide
Append Append(varText As String)
Remove Remove
On On(event As String, CallBack As Object, MethodName As String)
getHere getHere As String
getName getName As String
Clear Clear
CellID CellID(xRow As Int, xCol As Int) As String
Row Row(xRow As Int) As SDUIDiv
Cell Cell(xRow As Int, xCol As Int) As SDUIDiv
listType listType(s As String) As SDUIList
stylePosition stylePosition(s As String) As SDUIList
AddListItemLabel AddListItemLabel(id As String, scaption As String) As SDUILabel
AddListItemLabelAnchor AddListItemLabelAnchor(id As String, scaption As String, goto As
String) As SDUILabel
spaceY spaceY(s As String) As SDUIList
pl pl(s As String) As SDUIList

List View
SDUILISTVIEW
Properties

272 / 331
 TailwindCSS WebApps using B4X

Property Type Default Value Options Description

ParentID String The ParentID of this div
Rounded Box Boolea True Rounded Box
n
Shadow Boolea True Elevation
n
Visible Boolea True If visible.
n
Margins String a=?; x=?; y=?; t=?; Margins A-X-Y-T-B-L-R
b=?; l=?; r=?
Paddings String a=?; x=?; y=?; t=?; Paddings A-X-Y-T-B-L-R
b=?; l=?; r=?
Classes String Classes added to the
HTML tag.
Styles String Styles added to the HTML
tag. Must be a json String-
use =
Attributes String Attributes added to the
HTML tag. Must be a json
String- use =

Events
Click (item As String)

Methods (set… is a setter & get is a getter)

Method Name Method Signature
AddListView AddListView(mCallback As Object, ParentID As String, ID As String)
AssignElement AssignElement(mCallBack As Object, ID As String)
Size Size As Int
AddItem AddItem(ID As String, sImage As String, sTitle As String, sSubTitle
As String, sRightText As String)
getHere getHere As String
getName getName As String
Show Show
Hide Hide
Enable Enable
Disable Disable
Clear Clear
shadow shadow(s As String)
RoundedBox RoundedBox

Lottie Player
SDUILOTTIEPLAYER
Properties
Property Type Default Value Options Description
ParentID String The ParentID of this div
Json URL String Json File Url
Animation Speed String 1 Animation Speed
Auto Play Boolea True Auto Play
n

273 / 331
 TailwindCSS WebApps using B4X

Property Type Default Value Options Description

Controls Boolea False Show Controls
n
Direction String forward backward|forward Direction
Hover Boolea False Play Animation On Hover
n
Loop Boolea False Play In A Loop
n
Mode String normal bounce|normal Play Mode
Height String 300px Height
Width String 300px Width
Bg Color String transparent Background Color
Bg Color Intensity String Background Color
Intensity
Bordered Boolea False Bordered
n
Border Color String Border Color
Border Color String Border Color Intensity
Intensity
Visible Boolea True If visible.
n
Margins String a=?; x=?; y=?; t=?; Margins A-X-Y-T-B-L-R
b=?; l=?; r=?
Paddings String a=?; x=?; y=?; t=?; Paddings A-X-Y-T-B-L-R
b=?; l=?; r=?
Classes String Classes added to the
HTML tag.
Styles String Styles added to the HTML
tag. Must be a json String-
use =
Attributes String Attributes added to the
HTML tag. Must be a json
String- use =

Events

Methods (set… is a setter & get is a getter)

Method Name Method Signature
setBordered setBordered(b As Boolean)
BorderColorIntensity BorderColorIntensity(c As String, i As String)
AddLottiePlayer AddLottiePlayer(mCallback As Object, ParentID As String, ID As
String)
AssignElement AssignElement(mCallBack As Object, ID As String)
shadow shadow(s As String)
RoundedBox RoundedBox
BGColorIntensity BGColorIntensity(c As String, s As String)
setAnimationSpeed setAnimationSpeed(s As String)
setAutoPlay setAutoPlay(b As Boolean)
setControls setControls(b As Boolean)
setDirection setDirection(s As String)

274 / 331
 TailwindCSS WebApps using B4X

Method Name Method Signature

setHeight setHeight(s As String)
setHover setHover(b As Boolean)
setJsonUrl setJsonUrl(s As String)
setIsLoop setIsLoop(b As Boolean)
setMode setMode(s As String)
setWidth setWidth(s As String)
Enable Enable
Disable Disable
getName getName As String
getHere getHere As String
Show Show
Hide Hide

Menu
SDUIMENU
Properties
Property Type Default Value Options Description
ParentID String The ParentID of this div
Item Color String Background Color Of Items
Item Color Intensity String Item Color Intensity
Menu Compact Boolea False Menu Compact
n
Menu Normal Boolea False Menu Normal
n
Menu Vertical Boolea False Menu Vertical
n
Height String Height
Width String Width
Highlight Active Boolea False Highlight Active Item
n
Rounded Box Boolea False Rounded Box
n
Shadow Boolea False Shadow
n
Text Color String Text Color
Text Color Intensity String Text Color Intensity
Bg Color String Background Color
Bg Color Intensity String Background Color
Intensity
Visible Boolea True If visible.
n
Margins String a=?; x=?; y=?; t=?; Margins A-X-Y-T-B-L-R
b=?; l=?; r=?
Paddings String a=?; x=?; y=?; t=?; Paddings A-X-Y-T-B-L-R
b=?; l=?; r=?
Classes String Classes added to the
HTML tag.
Styles String Styles added to the HTML
tag. Must be a json String-

275 / 331
 TailwindCSS WebApps using B4X

Property Type Default Value Options Description

use =
Attributes String Attributes added to the
HTML tag. Must be a json
String- use =

Events
Click (item As String)

Methods (set… is a setter & get is a getter)

Method Name Method Signature
AddMenu AddMenu(mCallback As Object, ParentID As String, ID As String)
ItemColorIntensity ItemColorIntensity(c As String, i As String)
AssignElement AssignElement(mCallBack As Object, ID As String)
Size Size As Int
SetElement SetElement(e As BANanoElement)
SetItems SetItems(l As List)
setW setW(i As String)
AddItemBadge AddItemBadge(parentID As String, ID As String, Label As String,
sBadge As String)
AddItemChildBadge AddItemChildBadge(parentID As String, ID As String, Label As
String, sBadge As String)
ItemChildren ItemChildren(ItemID As String) As SDUIDiv
SetItemBadgeValue SetItemBadgeValue(id As String, value As string)
SetItemBadgeColor SetItemBadgeColor(id As String, value As String)
SetItemBadgeOutline SetItemBadgeOutline(id As String, bb As Boolean)
AddTitle AddTitle(ID As String, Label As String)
Link Link(btnID As String) As SDUILink
ItemBadge ItemBadge(ItemID As String) As SDUIBadge
setActive setActive(btnID As String)
DisableItem DisableItem(btnID As String)
Item Item(ItemID As String) As SDUIButton
getHere getHere As String
getName getName As String
Show Show
Hide Hide
Enable Enable
Disable Disable
Clear Clear(parentID As String)
Normal Normal
Compact Compact
Vertical Vertical
Horizontal Horizontal
HorizontalResponsive HorizontalResponsive(xs As Boolean, sm As Boolean, md As
Boolean, lg As Boolean)
VerticalResponsive VerticalResponsive(xs As Boolean, sm As Boolean, md As Boolean,
lg As Boolean)
AddItemChild AddItemChild(parentID As String, ID As String, Label As String)
AddItemParent AddItemParent(ID As String, Label As String)
AddItem AddItem(ID As String, Label As String)
AddItemDivider AddItemDivider(parentID As String, Label As String)

276 / 331
 TailwindCSS WebApps using B4X

Method Name Method Signature

AddItemIcon AddItemIcon(ID As String, IconName As String, Label As String)
AddItemIcon1 AddItemIcon1(parentID As String, ID As String, IconName As String,
Label As String)
AddItemIconOnly AddItemIconOnly(ID As String, IconName As String)
AddItemIconOnly1 AddItemIconOnly1(ParentID As String, ID As String, IconName As
String)
AddItem1 AddItem1(parentID As String, ID As String, Label As String,
HasChildren As Boolean)
RoundedBox RoundedBox
NormalResponsive NormalResponsive(xs As Boolean, sm As Boolean, md As Boolean,
lg As Boolean)
CompactResponsive CompactResponsive(xs As Boolean, sm As Boolean, md As Boolean,
lg As Boolean)
BGColorIntensity BGColorIntensity(c As String, s As String)
shadow shadow(s As String)
TextColorIntensity TextColorIntensity(hcolor As String, intensity As String)
setH setH(i As String)

Mockup Code
SDUIMOCKUPCODE
Properties
Property Type Default Value Options Description
ParentID String The ParentID of this div
Language String vb css|html|js|vb Language
Caption String Source Code Caption
Code Type String default card|default Code Type
File Name String code.bas File Name
Font Name String Font Name
Font Size String Font Size
Visible Boolea True If visible.
n
Margins String a=?; x=?; y=?; t=?; Margins A-X-Y-T-B-L-R
b=?; l=?; r=?
Paddings String a=?; x=?; y=?; t=?; Paddings A-X-Y-T-B-L-R
b=?; l=?; r=?
Classes String Classes added to the
HTML tag.
Styles String Styles added to the HTML
tag. Must be a json String-
use =
Attributes String Attributes added to the
HTML tag. Must be a json
String- use =

Events
Action (item As String)

Methods (set… is a setter & get is a getter)

277 / 331
 TailwindCSS WebApps using B4X

Method Name Method Signature

DesignerCreateView DesignerCreateView (Target As BANanoElement, Props As Map)
Initialize Initialize (CallBack As Object, cName As String, EventName As
String)
AddMockUpCode AddMockUpCode(mCallback As Object, ParentID As String, ID As
String, lang As String)
AddMockUpCodeCard AddMockUpCodeCard(mCallback As Object, ParentID As String, ID
As String, lang As String, sTitle As String)
AssignElement AssignElement(mCallBack As Object, ID As String)
AddActionButton AddActionButton(btnID As String, btnCaption As String, btnColor
As String) As SDUIButton
AddActionButtonIcon AddActionButtonIcon(btnID As String, sIcon As String, btnColor As
String) As SDUIButton
setCaption setCaption(l As String)
Enable Enable
Disable Disable
Show Show
Hide Hide
Clear Clear
AddCode AddCode(cl As String)
PasteFromClipBoard PasteFromClipBoard
CopyToClipboard CopyToClipboard(txt As String)
Refresh Refresh
RefreshRaw RefreshRaw
setValue setValue(s As String)
getValue getValue As String
Download Download(FileName As String)
On On(event As String, CallBack As Object, MethodName As String)
getHere getHere As String
getName getName As String
setFontSize setFontSize(fs As String)
setFontName setFontName(fs As String)

Mockup Phone
SDUIMOCKUPPHONE
Properties
Property Type Default Value Options Description
ParentID String The ParentID of this div
Caption String Source Code Caption
Raw Html String Html
Border Color String Border Color
Border Color String Border Color Intensity
Intensity
Visible Boolea True If visible.
n
Margins String a=?; x=?; y=?; t=?; Margins A-X-Y-T-B-L-R
b=?; l=?; r=?
Paddings String a=?; x=?; y=?; t=?; Paddings A-X-Y-T-B-L-R
b=?; l=?; r=?
Classes String Classes added to the

278 / 331
 TailwindCSS WebApps using B4X

Property Type Default Value Options Description

HTML tag.
Styles String Styles added to the HTML
tag. Must be a json String-
use =
Attributes String Attributes added to the
HTML tag. Must be a json
String- use =

Events

Methods (set… is a setter & get is a getter)

Method Name Method Signature
DesignerCreateView DesignerCreateView (Target As BANanoElement, Props As Map)
Initialize Initialize (CallBack As Object, cName As String, EventName As
String)
AddMockUpPhone AddMockUpPhone(mCallback As Object, ParentID As String, ID As
String)
getContentHere getContentHere As String
AssignElement AssignElement(mCallBack As Object, ID As String)
Enable Enable
Disable Disable
Show Show
Hide Hide
getHere getHere As String
Clear Clear
setContent setContent(l As String)
setCaption setCaption(l As String)
setHTML setHTML(l As String)
getName getName As String
CellID CellID(xRow As Int, xCol As Int) As String
Row Row(xRow As Int) As SDUIDiv
Cell Cell(xRow As Int, xCol As Int) As SDUIDiv
BorderColorIntensity BorderColorIntensity(c As String, i As String)

Mockup Window
SDUIMOCKUPWINDOW
Properties
Property Type Default Value Options Description
ParentID String The ParentID of this div
Caption String Source Code Caption
Raw Html String Html
Border Color String Border Color
Border Color String Border Color Intensity
Intensity
Width String full Width
Height String 300px Height
Visible Boolea True If visible.
n

279 / 331
 TailwindCSS WebApps using B4X

Property Type Default Value Options Description

Margins String a=?; x=?; y=?; t=?; Margins A-X-Y-T-B-L-R
b=?; l=?; r=?
Paddings String a=?; x=?; y=?; t=?; Paddings A-X-Y-T-B-L-R
b=?; l=?; r=?
Classes String Classes added to the
HTML tag.
Styles String Styles added to the HTML
tag. Must be a json String-
use =
Attributes String Attributes added to the
HTML tag. Must be a json
String- use =

Events

Methods (set… is a setter & get is a getter)

Method Name Method Signature
DesignerCreateView DesignerCreateView (Target As BANanoElement, Props As Map)
setWidth setWidth(s As String)
setHeight setHeight(s As String)
BorderColorIntensity BorderColorIntensity(c As String, i As String)
Initialize Initialize (CallBack As Object, cName As String, EventName As
String)
AddMockUpWindow AddMockUpWindow(mCallback As Object, ParentID As String, ID
As String)
AssignElement AssignElement(mCallBack As Object, ID As String)
getContentHere getContentHere As String
getHere getHere As String
getName getName As String
Show Show
Hide Hide
Enable Enable
Disable Disable
setCaption setCaption(l As String)
setHTML setHTML(l As String)
CellID CellID(xRow As Int, xCol As Int) As String
Row Row(xRow As Int) As SDUIDiv
Cell Cell(xRow As Int, xCol As Int) As SDUIDiv

Modal
SDUIMODAL
Properties
Property Type Default Value Options Description
ParentID String The ParentID of this div
Title String SithasoDaisy Title
Message (HTML) String Message (Html)
Width String 500px Width
Own Actions Boolea False Own Actions

280 / 331
 TailwindCSS WebApps using B4X

Property Type Default Value Options Description

n
Yes Caption String Yes Yes Button Caption
Yes Color String success Yes Button Color
Yes Visible Boolea True Yes Button Visible
n
No Caption String No No Button Caption
No Color String error No Button Color
No Visible Boolea True No Button Visible
n
Cancel Caption String Cancel Cancel Button Caption
Cancel Color String gray Cancel Button Color
Cancel Visible Boolea True Cancel Button Visible
n
Bottom Boolea False Moves Modal To The
n Bottom
Middle String Moves The Modal To The
Middle
Is Drawer Boolea False This Modal Is A Drawer
n
Is Open Boolea False If Open
n
Glass Boolea False Glass
n
Is Right Drawer Boolea False The Drawer Should Be On
n The Right
Min Height String Min Height
Max Height String Max Height
Min Width String Min Width
Max Width String Max Width
Visible Boolea False If visible.
n
Overlay Bg Color String Overlay Background Color
Overlay Bg Color String Overlay Background Color
Intensity Intensity
CloseAble Boolea False Show the closing button
n
Title Class String Title Classes
Content Class String Content Classes
Actions Class String Actions Classes
Margins String a=?; x=?; y=?; t=?; Margins A-X-Y-T-B-L-R
b=?; l=?; r=?
Paddings String a=?; x=?; y=?; t=?; Paddings A-X-Y-T-B-L-R
b=?; l=?; r=?
Classes String Classes added to the
HTML tag.
Styles String Styles added to the HTML
tag. Must be a json String-
use =
Attributes String Attributes added to the
HTML tag. Must be a json

281 / 331
 TailwindCSS WebApps using B4X

Property Type Default Value Options Description

String- use =

Events
Yes_Click (e As BANanoEvent)
No_Click (e As BANanoEvent)
Cancel_Click (e As BANanoEvent)

Methods (set… is a setter & get is a getter)

Method Name Method Signature
Creating Creating
Updating Updating
Reading Reading
Deleting Deleting
AddModal AddModal(mCallback As Object, ParentID As String, ID As String,
Label As String, YesLabel As String, NoLabel As String, CancelLabel
As String, xWidth As String)
OverlayBGColorIntensity OverlayBGColorIntensity(c As String, s As String)
PreventFormSubmission PreventFormSubmission
setTitleCaption setTitleCaption(s As String)
AddModalAsDrawer AddModalAsDrawer(mCallback As Object, ParentID As String, ID As
String, position As String, iwidth As String)
setFormName setFormName(s As String)
getFormID getFormID As String
AssignElement AssignElement(mCallBack As Object, ID As String)
BottomResponsive BottomResponsive(xs As Boolean, sm As Boolean, md As Boolean,
lg As Boolean)
MiddleResponsive MiddleResponsive(xs As Boolean, sm As Boolean, md As Boolean,
lg As Boolean)
setYesLoading setYesLoading(b As Boolean)
setNoLoading setNoLoading(b As Boolean)
setCancelLoading setCancelLoading(b As Boolean)
Enable Enable
Disable Disable
AddAction AddAction(itemID As String, actionCaption As String) As
SDUIButton
Show Show
Hide Hide
On On(event As String, CallBack As Object, MethodName As String)
getToggle getToggle As String
ClearActions ClearActions
setMessage setMessage(s As String)
setMessageHTML setMessageHTML(s As String)
getName getName As String
getHere getHere As String
setOpen setOpen(b As Boolean)
Bottom Bottom
Middle Middle
CellID CellID(xRow As Int, xCol As Int) As String
Row Row(xRow As Int) As SDUIDiv
Cell Cell(xRow As Int, xCol As Int) As SDUIDiv

282 / 331
 TailwindCSS WebApps using B4X

Method Name Method Signature

setmaxWidth setmaxWidth(w As String)
BuildGrid BuildGrid
ResetValidation ResetValidation
YesClickValidateEach YesClickValidateEach
YesClickValidateForm YesClickValidateForm
Validate Validate(response As Boolean)
IsValid IsValid As Boolean
setW setW(w As String)
setMaxW setMaxW(w As String)
WFull WFull
setYesVisible setYesVisible(b As Boolean)
setNoVisible setNoVisible(b As Boolean)
setCancelVisible setCancelVisible(b As Boolean)
setYesCaption setYesCaption(s As String)
setNoCaption setNoCaption(s As String)
setCancelCaption setCancelCaption(S As String)
setButtonsOutlined setButtonsOutlined(b As Boolean)
setButtonsRounded setButtonsRounded(b As Boolean)
setYesColor setYesColor(s As String)
setNoColor setNoColor(s As String)
setCancelColor setCancelColor(S As String)
Confirm Confirm(sProcess As String, xTitle As String, Message As String,
ConfirmText As String, CancelText As String)
Alert Alert(sProcess As String, xTitle As String, Message As String,
ConfirmText As String)
setOwnActions setOwnActions(b As Boolean)
setCloseAble setCloseAble(b As Boolean)
setActionClass setActionClass(s As String)
setContentClass setContentClass(s As String)
setTitleClass setTitleClass(s As String)
maxW maxW(s As String)
maxH maxH(s As String)
minW minW(s As String)
minH minH(s As String)
shadow shadow(s As String)
RoundedBox RoundedBox
TextColorIntensity TextColorIntensity(hcolor As String, intensity As String)
BGColorIntensity BGColorIntensity(c As String, s As String)
getFormHere getFormHere As String
GetData GetData As Map
SetData SetData(dataJSON As Map)
setGlass setGlass(b As Boolean)

Nav Bar
SDUINAVBAR
Properties
Property Type Default Value Options Description
ParentID String The ParentID of this div

283 / 331
 TailwindCSS WebApps using B4X

Property Type Default Value Options Description

Title String NavBar Title
Has Hamburger Boolea True Has Hamburger Button
n
Hamburger On Boolea True Show hamburger on small
Small Only n devices only
Hamburger Drawer String appdrawer The name of the
component the
hamburger toggles
Has Logo Boolea True Has Logo
n
Logo URL String ./assets/daisywom Logo URL
an3.png
Avatar Logo Boolea True Logo is Avatar
n
Avatar Size String 12 Avatar Size
Logo Shape String none none|circle|rounde Shape
d|squircle|heart|he
xagon|hexagon-
2|decagon|pentago
n|diamond|square|
parallelogram|paral
lelogram-
2|parallelogram-
3|parallelogram-
4|star|star-
2|triangle|triangle-
2|triangle-
3|triangle-4|half-
1|half-2
Logo Width String 75px Logo Width
Logo Height String 46px Logo Height
Has Spacer Boolea True Has A Spacer
n
Has Menu Button Boolea True Has a Menu Button
n
Bg Color String base Background Color
Bg Color Intensity String 100 Background Color
Intensity
Fixed Boolea False Is Fixed
n
Text Color String Text Color
Text Color Intensity String Text Color Intensity
Shadow Boolea True Elevation
n
Rounded Box Boolea False Rounded Box
n
Visible Boolea True If visible.
n
Margins String a=?; x=?; y=?; t=?; Margins A-X-Y-T-B-L-R
b=?; l=?; r=?
Paddings String a=?; x=?; y=?; t=?; Paddings A-X-Y-T-B-L-R

284 / 331
 TailwindCSS WebApps using B4X

Property Type Default Value Options Description

b=?; l=?; r=?
Classes String Classes added to the
HTML tag.
Styles String Styles added to the HTML
tag. Must be a json String-
use =
Attributes String Attributes added to the
HTML tag. Must be a json
String- use =

Events
Hamburger_Click (e As BANanoEvent)
Menu_Click (e As BANanoEvent)

Methods (set… is a setter & get is a getter)

Method Name Method Signature
AddNavBar AddNavBar(mCallback As Object, ParentID As String, ID As String)
shadow shadow(s As String)
RoundedBox RoundedBox
TextColorIntensity TextColorIntensity(hcolor As String, intensity As String)
BGColorIntensity BGColorIntensity(c As String, s As String)
AssignElement AssignElement(mCallBack As Object, ID As String)
On On(event As String, CallBack As Object, MethodName As String)
Enable Enable
setFixed setFixed(b As Boolean)
Disable Disable
Show Show
Hide Hide
getName getName As String
getHere getHere As String
getStart getStart As String
getCenter getCenter As String
getEnd getEnd As String
AddTitle AddTitle(label As String)
setTitleCaption setTitleCaption(s As String)
setLogoSrc setLogoSrc(s As String)
AddHamburgerButton AddHamburgerButton(toggle As String)
AddLogoAvatar AddLogoAvatar(url As String, lsize As String)
AddLogoImage AddLogoImage(url As String, lWidth As String, lHeight As String)
AddFlexNoneDiv AddFlexNoneDiv(num As Int) As SDUIDiv
AddMenuButton AddMenuButton
setBGColor setBGColor(s As String)
setTextColor setTextColor(s As String)
AddSpacer AddSpacer(id As String) As SDUIDiv

Options Card
SDUIOPTIONSCARD
Properties

285 / 331
 TailwindCSS WebApps using B4X

Property Type Default Value Options Description

ParentID String The ParentID of this div
Height String Height
Width String 700px Width
Rounded Box Boolea False Rounded Box
n
Shadow Boolea False Elevation
n
Visible Boolea True If visible.
n
Margins String a=?; x=?; y=?; t=?; Margins A-X-Y-T-B-L-R
b=?; l=?; r=?
Paddings String a=?; x=?; y=?; t=?; Paddings A-X-Y-T-B-L-R
b=?; l=?; r=?
Classes String Classes added to the
HTML tag.
Styles String Styles added to the HTML
tag. Must be a json String-
use =
Attributes String Attributes added to the
HTML tag. Must be a json
String- use =

Events
Change (item As String)

Methods (set… is a setter & get is a getter)

Method Name Method Signature
AddOptionsCard AddOptionsCard(mCallback As Object, ParentID As String, ID As
String)
shadow shadow(s As String)
RoundedBox RoundedBox
TextColorIntensity TextColorIntensity(hcolor As String, intensity As String)
BGColorIntensity BGColorIntensity(c As String, s As String)
AssignElement AssignElement(mCallBack As Object, ID As String)
AddItem AddItem(itemID As String, sTitle As String, sDescription As String,
sImageURL As String)
getHere getHere As String
getName getName As String
Show Show
Hide Hide
Enable Enable
Disable Disable
Clear Clear
setW setW(w As String)
setH setH(h As String)

Page
SDUIPAGE
Properties

286 / 331
 TailwindCSS WebApps using B4X

Property Type Default Value Options Description

Page Name* String page1 The unique name of the
page this should match
your module 'name'
variable
Title String My SDUIPage Title of the page
Description String My SDUIPage Description Of The Page
Keywords String page Keywords Of The Page
BackgroundImage String The background image of
the page
FullPage Boolea False w-full & h-full
n
Container Boolea True Container
n
Mx Auto Boolea True Mx-auto
n
Flex Boolea True Flex
n
Flex Col Boolea False FlexCol
n
Flex Wrap Boolea True Wrap Overflow Contents
n
Gap String Gap Between Items
Bg Color String Background Color
Bg Color Intensity String Background Color
Intensity
Width String Width
Min Width String MinW
Max Width String MaxW
W Full Boolea False WFull
n
Height String Height
Min Height String MinH
Max Height String MaxH
H Full Boolea False HFull
n
Visible Boolea True If visible.
n
Margins String a=?; x=?; y=?; t=?; Margins A-X-Y-T-B-L-R
b=?; l=?; r=?
Paddings String a=?; x=?; y=?; t=?; Paddings A-X-Y-T-B-L-R
b=?; l=?; r=?
Classes String Classes added to the
HTML tag.
Styles String Styles added to the HTML
tag. Must be a json String-
use =
Attributes String Attributes added to the
HTML tag. Must be a json
String- use =

Events

287 / 331
 TailwindCSS WebApps using B4X

Methods (set… is a setter & get is a getter)

Method Name Method Signature
setFullPage setFullPage(b As Boolean)
setDescription setDescription(v As String)
getDescription getDescription As String
getPageName getPageName As String
setKeywords setKeywords(v As String)
getKeywords getKeywords As String
setTitle setTitle(v As String)
getTitle getTitle As String
AddPage AddPage(mCallback As Object, ID As String) As SDUIPage
AssignElement AssignElement(mcallback As Object, ID As String)
CellID CellID(xRow As Int, xCol As Int) As String
Row Row(xRow As Int) As SDUIDiv
Cell Cell(xRow As Int, xCol As Int) As SDUIDiv
backGroundImage backGroundImage(url As String)
BuildGrid BuildGrid
On On(event As String, CallBack As Object, MethodName As String)
getHere getHere As String
ScrollToTop ScrollToTop

Progress
SDUIPROGRESS
Properties
Property Type Default Value Options Description
ParentID String The ParentID of this div
Type String default default|input-group
Size String none lg|md|sm|xs|none Size
Width String full Width
Caption String Progress 1 Caption
Value String 50 Value
Hint String Hint
Min Value String 0 Min Value
Max Value String 100 Max Value
Step Value String 1 Step Value
Auto Focus Boolea False Auto Focus
n
Bordered Boolea False Bordered
n
Color String primary accent|error|ghost Variant
|info|none|nuetral
|primary|secondary
|success|warning
Required Boolea False Is Required
n
Error Message String Error Message
Prefix String Prefix

288 / 331
 TailwindCSS WebApps using B4X

Property Type Default Value Options Description

Prepend Icon String Prepend Icon
Suffix String Suffix
Append Icon String Append Icon
Bg Color String Background Color
Bg Color Intensity String Background Color
Intensity
Bg Transparent Boolea False Background Transparent
n
Indeterminate Boolea False Indeterminate
n
Read Only Boolea False Read Only
n
Visible Boolea True If visible.
n
Margins String a=?; x=?; y=?; t=?; Margins A-X-Y-T-B-L-R
b=?; l=?; r=?
Paddings String a=?; x=?; y=?; t=?; Paddings A-X-Y-T-B-L-R
b=?; l=?; r=?
Classes String Classes added to the
HTML tag.
Styles String Styles added to the HTML
tag. Must be a json String-
use =
Attributes String Attributes added to the
HTML tag. Must be a json
String- use =

Events
Change (value As int)
Prepend_Click (event As BANanoEvent)
Append_Click (event As BANanoEvent)

Methods (set… is a setter & get is a getter)

Method Name Method Signature
Enable Enable
Disable Disable
AddProgress AddProgress(mCallback As Object, ParentID As String, ID As String,
iValue As Int)
AddProgressLabel AddProgressLabel(mCallback As Object, ParentID As String, sID As
String, xCaption As String, iValue As Int, xHint As String, xPrefix As
String, xSuffix As String) As SDUIProgress
setW setW(v As String)
setHideDetails setHideDetails(b As Boolean)
AssignElement AssignElement(mCallBack As Object, ID As String)
setPrependIcon setPrependIcon(picon As String)
setAppendIconBGColor setAppendIconBGColor(c As String)
setPrependIconBGColor setPrependIconBGColor(c As String)
setAppendIcon setAppendIcon(picon As String)
setValue setValue(s As String)
getValue getValue As String

289 / 331
 TailwindCSS WebApps using B4X

Method Name Method Signature

setCaption setCaption(l As String)
setHintCaption setHintCaption(l As String)
setPrefix setPrefix(l As String)
setSuffix setSuffix(l As String)
On On(event As String, CallBack As Object, MethodName As String)
getName getName As String
getHere getHere As String
setBordered setBordered(b As Boolean)
setGhost setGhost(b As Boolean)
setRequired setRequired(b As Boolean)
setReadOnly setReadOnly(b As Boolean)
setInputGroupSize setInputGroupSize(S As String)
setInputGroupVertical setInputGroupVertical(b As Boolean)
Show Show
Hide Hide
setColor setColor(s As String)
setSize setSize(s As String)
setMinValue setMinValue(i As String)
setMaxValue setMaxValue(i As String)
setStepValue setStepValue(i As String)
setAutoFocus setAutoFocus(p As Boolean)
setBGTransparent setBGTransparent(p As Boolean)
setErrorMessage setErrorMessage(p As String)
setIndeterminate setIndeterminate(b As Boolean)
SizeXLarge SizeXLarge
SizeLarge SizeLarge
SizeSmall SizeSmall
SizeMedium SizeMedium
SizeTiny SizeTiny
shadow shadow(s As String)
RoundedBox RoundedBox
TextColorIntensity TextColorIntensity(hcolor As String, intensity As String)
BGColorIntensity BGColorIntensity(c As String, s As String)

QRCode
SDUIQRCODE
Properties
Property Type Default Value Options Description
ParentID String The id of the element to
place this into
Hidden Boolea False Hidden
n
Text String SithasoDaisy Text
Size String 200 100|200|300|400| Size
500|600|700
Color Dark String #000000 Color Dark
Color Light String #ffffff Color Light
Correct Level String H H|L|M|Q Correct Level

290 / 331
 TailwindCSS WebApps using B4X

Property Type Default Value Options Description

Margins AXYTBLR String a=?; x=?; y=?; t=?; Margins A-X-Y-T-B-L-R
b=?; l=?; r=?
Paddings AXYTBLR String a=?; x=?; y=?; t=?; Paddings A-X-Y-T-B-L-R
b=?; l=?; r=?
Classes String Classes added to the
HTML tag.
Styles String Styles added to the HTML
tag. Must be a json String-
use =
Attributes String Attributes added to the
HTML tag. Must be a json
String- use =

Events

Methods (set… is a setter & get is a getter)

Method Name Method Signature
getID getID As String
getHere getHere As String
getColorDark getColorDark As String
setColorDark setColorDark(vColorDark As String)
getColorLight getColorLight As String
setColorLight setColorLight(vColorLight As String)
getCorrectLevel getCorrectLevel As String
setCorrectLevel setCorrectLevel(vCorrectLevel As String)
getText getText As String
setText setText(vText As String)
Refresh Refresh
Clear Clear
AddQRCode AddQRCode(CallBack As Object, ParentID As String, id As String) As
SDUIQRCode

RadialProgress
SDUIRADIALPROGRESS
Properties
Property Type Default Value Options Description
ParentID String The ParentID of this div
Value String 3 Value
Text Color String Text Color
Text Color Intensity String Text Color Intensity
Size String Size
Thickness String Thickness
Indeterminate Boolea False Indeterminate
n
Interval String 10 Timer Interval
Bg Color String Background Color
Bg Color Intensity String Background Color
Intensity

291 / 331
 TailwindCSS WebApps using B4X

Property Type Default Value Options Description

Border String Border Size
Border Color String Border Color
Border Color String Border Color Intensity
Intensity
Visible Boolea True If visible.
n
Margins String a=?; x=?; y=?; t=?; Margins A-X-Y-T-B-L-R
b=?; l=?; r=?
Paddings String a=?; x=?; y=?; t=?; Paddings A-X-Y-T-B-L-R
b=?; l=?; r=?
Classes String Classes added to the
HTML tag.
Styles String Styles added to the HTML
tag. Must be a json String-
use =
Attributes String Attributes added to the
HTML tag. Must be a json
String- use =

Events

Methods (set… is a setter & get is a getter)

Method Name Method Signature
AddRadialProgress AddRadialProgress(mCallback As Object, ParentID As String, ID As
String, iValue As String)
Reset Reset
Start Start
Stop Stop
AssignElement AssignElement(mCallBack As Object, ID As String)
Enable Enable
Disable Disable
Show Show
Hide Hide
setSize setSize(s As String)
setThickness setThickness(s As String)
getHere getHere As String
setValue setValue(i As String)
setIndeterminate setIndeterminate(i As String)
getName getName As String
uploadit_tick uploadit_tick
TextColorIntensity TextColorIntensity(hcolor As String, intensity As String)
BGColorIntensity BGColorIntensity(c As String, s As String)
BorderColorIntensity BorderColorIntensity(c As String, i As String)
setBorder setBorder(s As String)

RadioGroup
SDUIRADIOGROUP
Properties

292 / 331
 TailwindCSS WebApps using B4X

Property Type Default Value Options Description

ParentID String The ParentID of this div
Caption String Progress 1 Caption
Row View Boolea False Row View
n
Raw Key Values String b4a Key Values For The Items
[k
Value String b4a Value
Size String none lg|md|sm|xs|none Size
Width String full Width
Color String primary accent|error|info|n Variant
one|nuetral|primar
y|secondary|succes
s|warning
Hint String Hint
Auto Focus Boolea False Auto Focus
n
Read Only Boolea False Read Only
n
Required Boolea False Is Required
n
Rounded String Rounded
Rounded Box Boolea False Rounded Box
n
Bordered Boolea False Bordered
n
Border Color String Border Color
Border Color String Border Color Intensity
Intensity
Disabled Boolea False If Disabled
n
Error Message String Error Message
Hide Details Boolea False Hide Details
n
Visible Boolea True If visible.
n
Margins String a=?; x=?; y=?; t=?; Margins A-X-Y-T-B-L-R
b=?; l=?; r=?
Paddings String a=?; x=?; y=?; t=?; Paddings A-X-Y-T-B-L-R
b=?; l=?; r=?
Classes String Classes added to the
HTML tag.
Styles String Styles added to the HTML
tag. Must be a json String-
use =
Attributes String Attributes added to the
HTML tag. Must be a json
String- use =

Events
Change (item As String)

293 / 331
 TailwindCSS WebApps using B4X

Methods (set… is a setter & get is a getter)

Method Name Method Signature
AddRadioGroup AddRadioGroup(mCallback As Object, ParentID As String, sID As
String, xCaption As String, xHint As String, xRowView As Boolean,
xSize As String, xColor As String) As SDUIRadioGroup
setHideDetails setHideDetails(b As Boolean)
AssignElement AssignElement(mCallBack As Object, ID As String)
setW setW(v As String)
setBordered setBordered(b As Boolean)
setHintCaption setHintCaption(l As String)
SizeLG SizeLG
SizeSM SizeSM
SizeMD SizeMD
SizeXS SizeXS
setSize setSize(s As String)
setColor setColor(s As String)
SizeLGResponsive SizeLGResponsive(xs As Boolean, sm As Boolean, md As Boolean, lg
As Boolean)
SizeMDResponsive SizeMDResponsive(xs As Boolean, sm As Boolean, md As Boolean,
lg As Boolean)
SizeSMResponsive SizeSMResponsive(xs As Boolean, sm As Boolean, md As Boolean,
lg As Boolean)
SizeXSResponsive SizeXSResponsive(xs As Boolean, sm As Boolean, md As Boolean, lg
As Boolean)
Item Item(i As String) As SDUIRadio
AddItem AddItem(itemID As String, sLabel As String)
SetItemColor SetItemColor(itemx As String, color As String)
SetItems SetItems(m As Map)
SetItemsList SetItemsList(m As List)
On On(event As String, CallBack As Object, MethodName As String)
getHere getHere As String
setCaption setCaption(l As String)
getName getName As String
Show Show
Hide Hide
Enable Enable
Disable Disable
Clear Clear
getValue getValue As String
setValue setValue(s As String)
setRequired setRequired(b As Boolean)
setErrorMessage setErrorMessage(p As String)
setReadOnly setReadOnly(b As Boolean)
setBorderColor setBorderColor(s As String)
HintColorIntensity HintColorIntensity(hcolor As String, intensity As String)
IsBlank IsBlank As Boolean
shadow shadow(s As String)
setRounded setRounded(s As String)
RoundedBox RoundedBox
TextColorIntensity TextColorIntensity(hcolor As String, intensity As String)
BGColorIntensity BGColorIntensity(c As String, s As String)

294 / 331
 TailwindCSS WebApps using B4X

Method Name Method Signature

BorderColorIntensity BorderColorIntensity(c As String, i As String)

Range
SDUIRANGE
Properties
Property Type Default Value Options Description
ParentID String The ParentID of this div
Input Type String default default|input-group
Caption String Range Caption
Size String none lg|md|sm|xs|none Size
Width String full Width
Color String primary accent|error|ghost Variant
|ghost|info|none|n
uetral|primary|sec
ondary|success|wa
rning
Value String 20 Value
Hint String Hint
Min Value String 0 Min Value
Max Value String 100 Max Value
Step Value String 1 Step Value
Auto Focus Boolea False Auto Focus
n
Bordered Boolea False Bordered
n
Border Color String Border Color
Border Color String Border Color Intensity
Intensity
Disabled Boolea False If Disabled
n
Error Message String Error Message
Hide Details Boolea False Hide Details
n
Prefix String Prefix
Prepend Icon String Prepend Icon
Append Icon String Append Icon
Suffix String Suffix
Read Only Boolea False Read Only
n
Required Boolea False Is Required
n
Visible Boolea True If visible.
n
Margins String a=?; x=?; y=?; t=?; Margins A-X-Y-T-B-L-R
b=?; l=?; r=?
Paddings String a=?; x=?; y=?; t=?; Paddings A-X-Y-T-B-L-R
b=?; l=?; r=?
Classes String Classes added to the
HTML tag.

295 / 331
 TailwindCSS WebApps using B4X

Property Type Default Value Options Description

Styles String Styles added to the HTML
tag. Must be a json String-
use =
Attributes String Attributes added to the
HTML tag. Must be a json
String- use =

Events
Change (value As Int)
Prepend_Click (event As BANanoEvent)
Append_Click (event As BANanoEvent)

Methods (set… is a setter & get is a getter)

Method Name Method Signature
AddRange AddRange(mCallback As Object, ParentID As String, ID As String)
setFieldName setFieldName(s As String)
AddRangeLabel AddRangeLabel(mCallback As Object, ParentID As String, sID As
String, xCaption As String, xHint As String, xPrefix As String, xSuffix
As String) As SDUIRange
setW setW(v As String)
setHideDetails setHideDetails(b As Boolean)
AssignElement AssignElement(mCallBack As Object, ID As String)
setAutoFocus setAutoFocus(p As Boolean)
Enable Enable
Disable Disable
On On(event As String, CallBack As Object, MethodName As String)
getName getName As String
getHere getHere As String
Show Show
Hide Hide
setMinValue setMinValue(i As String)
setMaxValue setMaxValue(i As String)
setValue setValue(s As Int)
getValue getValue As Int
setStepValue setStepValue(i As String)
setColor setColor(s As String)
setSize setSize(s As String)
setReadOnly setReadOnly(b As Boolean)
setPrependIcon setPrependIcon(picon As String)
setAppendIconBGColor setAppendIconBGColor(c As String)
setPrependIconBGColor setPrependIconBGColor(c As String)
setAppendIcon setAppendIcon(picon As String)
setCaption setCaption(l As String)
setHintCaption setHintCaption(l As String)
setPrefix setPrefix(l As String)
setSuffix setSuffix(l As String)
setBordered setBordered(b As Boolean)
setGhost setGhost(b As Boolean)
setInputGroupVertical setInputGroupVertical(b As Boolean)
SizeLG SizeLG

296 / 331
 TailwindCSS WebApps using B4X

Method Name Method Signature

SizeSM SizeSM
SizeMD SizeMD
SizeXS SizeXS
SizeLGResponsive SizeLGResponsive(xs As Boolean, sm As Boolean, md As Boolean, lg
As Boolean)
SizeMDResponsive SizeMDResponsive(xs As Boolean, sm As Boolean, md As Boolean,
lg As Boolean)
SizeSMResponsive SizeSMResponsive(xs As Boolean, sm As Boolean, md As Boolean,
lg As Boolean)
SizeXSResponsive SizeXSResponsive(xs As Boolean, sm As Boolean, md As Boolean, lg
As Boolean)
BorderColorIntensity BorderColorIntensity(c As String, i As String)
shadow shadow(s As String)
RoundedBox RoundedBox
TextColorIntensity TextColorIntensity(hcolor As String, intensity As String)
BGColorIntensity BGColorIntensity(c As String, s As String)
setRequired setRequired(b As Boolean)
setErrorMessage setErrorMessage(p As String)
IsBlank IsBlank As Boolean
HintColorIntensity HintColorIntensity(hcolor As String, intensity As String)

Rating
SDUIRATING
Properties
Property Type Default Value Options Description
ParentID String The ParentID of this div
Input Type String default default|input-group
Caption String Rating Caption
Length String 5 Number Of Stars
Value String 3 Value
Mask String star-2 squircle|heart|hexa Mask
gon|hexagon-
2|decagon|pentago
n|diamond|square|
circle|parallelogram
|parallelogram-
2|parallelogram-
3|parallelogram-
4|star|star-
2|triangle|triangle-
2|triangle-
3|triangle-4|half-
1|half-2
Size String none lg|md|sm|xs|none Size
Width String full Width
Auto Focus Boolea False Auto Focus
n
Bg Color String orange Background Color
Bg Color Intensity String 600 Background Color

297 / 331
 TailwindCSS WebApps using B4X

Property Type Default Value Options Description

Intensity
Prefix String Prefix
Prepend Icon String Prepend Icon
Append Icon String Append Icon
Suffix String Suffix
Bordered Boolea False Bordered
n
Border Color String Border Color
Border Color String Border Color Intensity
Intensity
Disabled Boolea False If Disabled
n
Error Message String Error Message
Hide Details Boolea False Hide Details
n
Hint String Hint
Read Only Boolea False Read Only
n
Required Boolea False Is Required
n
Visible Boolea True If visible.
n
Margins String a=?; x=?; y=?; t=?; Margins A-X-Y-T-B-L-R
b=?; l=?; r=?
Paddings String a=?; x=?; y=?; t=?; Paddings A-X-Y-T-B-L-R
b=?; l=?; r=?
Classes String Classes added to the
HTML tag.
Styles String Styles added to the HTML
tag. Must be a json String-
use =
Attributes String Attributes added to the
HTML tag. Must be a json
String- use =

Events
Change (value As Double)

Methods (set… is a setter & get is a getter)

Method Name Method Signature
AddRating AddRating(mCallback As Object, ParentID As String, ID As String,
rSize As Int)
AssignElement AssignElement(mCallBack As Object, ID As String)
AddRatingLabel AddRatingLabel(mCallback As Object, ParentID As String, sID As
String, xCaption As String, xHint As String, xSize As String) As
SDUIRating
setW setW(v As String)
setCaption setCaption(l As String)
setHideDetails setHideDetails(b As Boolean)
setBordered setBordered(b As Boolean)

298 / 331
 TailwindCSS WebApps using B4X

Method Name Method Signature

setHintCaption setHintCaption(l As String)
setAutoFocus setAutoFocus(p As Boolean)
BGColorIntensity BGColorIntensity(color As String, intensity As String)
ItemBGColorIntensity ItemBGColorIntensity(pos As Int, color As String, intensity As Int)
Item Item(i As Int) As SDUIRadio
Enable Enable
Disable Disable
Show Show
Hide Hide
setMask setMask(xmask As String)
setValue setValue(ivalue As Int)
getValue getValue As Int
On On(event As String, CallBack As Object, MethodName As String)
getName getName As String
getHere getHere As String
setHalf setHalf(b As Boolean)
ItemHidden ItemHidden(pos As Int, b As Boolean)
setPrependIcon setPrependIcon(picon As String)
setAppendIconBGColor setAppendIconBGColor(c As String)
setPrependIconBGColor setPrependIconBGColor(c As String)
setAppendIcon setAppendIcon(picon As String)
setRequired setRequired(b As Boolean)
setReadOnly setReadOnly(b As Boolean)
SizeLG SizeLG
SizeSM SizeSM
SizeMD SizeMD
SizeXS SizeXS
setSize setSize(s As String)
SizeLGResponsive SizeLGResponsive(xs As Boolean, sm As Boolean, md As Boolean, lg
As Boolean)
SizeMDResponsive SizeMDResponsive(xs As Boolean, sm As Boolean, md As Boolean,
lg As Boolean)
SizeSMResponsive SizeSMResponsive(xs As Boolean, sm As Boolean, md As Boolean,
lg As Boolean)
SizeXSResponsive SizeXSResponsive(xs As Boolean, sm As Boolean, md As Boolean, lg
As Boolean)
BorderColorIntensity BorderColorIntensity(c As String, i As String)
setErrorMessage setErrorMessage(p As String)
setPrefix setPrefix(l As String)
setSuffix setSuffix(l As String)
IsBlank IsBlank As Boolean
HintColorIntensity HintColorIntensity(hcolor As String, intensity As String)

Row
SDUIROW
Properties
Property Type Default Value Options Description
ParentID String The ParentID of this div

299 / 331
 TailwindCSS WebApps using B4X

Property Type Default Value Options Description

Absolute Boolea False Absolute
n
Align Content String none around|baseline|be Align Content
tween|center|end|
evenly|none|start
Align Items String none baseline|center|en Align Items
d|none|start|stretc
h
Background Image String Background Image
Bg Color String Background Color
Bg Color Intensity String Background Color
Intensity
Border String Border Size
Border Color String Border Color
Border Color String Border Color Intensity
Intensity
Columns String Number Of Columns
Within An Element
Gap String Gap
Height String Height
Hover String Classes To Apply On Hover
Place Content String none around|baseline|be How Content Is Justified
tween|center|end| And Aligned At The Same
evenly|none|start| Time
stretch
Place Items String none baseline|center|en Place Items
d|none|start|stretc
h
Relative Boolea False Relative
n
Rounded String Rounded
Shadow String Shadow
Text Color String Text Color
Text Color Intensity String Text Color Intensity
Width String Width
Visible Boolea True If visible.
n
Margins String a=?; x=?; y=?; t=?; Margins A-X-Y-T-B-L-R
b=?; l=?; r=?
Paddings String a=?; x=?; y=?; t=?; Paddings A-X-Y-T-B-L-R
b=?; l=?; r=?
Classes String Classes added to the
HTML tag.
Styles String Styles added to the HTML
tag. Must be a json String-
use =
Attributes String Attributes added to the
HTML tag. Must be a json
String- use =

Events

300 / 331
 TailwindCSS WebApps using B4X

Click (e As BANanoEvent)

Methods (set… is a setter & get is a getter)

Method Name Method Signature
DesignerCreateView DesignerCreateView (Target As BANanoElement, Props As Map)
Initialize Initialize (CallBack As Object, cName As String, EventName As
String)
AssignElement AssignElement(mCallBack As Object, ID As String)
shadow shadow(s As String)
RoundedBox RoundedBox
TextColorIntensity TextColorIntensity(hcolor As String, intensity As String)
BGColorIntensity BGColorIntensity(c As String, s As String)
alignContent alignContent(s As String) As SDUIRow
alignItems alignItems(s As String) As SDUIRow
setBackgroundImage setBackgroundImage(s As String)
bgColor bgColor(s As String) As SDUIRow
border border(s As String) As SDUIRow
borderColor borderColor(s As String) As SDUIRow
borderColorIntensity borderColorIntensity(c As String, i As String) As SDUIRow
columns columns(s As String) As SDUIRow
setGap setGap(s As String)
height height(s As String) As SDUIRow
hover hover(s As String) As SDUIRow
placeContent placeContent(s As String) As SDUIRow
placeItems placeItems(s As String) As SDUIRow
rounded rounded(s As String) As SDUIRow
textColor textColor(s As String) As SDUIRow
width width(s As String) As SDUIRow
Enable Enable
Disable Disable
getName getName As String
getHere getHere As String
Show Show
Hide Hide
absolute absolute As SDUIRow
relative relative As SDUIRow

Select
SDUISELECT
Properties
Property Type Default Value Options Description
ParentID String The ParentID of this div
Select Type String default default|input-group
Size String none lg|md|sm|xs|none Size
Width String full Width
Caption String Progress 1 Caption
Value String b4a Value
Place Holder String Placeholder
Raw Key Values String b4a Key Values For The Items
[k

301 / 331
 TailwindCSS WebApps using B4X

Property Type Default Value Options Description

Prefix String Prefix
Prepend Icon String Prepend Icon
Suffix String Suffix
Append Icon String Append Icon
Auto Focus Boolea False Auto Focus
n
Bg Color String Background Color
Bg Color Intensity String Background Color
Intensity
Bordered Boolea True Bordered
n
Color String primary accent|error|ghost Variant
|info|none|nuetral
|primary|secondary
|success|warning
Error Message String Error Message
Hide Details Boolea False Hide Details
n
Hint String Hint
Mutliple Boolea False Multiple
n
Read Only Boolea False Read Only
n
Required Boolea False Is Required
n
Visible Boolea True If visible.
n
Margins String a=?; x=?; y=?; t=?; Margins A-X-Y-T-B-L-R
b=?; l=?; r=?
Paddings String a=?; x=?; y=?; t=?; Paddings A-X-Y-T-B-L-R
b=?; l=?; r=?
Classes String Classes added to the
HTML tag.
Styles String Styles added to the HTML
tag. Must be a json String-
use =
Attributes String Attributes added to the
HTML tag. Must be a json
String- use =

Events
Focus (event As BANanoEvent)
Blur (event As BANanoEvent)
Change (item As String)
Prepend_Click (event As BANanoEvent)
Append_Click (event As BANanoEvent)

Methods (set… is a setter & get is a getter)

Method Name Method Signature
Enable Enable
Disable Disable

302 / 331
 TailwindCSS WebApps using B4X

Method Name Method Signature

AddSelectNormal AddSelectNormal(mCallback As Object, ParentID As String, sID As
String, bxMultiple As Boolean) As SDUISelect
setFieldName setFieldName(s As String)
AddSelect AddSelect(mCallback As Object, ParentID As String, sID As String,
xCaption As String, xHint As String, xPrefix As String, xSuffix As
String) As SDUISelect
setHideDetails setHideDetails(b As Boolean)
setW setW(v As String)
AssignElement AssignElement(mCallBack As Object, ID As String)
SetItems SetItems(m As Map)
SetItemsList SetItemsList(m As List)
setPrependIcon setPrependIcon(picon As String)
setAppendIconBGColor setAppendIconBGColor(c As String)
setPrependIconBGColor setPrependIconBGColor(c As String)
setAppendIcon setAppendIcon(picon As String)
setValue setValue(s As String)
getValue getValue As String
setCaption setCaption(l As String)
setHintCaption setHintCaption(l As String)
setPrefix setPrefix(l As String)
setSuffix setSuffix(l As String)
On On(event As String, CallBack As Object, MethodName As String)
getName getName As String
getHere getHere As String
setBordered setBordered(b As Boolean)
setGhost setGhost(b As Boolean)
setPlaceholder setPlaceholder(s As String)
getDisabled getDisabled As Boolean
setInputGroupSize setInputGroupSize(S As String)
setInputGroupVertical setInputGroupVertical(b As Boolean)
Show Show
Hide Hide
setColor setColor(s As String)
setSize setSize(s As String)
Clear Clear
AddItem AddItem(itemID As String, sLabel As String)
setReadOnly setReadOnly(b As Boolean)
setRequired setRequired(b As Boolean)
setErrorMessage setErrorMessage(p As String)
HintColorIntensity HintColorIntensity(hcolor As String, intensity As String)
IsBlank IsBlank As Boolean
SizeLG SizeLG
SizeSM SizeSM
SizeMD SizeMD
SizeXS SizeXS
SizeLGResponsive SizeLGResponsive(xs As Boolean, sm As Boolean, md As Boolean, lg
As Boolean)
SizeMDResponsive SizeMDResponsive(xs As Boolean, sm As Boolean, md As Boolean,
lg As Boolean)
SizeSMResponsive SizeSMResponsive(xs As Boolean, sm As Boolean, md As Boolean,

303 / 331
 TailwindCSS WebApps using B4X

Method Name Method Signature

lg As Boolean)
SizeXSResponsive SizeXSResponsive(xs As Boolean, sm As Boolean, md As Boolean, lg
As Boolean)
roundedFull roundedFull As SDUISelect
wFull wFull As SDUISelect
Multiple Multiple(sName As String)
shadow shadow(s As String)
RoundedBox RoundedBox
TextColorIntensity TextColorIntensity(hcolor As String, intensity As String)
BGColorIntensity BGColorIntensity(c As String, s As String)
setAutoFocus setAutoFocus(p As Boolean)

SignaturePad
SDUISIGNATUREPAD
Properties
Property Type Default Value Options Description
ParentID String The id of the element to
place this into
Background Color String white amber|black|blue| Background Color
blue-
grey|brown|cyan|d
eep-orange|deep-
purple|green|grey|
indigo|light-
blue|light-
green|lime|orange
|pink|purple|red|t
eal|transparent|wh
ite|yellow|primary|
secondary|accent|e
rror|info|success|
warning|none
Dot Size String 0 Dot Size
Height String 200 Height
Width String 400 Width
Image Type String jpeg jpeg|png|svg Save As Image Type
Max Width String 2.5 Max Width
Min Distance Int 5 Min Distance
Min Width String 0.5 Min Width
Pen Color String black amber|black|blue| Pen Color
blue-
grey|brown|cyan|d
eep-orange|deep-
purple|green|grey|
indigo|light-
blue|light-
green|lime|orange
|pink|purple|red|t
eal|transparent|wh

304 / 331
 TailwindCSS WebApps using B4X

Property Type Default Value Options Description

ite|yellow|primary|
secondary|accent|e
rror|info|success|
warning|none
Throttle Int 16 Throttle
Velocity Filter String 0.7 Velocity Filter Weight
Weight
BorderPosition String all bottom|left|none|r Border
ight|top|all
BorderColor String black accent|amber|blac
k|blue|blue-
grey|brown|cyan|d
eep-orange|deep-
purple|error|green
|grey|indigo|info|li
ght-blue|light-
green|lime|none|o
range|pink|primary
|purple|red|secon
dary|success|teal|t
ransparent|warning
|white|yellow
Border Radius String 5px
Border Style String solid dashed|dotted|dou
ble|groove|hidden|
inherit|initial|inset
|none|outset|remo
ve|ridge|solid
Border Width String 1px Border Width
Visible Boolea True If visible.
n
Margins AXYTBLR String a=?; x=?; y=?; t=?; Margins A-X-Y-T-B-L-R
b=?; l=?; r=?
Paddings AXYTBLR String a=?; x=?; y=?; t=?; Paddings A-X-Y-T-B-L-R
b=?; l=?; r=?
Classes String Classes added to the
HTML tag.
Styles String Styles added to the HTML
tag. Must be a json String
Attributes String Attributes added to the
HTML tag. Must be a json
String

Events
Event Signature
afterUpdateStroke (e As BANanoEvent)beforeUpdateStroke (e As BANanoEvent)beginStroke (e As
BANanoEvent)endStroke (e As BANanoEvent)

Methods (set… is a setter & get is a getter)

Method Name Method Signature
Class_Globals Class_Globals

305 / 331
 TailwindCSS WebApps using B4X

Method Name Method Signature

Initialize Initialize (CallBack As Object, Name As String, EventName As
String)
Enable Enable
Disable Disable
Show Show
Hide Hide
Defaults Defaults
getID getID As String
getHere getHere As String
setBackgroundColor setBackgroundColor(v As String)
setDotSize setDotSize(v As Double)
setHeight setHeight(v As String)
setImageType setImageType(v As String)
setMaxWidth setMaxWidth(v As Double)
setMinDistance setMinDistance(v As Int)
setMinWidth setMinWidth(v As Double)
setPenColor setPenColor(v As String)
setThrottle setThrottle(v As Int)
setVelocityFilterWeight setVelocityFilterWeight(v As Double)
setWidth setWidth(v As String)
Refresh Refresh
clear clear
download download
fromData fromData(data As Object)
fromDataURL fromDataURL(dataURL As String)
draw draw
erase erase
toData toData As Object
undo undo
toDataURL toDataURL As String
isEmpty isEmpty As Boolean
off off
on on
DesignerCreateView DesignerCreateView (Target As BANanoElement, Props As Map)
AssignElement AssignElement(Module As Object, ID As String)
shadow shadow(s As String)
RoundedBox RoundedBox
AddToParent AddToParent(targetID As String, props As Map)

Stats
SDUISTATS
Properties
Property Type Default Value Options Description
ParentID String The ParentID of this div
Alignment String none horizontal|none|ve Alignment
rtical
Vertical On Small Boolea False Vertical On Small Only
Only n

306 / 331
 TailwindCSS WebApps using B4X

Property Type Default Value Options Description

Shadow Boolea True Shadow
n
Bg Color String Background Color
Bg Color Intensity String Background Color
Intensity
Text Color String Text Color
Text Color Intensity String Text Color Intensity
Visible Boolea True If visible.
n
Margins String a=?; x=?; y=?; t=?; Margins A-X-Y-T-B-L-R
b=?; l=?; r=?
Paddings String a=?; x=?; y=?; t=?; Paddings A-X-Y-T-B-L-R
b=?; l=?; r=?
Classes String Classes added to the
HTML tag.
Styles String Styles added to the HTML
tag. Must be a json String-
use =
Attributes String Attributes added to the
HTML tag. Must be a json
String- use =

Events

Methods (set… is a setter & get is a getter)

Method Name Method Signature
AddStats AddStats(mCallback As Object, ParentID As String, ID As String)
AddInfoCard AddInfoCard(mCallback As Object, ParentID As String, ID As String,
Icon As String, IconColor As String, Value As String, Description As
String)
AssignElement AssignElement(mCallBack As Object, ID As String)
Clear Clear
AddItem AddItem(itemID As String, sItemTitle As String, sItemValue As
String, sItemDesc As String)
SetItemTitle SetItemTitle(itemID As String, s As String)
SetItemValue SetItemValue(itemID As String, s As String)
SetItemDescription SetItemDescription(itemID As String, s As String)
AddItem1 AddItem1(itemID As String, sItemTitle As String, sItemValue As
String, sItemDesc As String)
AddItemActionButton AddItemActionButton(itemID As String, actionKey As String,
actionCaption As String)
AddItemActionButtonIcon AddItemActionButtonIcon(itemID As String, btnID As String, sIcon
As String)
ItemAction ItemAction(itemID As String, actionKey As String) As SDUIButton
ItemAvatar ItemAvatar(itemID As String) As SDUIAvatar
ItemIcon ItemIcon(itemID As String) As SDUIIcon
Item Item(itemID As String) As SDUIDiv
ItemFigure ItemFigure(itemID As String) As SDUIDiv
ItemTitle ItemTitle(itemID As String) As SDUIDiv

307 / 331
 TailwindCSS WebApps using B4X

Method Name Method Signature

ItemValue ItemValue(itemID As String) As SDUIDiv
ItemDesc ItemDesc(itemID As String) As SDUIDiv
ItemActions ItemActions(itemID As String) As SDUIDiv
On On(event As String, CallBack As Object, MethodName As String)
getHere getHere As String
getName getName As String
Show Show
Hide Hide
Enable Enable
Disable Disable
Horizontal Horizontal
Vertical Vertical
HorizontalResponsive HorizontalResponsive(xs As Boolean, sm As Boolean, md As
Boolean, lg As Boolean)
VerticalResponsive VerticalResponsive(xs As Boolean, sm As Boolean, md As Boolean,
lg As Boolean)
VerticalOnSmallOnly VerticalOnSmallOnly
BGColorIntensity BGColorIntensity(c As String, s As String)
shadow shadow(s As String)
TextColorIntensity TextColorIntensity(hcolor As String, intensity As String)

Steps
SDUISTEPS
Properties
Property Type Default Value Options Description
ReadMe Children String [name]_1_content The id of each panel
ParentID String The ParentID of this div
Step Type String horizontal horizontal|vertical Step Type
Color String primary accent|error|info|n Variant
one|primary|secon
dary|success|warni
ng
Raw Items String Item 1;Item 2;Item Items (;)
3
Full Width Boolea True WFull
n
Visible Boolea True If visible.
n
Margins String a=?; x=?; y=?; t=?; Margins A-X-Y-T-B-L-R
b=?; l=?; r=?
Paddings String a=?; x=?; y=?; t=?; Paddings A-X-Y-T-B-L-R
b=?; l=?; r=?
Classes String Classes added to the
HTML tag.
Styles String Styles added to the HTML
tag. Must be a json String-
use =
Attributes String Attributes added to the
HTML tag. Must be a json

308 / 331
 TailwindCSS WebApps using B4X

Property Type Default Value Options Description

String- use =

Events
Change (pos As Int)

Methods (set… is a setter & get is a getter)

Method Name Method Signature
AddSteps AddSteps(mCallback As Object, ParentID As String, ID As String,
Color As String)
WFull WFull
AssignElement AssignElement(mCallBack As Object, ID As String)
Size Size As Int
SetItems SetItems(l As List)
Clear Clear
AddItems AddItems(ItemsToAdd As List)
setActive setActive(pos As Int)
Item Item(pos As Int) As SDUIStep
SetItemContent SetItemContent(pos As Int, value As String)
SetItemCaption SetItemCaption(pos As Int, value As String)
Panel Panel(pos As Int) As SDUIDiv
On On(event As String, CallBack As Object, MethodName As String)
getHere getHere As String
getName getName As String
Show Show
Hide Hide
Enable Enable
Disable Disable
Vertical Vertical
Horizontal Horizontal
SetItemColor SetItemColor(pos As Int, value As String)

Swap
SDUISWAP
Properties
Property Type Default Value Options Description
ParentID String The ParentID of this div
Type String text icon|text Swap Type
Off Value String OFF Off Value
On Value String ON On Value
Size String 2xl Size
Effect String rotate flip|rotate Effect
Bg Color String Background Color
Bg Color Intensity String Background Color
Intensity
Visible Boolea True If visible.
n
Margins String a=?; x=?; y=?; t=?; Margins A-X-Y-T-B-L-R
b=?; l=?; r=?
Paddings String a=?; x=?; y=?; t=?; Paddings A-X-Y-T-B-L-R

309 / 331
 TailwindCSS WebApps using B4X

Property Type Default Value Options Description

b=?; l=?; r=?
Classes String Classes added to the
HTML tag.
Styles String Styles added to the HTML
tag. Must be a json String-
use =
Attributes String Attributes added to the
HTML tag. Must be a json
String- use =

Events
On_Click (e As BANanoEvent)
Off_Click (e As BANanoEvent)

Methods (set… is a setter & get is a getter)

Method Name Method Signature
AddSwap AddSwap(mCallback As Object, ParentID As String, ID As String,
xOnLabel As String, xOffLabel As String)
setFieldName setFieldName(s As String)
AssignElement AssignElement(mCallBack As Object, ID As String)
setAutoFocus setAutoFocus(p As Boolean)
Enable Enable
Disable Disable
AddSwapIcon AddSwapIcon(mCallback As Object, ParentID As String, ID As String,
xSize As Int, xOnIcon As String, xOffIcon As String)
getOnID getOnID As String
getOffID getOffID As String
getName getName As String
getHere getHere As String
Active Active
Rotate Rotate
Flip Flip
Show Show
Hide Hide
setBGColor setBGColor(s As String)
bgColorIntensity bgColorIntensity(color As String, intensity As String)

Table
SDUITABLE
Properties
Property Type Default Value Options Description
ParentID String The ParentID of this div
Table Type String card card|default|prope Table Type
rty
Title String Title
Pagination Boolea True Pagination
n
Items Per Page String 5 Items Per Page
Is Compact Boolea False Is Compact

310 / 331
 TailwindCSS WebApps using B4X

Property Type Default Value Options Description

n
Is Normal Boolea False Is Normal
n
Is Zebra Boolea False Is Zebra
n
Badges Outlined Boolea False Badges Outlined
n
Badges Size String md lg|md|sm|xs Badges Size
Button Size String md lg|md|sm|xs Button Size
Component Size String sm lg|md|sm|xs Button Size
Buttons Outlined Boolea False Buttons Outlined
n
Hover Boolea False Hover
n
Select All Boolea False Select All
n
Has Search Boolea False Has Search
n
Has Addnew Boolea True Has Addnew
n
Has Refresh Boolea True Has Refresh
n
Has Delete All Boolea False Has Delete All
n
Has Back Boolea True Has Back
n
Has Edit Boolea False Has Edit
n
Has Clone Boolea False Has Clone
n
Has Delete Boolea False Has Delete
n
Has Upload Boolea False Has Upload
n
Has Download Boolea False Has Download
n
Has Menu Boolea False Has Menu
n
Visible Boolea True If visible.
n
Margins String a=?; x=?; y=?; t=?; Margins A-X-Y-T-B-L-R
b=?; l=?; r=?
Paddings String a=?; x=?; y=?; t=?; Paddings A-X-Y-T-B-L-R
b=?; l=?; r=?
Classes String Classes added to the
HTML tag.
Styles String Styles added to the HTML
tag. Must be a json String-
use =
Attributes String Attributes added to the
HTML tag. Must be a json

311 / 331
 TailwindCSS WebApps using B4X

Property Type Default Value Options Description

String- use =

Events
Event Signature
CustomColumn (item As Map)
SelectAll (Checked As Boolean)
Edit (item As Map)
Clone (item As Map)
Menu (item As Map)
Download (item As Map)
Upload (item As Map)
Delete (item As Map)
Change (Value As Object, Column As String, item As Map)
Add (e As BANanoEvent)
Refresh (e As BANanoEvent)
Back (e As BANanoEvent)
DeleteAll (e As BANanoEvent)
PrevPage (e As BANanoEvent)
NextPage (e As BANanoEvent)
ChangeProperties (item As Map)

Methods (set… is a setter & get is a getter)

Method Name Method Signature
DesignerCreateView DesignerCreateView (Target As BANanoElement, Props As Map)
AddDesignerColums AddDesignerColums
Initialize Initialize (CallBack As Object, cName As String, EventName As
String)
AddTable AddTable(mCallback As Object, ParentID As String, ID As String)
AddTableCard AddTableCard(mCallback As Object, ParentID As String, ID As
String)
AddPropertyTable AddPropertyTable(mCallback As Object, ParentID As String, ID As
String)
AddPropertyActionButton AddPropertyActionButton(btnID As String, btnCaption As String,
btnColor As String) As SDUIButton
AddPropertyActionButtonIcon AddPropertyActionButtonIcon(btnID As String, sIcon As String,
btnColor As String) As SDUIButton
AddToolbarActionButton AddToolbarActionButton(btnID As String, btnCaption As String,
btnColor As String) As SDUIButton
AddToolbarActionButtonIcon AddToolbarActionButtonIcon(btnID As String, sIcon As String,
btnColor As String) As SDUIButton
setHasAddNew setHasAddNew(b As Boolean)
setHasDeleteAll setHasDeleteAll(b As Boolean)
setHasBack setHasBack(b As Boolean)
setHasRefresh setHasRefresh(b As Boolean)
setRefreshLoading setRefreshLoading(b As Boolean)
setRefreshDisabled setRefreshDisabled(b As Boolean)
setPrevPageDisabled setPrevPageDisabled(b As Boolean)
setNextPageDisabled setNextPageDisabled(b As Boolean)
ToolbarButtonDisabled ToolbarButtonDisabled(btn As String, b As Boolean)
ToolbarButtonLoading ToolbarButtonLoading(btn As String, b As Boolean)
setAddDisabled setAddDisabled(b As Boolean)

312 / 331
 TailwindCSS WebApps using B4X

Method Name Method Signature

setAddLoading setAddLoading(b As Boolean)
setDeleteAllLoading setDeleteAllLoading(b As Boolean)
setDeleteAllDisabled setDeleteAllDisabled(b As Boolean)
setToolbarActions setToolbarActions(b As Boolean)
ClearToolbarActions ClearToolbarActions
setItemsPerPage setItemsPerPage(i As Int)
setTitle setTitle(t As String)
setSearch setSearch(b As Boolean)
setPagination setPagination(b As Boolean)
AssignElement AssignElement(mCallBack As Object, ID As String)
ClearHeadings ClearHeadings
ClearRows ClearRows
ClearPropertyBag ClearPropertyBag
AddColumnSelecAll AddColumnSelecAll
RightAlignColumns RightAlignColumns(colNames As List)
CenterAlignColumns CenterAlignColumns(colNames As List)
AddColumn AddColumn(name As String, title As String)
AddColumnAction AddColumnAction(name As String, title As String, icon As String,
color As String)
SetColumnMinMaxWidth SetColumnMinMaxWidth(colName As String, minwidth As String,
maxwidth As String)
SetColumnWrapText SetColumnWrapText(cols As List)
AddColumnClass AddColumnClass(colName As String, classes As List)
AddColumnLink AddColumnLink(name As String, title As String, subtitle As String,
color As String)
AddColumnClickLink AddColumnClickLink(name As String, title As String, subtitle As
String, color As String)
AddColumnEmail AddColumnEmail(name As String, title As String, subtitle As String,
color As String)
AddColumnIcon AddColumnIcon(name As String, title As String, size As String, color
As String)
AddColumnButton AddColumnButton(name As String, title As String, color As String)
AddColumnBadge AddColumnBadge(name As String, title As String, color As String)
AddColumnRating AddColumnRating(name As String, title As String, size As Int, color
As String)
AddColumnRadialProgress AddColumnRadialProgress(name As String, title As String, size As
String, color As String, suffix As String)
AddColumnProgress AddColumnProgress(name As String, title As String, width As Int,
maxvalue As Int, color As String)
AddColumnRange AddColumnRange(name As String, title As String, maxvalue As Int,
color As String)
AddColumnCheckBox AddColumnCheckBox(name As String, title As String, color As
String, readOnly As Boolean)
AddColumnToggle AddColumnToggle(name As String, title As String, color As String,
readOnly As Boolean)
AddColumnEdit AddColumnEdit(color As String)
AddColumnClone AddColumnClone(color As String)
AddColumnMenu AddColumnMenu(color As String)
AddColumnDownload AddColumnDownload(color As String)
AddColumnUpload AddColumnUpload(color As String)

313 / 331
 TailwindCSS WebApps using B4X

Method Name Method Signature

AddColumnDelete AddColumnDelete(color As String)
AddColumnColor AddColumnColor(name As String, title As String, subtitle As String)
AddColumnAvatar AddColumnAvatar(name As String, title As String, size As String,
mask As String)
AddColumnImage AddColumnImage(name As String, title As String, width As Int,
height As Int, mask As String)
AddColumnAvatarTitle AddColumnAvatarTitle(name As String, title As String, size As
String, subtitle As String, mask As String)
AddColumnAvatarTitleSubTitle AddColumnAvatarTitleSubTitle(name As String, title As String, size
As String, subtitle As String, subtitle1 As String, mask As String)
AddColumnTitleSubTitle AddColumnTitleSubTitle(name As String, title As String, subtitle As
String)
SetItemsPaginate SetItemsPaginate(xItems As List)
ShowPreviousPage ShowPreviousPage
ShowNextPage ShowNextPage
getCurrentPage getCurrentPage As Int
ShowPage ShowPage(pgNumber As Int)
SetItems SetItems(xitems As List)
AddRow AddRow(rowdata As Map)
On On(event As String, CallBack As Object, MethodName As String)
getHere getHere As String
getName getName As String
Show Show
Hide Hide
Enable Enable
Disable Disable
Zebra Zebra As SDUITable
Normal Normal As SDUITable
Compact Compact As SDUITable
setHover setHover(b As Boolean)
DeleteRow DeleteRow(rowPos As Int)
NormalResponsive NormalResponsive(xs As Boolean, sm As Boolean, md As Boolean,
lg As Boolean)
CompactResponsive CompactResponsive(xs As Boolean, sm As Boolean, md As Boolean,
lg As Boolean)
SaveLastAccessedPage SaveLastAccessedPage
ShowLastAccessedPage ShowLastAccessedPage
AddPropertyTextBox AddPropertyTextBox(Key As String, Title As String, DefaultValue As
String, Description As String, Required As Boolean, TooltipPos As
String)
AddPropertyTextArea AddPropertyTextArea(Key As String, Title As String, DefaultValue
As String, Description As String, Required As Boolean, TooltipPos
As String)
AddPropertySelect AddPropertySelect(Key As String, Title As String, DefaultValue As
String, Description As String, Required As Boolean, TooltipPos As
String, Options As Map)
AddPropertyFileInput AddPropertyFileInput(Key As String, Title As String, Description As
String, TooltipPos As String)
AddPropertyAvatar AddPropertyAvatar(Key As String, Title As String, Description As
String, Size As String, Shape As String, Url As String)

314 / 331
 TailwindCSS WebApps using B4X

Method Name Method Signature

AddPropertyProgress AddPropertyProgress(Key As String, Title As String, DefaultValue As
String, Color As String, StartValue As String, StepValue As String,
MaxValue As String, Description As String, TooltipPos As String)
AddPropertyRange AddPropertyRange(Key As String, Title As String, DefaultValue As
String, Color As String, StartValue As String, StepValue As String,
MaxValue As String, Description As String, TooltipPos As String)
AddPropertyCheckBox AddPropertyCheckBox(Key As String, Title As String, DefaultValue
As Boolean, Color As String, Description As String)
AddPropertyToggle AddPropertyToggle(Key As String, Title As String, DefaultValue As
Boolean, Color As String, Description As String)
AddPropertyRadialProgress AddPropertyRadialProgress(Key As String, Title As String,
DefaultValue As Boolean, Color As String, Description As String)
AddPropertyRating AddPropertyRating(Key As String, Title As String, DefaultValue As
String, Color As String, Description As String)
AddPropertyRadioGroup AddPropertyRadioGroup(Key As String, Title As String,
DefaultValue As String, Color As String, Description As String,
TooltipPos As String, Options As Map)
GetData GetData As Map
SetData SetData(dataJSON As Map)

Tabs
SDUITABS
Properties
Property Type Default Value Options Description
ReadMe Children String [name]_1_content The id of each panel
ParentID String The ParentID of this div
Size String md lg|md|none|sm|xs Size
Type String default default|bordered|li Tab Type
fted|boxed
Items String Item 1;Item 2;Item Items (;)
3
Visible Boolea True If visible.
n
Margins String a=?; x=?; y=?; t=?; Margins A-X-Y-T-B-L-R
b=?; l=?; r=?
Paddings String a=?; x=?; y=?; t=?; Paddings A-X-Y-T-B-L-R
b=?; l=?; r=?
Classes String Classes added to the
HTML tag.
Styles String Styles added to the HTML
tag. Must be a json String-
use =
Attributes String Attributes added to the
HTML tag. Must be a json
String- use =

Events
Change (pos As Int)

315 / 331
 TailwindCSS WebApps using B4X

Methods (set… is a setter & get is a getter)

Method Name Method Signature
AddTabs AddTabs(mCallback As Object, ParentID As String, ID As String,
TabSize As String, TabType As String)
AssignElement AssignElement(mCallBack As Object, ID As String)
Size Size As Int
SetElement SetElement(e As BANanoElement)
SetItems SetItems(l As List)
Item Item(pos As Int) As SDUITab
Panel Panel(pos As Int) As SDUIDiv
ItemBadge ItemBadge(pos As Int) As SDUIBadge
SetItemBadgeValue SetItemBadgeValue(pos As Int, value As String)
SetItemBadgeColor SetItemBadgeColor(pos As Int, value As String)
SetItemBadgeOutline SetItemBadgeOutline(pos As Int, bb As Boolean)
Clear Clear
AddItems AddItems(ItemsToAdd As List)
setActive setActive(pos As Int)
On On(event As String, CallBack As Object, MethodName As String)
getHere getHere As String
getName getName As String
Enable Enable
Disable Disable
Show Show
Hide Hide

TextArea
SDUITEXTAREA
Properties
Property Type Default Value Options Description
ParentID String The ParentID of this div
Input Type String default default|input-group
Caption String TextArea1 Caption
Color String accent|error|ghost Variant
|ghost|info|none|n
uetral|primary|sec
ondary|success|wa
rning
Value String Value
Place Holder String Placeholder
Rows String 4 Rows
Width String full Width
Prefix String Prefix
Prepend Icon String Prepend Icon
Suffix String Suffix
Append Icon String Append Icon
Auto Focus Boolea False Auto Focus
n
Bordered Boolea True Bordered
n
Disabled Boolea False If Disabled

316 / 331
 TailwindCSS WebApps using B4X

Property Type Default Value Options Description

n
Hide Details Boolea False Hide Details
n
Hint String Hint
Input Group Vertical Boolea False Input Group Vertical
n
Read Only Boolea False Read Only
n
Required Boolea False Is Required
n
Rounded Full Boolea False Rounded Full
n
Visible Boolea True If visible.
n
Margins String a=?; x=?; y=?; t=?; Margins A-X-Y-T-B-L-R
b=?; l=?; r=?
Paddings String a=?; x=?; y=?; t=?; Paddings A-X-Y-T-B-L-R
b=?; l=?; r=?
Classes String Classes added to the
HTML tag.
Styles String Styles added to the HTML
tag. Must be a json String-
use =
Attributes String Attributes added to the
HTML tag. Must be a json
String- use =

Events
Focus (event As BANanoEvent)
Blur (event As BANanoEvent)
Keydown (event As BANanoEvent)
KeyUp (event As BANanoEvent)
TouchEnd (event As BANanoEvent)
Change (event As BANanoEvent)
Prepend_Click (event As BANanoEvent)
Append_Click (event As BANanoEvent)

Methods (set… is a setter & get is a getter)

Method Name Method Signature
Enable Enable
Disable Disable
setAutoFocus setAutoFocus(p As Boolean)
AddTextArea AddTextArea(mCallback As Object, ParentID As String, ID As String)
setFieldName setFieldName(s As String)
AddTextAreaGroup AddTextAreaGroup(mCallback As Object, ParentID As String, sID As
String, xCaption As String, xHint As String) As SDUITextArea
setW setW(v As String)
setHideDetails setHideDetails(b As Boolean)
AssignElement AssignElement(mCallBack As Object, ID As String)
setPrependIcon setPrependIcon(picon As String)
setAppendIconBGColor setAppendIconBGColor(c As String)

317 / 331
 TailwindCSS WebApps using B4X

Method Name Method Signature

setPrependIconBGColor setPrependIconBGColor(c As String)
setAppendIcon setAppendIcon(picon As String)
setPrefix setPrefix(l As String)
setSuffix setSuffix(l As String)
setValue setValue(s As String)
getValue getValue As String
setCaption setCaption(l As String)
setHintCaption setHintCaption(l As String)
On On(event As String, CallBack As Object, MethodName As String)
getName getName As String
getHere getHere As String
setBordered setBordered(b As Boolean)
setGhost setGhost(b As Boolean)
setPlaceholder setPlaceholder(s As String)
getDisabled getDisabled As Boolean
setInputGroupSize setInputGroupSize(S As String)
setInputGroupVertical setInputGroupVertical(b As Boolean)
Show Show
Hide Hide
setColor setColor(s As String)
setSize setSize(s As String)
setRequired setRequired(b As Boolean)
setReadOnly setReadOnly(b As Boolean)
setRows setRows(i As Int)
setCols setCols(i As Int)
setErrorMessage setErrorMessage(p As String)
HintColorIntensity HintColorIntensity(hcolor As String, intensity As String)
IsBlank IsBlank As Boolean
roundedFull roundedFull As SDUITextArea
wFull wFull As SDUITextArea
Count Count As Int

TextBox
SDUITEXTBOX
Properties
Property Type Default Value Options Description
ParentID String The ParentID of this div
Input Type String default date-picker|date-
time-
picker|default|inpu
t-group|roll-
date|roll-date-
time|roll-
time|password|tele
phone|number|tim
e-picker|dialer
Size String none lg|md|sm|xs|none Size
Width String full Width
Color String accent|error|ghost Color

318 / 331
 TailwindCSS WebApps using B4X

Property Type Default Value Options Description

|ghost|info|none|n
uetral|primary|sec
ondary|success|wa
rning
Caption String TextBox1 Caption
Place Holder String Placeholder
Value String Value
Show Eyes Boolea False Show Password Eyes
n
RollDate Start String 2000 Start Year for roll
date/time
RollDate End String 3000 End Year for roll date/time
RollDate Step String 1 Date Step value fo roll
date/timee
Prefix String Prefix
Prepend Icon String Prepend Icon
Suffix String Suffix
Append Icon String Append Icon
Max Value Int 0 Maximum Value
Min Value Int 0 Minimum Value
Step Value Int 0 Step Value
Auto Complete Boolea False Auto Complete
n
Auto Focus Boolea False Auto Focus
n
Bordered Boolea True Bordered
n
Date Time Format String yyyy-mm-dd hh- Date Time Picker Format
mm
DP Alt Format String Date Picker Alt-format
DP Alt Input Boolea False Alt Input
n
DP Mode String none multiple|none|rang Date Picker Mode
e
DP No Calendar Boolea False No Calendar
n
DP Week Numbers Boolea False Show Week Numbers
n
Disabled Boolea False If Disabled
n
Error Message String Error Message
Hide Details Boolea False Hide Details
n
Hint String Hint
Input Group Vertical Boolea False Input Group Vertical
n
Read Only Boolea False Read Only
n
Required Boolea False Is Required
n

319 / 331
 TailwindCSS WebApps using B4X

Property Type Default Value Options Description

Visible Boolea True If visible.
n
Margins String a=?; x=?; y=?; t=?; Margins A-X-Y-T-B-L-R
b=?; l=?; r=?
Paddings String a=?; x=?; y=?; t=?; Paddings A-X-Y-T-B-L-R
b=?; l=?; r=?
Classes String Classes added to the
HTML tag.
Styles String Styles added to the HTML
tag. Must be a json String-
use =
Attributes String Attributes added to the
HTML tag. Must be a json
String- use =

Events
Event Signature
Focus (event As BANanoEvent)
Blur (event As BANanoEvent)
Keydown (event As BANanoEvent)
KeyUp (event As BANanoEvent)
TouchEnd (event As BANanoEvent)
Change (event As BANanoEvent)
Prepend_Click (event As BANanoEvent)
Append_Click (event As BANanoEvent)
Click (event As BANanoEvent)
ConfirmDate (dateChosen As Object)
CancelDate (event As BANanoEvent)
Uploading (b as Boolean)
Minus (event As BANanoEvent)
Plus (event As BANanoEvent)
Toggle (Status As Boolean)

Methods (set… is a setter & get is a getter)

Method Name Method Signature
Enable Enable
Disable Disable
AddTextBox AddTextBox(mCallback As Object, ParentID As String, ID As String)
As SDUITextBox
setFieldName setFieldName(s As String)
AddTextBoxGroup AddTextBoxGroup(mCallback As Object, ParentID As String, sID As
String, xCaption As String, xHint As String, xPrefix As String, xSuffix
As String) As SDUITextBox
setW setW(v As String)
setHideDetails setHideDetails(b As Boolean)
AddRollDateTime AddRollDateTime(mCallback As Object, ParentID As String, sID As
String, xCaption As String, xHint As String, xPrefix As String, xSuffix
As String, options As RollDateOptions) As SDUITextBox
AddFlatPickDateTime AddFlatPickDateTime(mCallback As Object, ParentID As String, sID
As String, xCaption As String, xHint As String, xPrefix As String,
xSuffix As String, bIncludeTime As Boolean) As SDUITextBox

320 / 331
 TailwindCSS WebApps using B4X

Method Name Method Signature

AddDateTimePicker AddDateTimePicker(mCallback As Object, ParentID As String, sID As
String, xCaption As String, xHint As String, xPrefix As String, xSuffix
As String, bIncludeTime As Boolean, sDateFormat As String, nMode
As String, bAltInput As Boolean, sAltInput As String, bNoCalendar
As Boolean, bWeekNumbers As Boolean) As SDUITextBox
ShowRollDateTime ShowRollDateTime
HideRollDateTime HideRollDateTime
AssignElement AssignElement(mCallBack As Object, ID As String)
setPassword setPassword(b As Boolean)
setShowEyes setShowEyes(b As Boolean)
toggleEyes toggleEyes
setPrependIcon setPrependIcon(picon As String)
setAppendIcon setAppendIcon(picon As String)
setAppendIconBGColor setAppendIconBGColor(c As String)
setPrependIconBGColor setPrependIconBGColor(c As String)
setValue setValue(s As String)
getValue getValue As String
setCaption setCaption(l As String)
setHintCaption setHintCaption(l As String)
setPrefix setPrefix(l As String)
setSuffix setSuffix(l As String)
On On(event As String, CallBack As Object, MethodName As String)
getName getName As String
getHere getHere As String
setBordered setBordered(b As Boolean)
setGhost setGhost(b As Boolean)
setPlaceholder setPlaceholder(s As String)
getDisabled getDisabled As Boolean
setRequired setRequired(b As Boolean)
setReadOnly setReadOnly(b As Boolean)
setTypeOf setTypeOf(s As String)
setInputGroupSize setInputGroupSize(S As String)
setInputGroupVertical setInputGroupVertical(b As Boolean)
Show Show
Hide Hide
setColor setColor(s As String)
setSize setSize(s As String)
setMinValue setMinValue(i As String)
setMaxValue setMaxValue(i As String)
setStepValue setStepValue(i As Int)
setPattern setPattern(p As String)
setAutoFocus setAutoFocus(p As Boolean)
setAutoComplete setAutoComplete(p As Boolean)
setErrorMessage setErrorMessage(p As String)
HintColorIntensity HintColorIntensity(hcolor As String, intensity As String)
IsMatch IsMatch(otherValue As String, tErrorMessage As String) As Boolean
IsMinLength IsMinLength(minLen As Int, tErrorMessage As String) As Boolean
IsBlank IsBlank As Boolean
Large Large
Small Small

321 / 331
 TailwindCSS WebApps using B4X

Method Name Method Signature

Medium Medium
Tiny Tiny
SizeLG SizeLG
SizeSM SizeSM
SizeMD SizeMD
SizeXS SizeXS
SizeLGResponsive SizeLGResponsive(xs As Boolean, sm As Boolean, md As Boolean, lg
As Boolean)
SizeMDResponsive SizeMDResponsive(xs As Boolean, sm As Boolean, md As Boolean,
lg As Boolean)
SizeSMResponsive SizeSMResponsive(xs As Boolean, sm As Boolean, md As Boolean,
lg As Boolean)
SizeXSResponsive SizeXSResponsive(xs As Boolean, sm As Boolean, md As Boolean, lg
As Boolean)
roundedFull roundedFull As SDUITextBox
wFull wFull As SDUITextBox
Count Count As Int
DesignerCreateView DesignerCreateView (Target As BANanoElement, Props As Map)
BorderColorIntensity BorderColorIntensity(c As String, i As String)
Initialize Initialize (CallBack As Object, cName As String, EventName As
String)
shadow shadow(s As String)
RoundedBox RoundedBox
TextColorIntensity TextColorIntensity(hcolor As String, intensity As String)
BGColorIntensity BGColorIntensity(c As String, s As String)
InitRollDateTime InitRollDateTime As RollDateOptions
AddToParent AddToParent(targetID As String, props As Map)
w w(sw As String) As SDUITextBox

Toast

SDUITOAST
Properties
Property Type Default Value Options Description
ParentID String The ParentID of this div
Input Type String default default|empty Toast Type
Color String success error|info|none|succ Variant
ess|warning
Title String New Message Title
Arrived
Toast Description String Toast Description
TimeOut String Time Out for 1 second use
1000
At Center Boolea False At Center
n
At End Boolea False At End
n
At Middle Boolea False At Middle
n
At Start Boolea False At Start
n

322 / 331
 TailwindCSS WebApps using B4X

Property Type Default Value Options Description

At Top Boolea False At Top
n
Visible Boolea True If visible.
n
Margins String a=?; x=?; y=?; t=?; Margins A-X-Y-T-B-L-R
b=?; l=?; r=?
Paddings String a=?; x=?; y=?; t=?; Paddings A-X-Y-T-B-L-R
b=?; l=?; r=?
Classes String Classes added to the HTML
tag.
Styles String Styles added to the HTML
tag. Must be a json String-
use =
Attributes String Attributes added to the
HTML tag. Must be a json
String- use =

Events
Event Signature
Click (e As BANanoEvent)

Methods (set… is a setter & get is a getter)

Method Name Method Signature
setTimeOut setTimeOut(ti As String)
AddToast AddToast(mCallback As Object, ParentID As String, ID As String, Label As
String)
AddToastEmpty AddToastEmpty(mCallback As Object, ParentID As String, ID As String)
AssignElement AssignElement(mCallBack As Object, ID As String)
Enable Enable
Disable Disable
On On(event As String, CallBack As Object, MethodName As String)
getHere getHere As String
setCaption setCaption(l As String)
getName getName As String
MiddleRight MiddleRight
BottomRight BottomRight
TopRight TopRight
TopLeft TopLeft
MiddleLeft MiddleLeft
BottomLeft BottomLeft
TopCenter TopCenter
MiddleCenter MiddleCenter
BottomCenter BottomCenter
AtStart AtStart As SDUIToast
AtCenter AtCenter As SDUIToast
AtEnd AtEnd As SDUIToast
AtTop AtTop As SDUIToast
AtMiddle AtMiddle As SDUIToast
AtBottom AtBottom As SDUIToast
Show Show As SDUIToast
Hide Hide As SDUIToast
StartResponsive StartResponsive(xs As Boolean, sm As Boolean, md As Boolean, lg As
Boolean)
CenterResponsive CenterResponsive(xs As Boolean, sm As Boolean, md As Boolean, lg As
Boolean)

323 / 331
 TailwindCSS WebApps using B4X

Method Name Method Signature

EndResponsive EndResponsive(xs As Boolean, sm As Boolean, md As Boolean, lg As
Boolean)
TopResponsive TopResponsive(xs As Boolean, sm As Boolean, md As Boolean, lg As
Boolean)
MiddleResponsive MiddleResponsive(xs As Boolean, sm As Boolean, md As Boolean, lg As
Boolean)
BottomResponsive BottomResponsive(xs As Boolean, sm As Boolean, md As Boolean, lg As
Boolean)
CellID CellID(xRow As Int, xCol As Int) As String
Row Row(xRow As Int) As SDUIDiv
Cell Cell(xRow As Int, xCol As Int) As SDUIDiv

Toggle
SDUITOGGLE
Properties
Property Type Default Value Options Description
ParentID String The ParentID of this div
Input Type String default default|input-group Input Type
Position String left left|right Toggle Position
Caption String Toggle 1 Caption
Color String primary accent|error|ghost Variant
|ghost|info|none|n
uetral|primary|sec
ondary|success|wa
rning
Size String none lg|md|sm|xs|none Size
Width String full Width
Checked Boolea False If Checked
n
Indeterminate Boolea False Indeterminate
n
Auto Focus Boolea False Auto Focus
n
Bg Color String Background Color
Bg Color Intensity String Background Color
Intensity
Checked Bg Color String Checked Background Color
Checked Bg Color String Checked Background Color
Intensity Intensity
Read Only Boolea False Read Only
n
Required Boolea False Is Required
n
Visible Boolea True If visible.
n
Margins String a=?; x=?; y=?; t=?; Margins A-X-Y-T-B-L-R
b=?; l=?; r=?
Paddings String a=?; x=?; y=?; t=?; Paddings A-X-Y-T-B-L-R
b=?; l=?; r=?
Classes String Classes added to the

324 / 331
 TailwindCSS WebApps using B4X

Property Type Default Value Options Description

HTML tag.
Styles String Styles added to the HTML
tag. Must be a json String-
use =
Attributes String Attributes added to the
HTML tag. Must be a json
String- use =

Events
Change (checked As Boolean)

Methods (set… is a setter & get is a getter)

Method Name Method Signature
AddToggle AddToggle(mCallback As Object, ParentID As String, ID As String)
setFieldName setFieldName(s As String)
AssignElement AssignElement(mCallBack As Object, ID As String)
setW setW(v As String)
Toggle Toggle
setAutoFocus setAutoFocus(p As Boolean)
Enable Enable
Disable Disable
AddToggleLabel AddToggleLabel(mCallback As Object, ParentID As String, ID As
String, Label As String, TogglePosition As String)
On On(event As String, CallBack As Object, MethodName As String)
getName getName As String
getHere getHere As String
setCaption setCaption(l As String)
getDisabled getDisabled As Boolean
setChecked setChecked(b As Boolean)
getChecked getChecked As Boolean
setIndeterminate setIndeterminate(b As Boolean)
getIndeterminate getIndeterminate As Boolean
Show Show
Hide Hide
setColor setColor(s As String)
setSize setSize(s As String)
setRequired setRequired(b As Boolean)
setReadOnly setReadOnly(b As Boolean)
SizeLG SizeLG
SizeSM SizeSM
SizeMD SizeMD
SizeXS SizeXS
bgColorIntensity bgColorIntensity(color As String, intensity As String) As SDUIToggle
checkedBgColorIntensity checkedBgColorIntensity(color As String, intensity As String) As
SDUIToggle
SizeLGResponsive SizeLGResponsive(xs As Boolean, sm As Boolean, md As Boolean, lg
As Boolean)
SizeMDResponsive SizeMDResponsive(xs As Boolean, sm As Boolean, md As Boolean,
lg As Boolean)
SizeSMResponsive SizeSMResponsive(xs As Boolean, sm As Boolean, md As Boolean,

325 / 331
 TailwindCSS WebApps using B4X

Method Name Method Signature

lg As Boolean)
SizeXSResponsive SizeXSResponsive(xs As Boolean, sm As Boolean, md As Boolean, lg
As Boolean)

Tooltip
SDUITOOLTIP
Properties
Property Type Default Value Options Description
ParentID String The ParentID of this div
Caption String ToolTip Caption
Color String primary accent|error|ghost Variant
|info|none|nuetral
|primary|secondary
|success|warning
Open Boolea False Is Open
n
Position String none bottom|left|none|r Tooltip Position
ight|top
Visible Boolea True If visible.
n
Margins String a=?; x=?; y=?; t=?; Margins A-X-Y-T-B-L-R
b=?; l=?; r=?
Paddings String a=?; x=?; y=?; t=?; Paddings A-X-Y-T-B-L-R
b=?; l=?; r=?
Classes String Classes added to the
HTML tag.
Styles String Styles added to the HTML
tag. Must be a json String-
use =
Attributes String Attributes added to the
HTML tag. Must be a json
String- use =

Events
Click (e As BANanoEvent)

Methods (set… is a setter & get is a getter)

Method Name Method Signature
AddTooltip AddTooltip(mCallback As Object, ParentID As String, ID As String,
sTooltip As String)
Button Button As SDUIButton
AssignElement AssignElement(mCallBack As Object, ID As String)
getHere getHere As String
setCaption setCaption(l As String)
getName getName As String
setOpen setOpen(b As Boolean)
Show Show
Hide Hide
Enable Enable

326 / 331
 TailwindCSS WebApps using B4X

Method Name Method Signature

Disable Disable
AtBottom AtBottom
AtLeft AtLeft
AtRight AtRight
AtTop AtTop
setColor setColor(s As String)

Webcam
SDUIWEBCAM
Properties
Property Type Default Value Options Description
ParentID String The id of the element to
place this into
Hidden Boolea False Hidden
n
Width String 490px Width
Height String 390px Height
ImageFormat String jpeg jpeg|png Image Format
JPEG Quality String 90 JPEG Quality
Margins AXYTBLR String a=?; x=?; y=?; t=?; Margins A-X-Y-T-B-L-R
b=?; l=?; r=?
Paddings AXYTBLR String a=?; x=?; y=?; t=?; Paddings A-X-Y-T-B-L-R
b=?; l=?; r=?
Classes String Classes added to the
HTML tag.
Styles String Styles added to the HTML
tag. Must be a json String-
use =
Attributes String Attributes added to the
HTML tag. Must be a json
String- use =

Events
SnapSuccess (data_URI As String)

Methods (set… is a setter & get is a getter)

Method Name Method Signature
getID getID As String
getHere getHere As String
AddWebCam AddWebCam(CallBack As Object, ParentID As String, id As String)
As SDUIWebcam
StartWebCam StartWebCam
StopWebCam StopWebCam
Freeze Freeze
UnFreeze UnFreeze
TakePicture TakePicture
setW setW(varWidth As String)
getW getW As String
setH setH(varHeight As String)

327 / 331
 TailwindCSS WebApps using B4X

Method Name Method Signature

getH getH As String
setImageFormat setImageFormat(varImageFormat As String)
getImageFormat getImageFormat As String
setJPEQQuality setJPEQQuality(varJPEQQuality As String)
getJPEQQuality getJPEQQuality As String

Demos with Source Code

Calculator

328 / 331
 TailwindCSS WebApps using B4X

Expense Tracker (PocketBase)

fetch REST API (English to Minion Tanslato)

In this example, we execute a POST call to an end point using (BANano)fetch. We have defined a class
called SDUIFetch which makes it easy for us to make fetch calls.

329 / 331
 TailwindCSS WebApps using B4X

LZString Compression

WebScraping
A webscraper is available on the navbar

Output displayed on console log.

Xylophone
This is published on Netlify. https://sithasodaisyxylophone.netlify.app/

User Onboarding
This is also part of the project templates. Also a demo is available on Netlify,
https://sithasouseronboarding.netlify.app/

330 / 331
TailwindCSS WebApps using B4X

331 / 331