Share My Creation [Web][SithasoDaisy] Let's Go Mobile First

Hi Fam

Demo

Whilst TailwindCSS if a "mobile first" framework, I had not looked into that aspect much as the concentration was towards desktop apps. It's time.

Let's look at the code to produce this page...

'** DO NOT DELETE
'start building the page, here you load layouts / code your app
private Sub BuildPage
    'load the page layout
    banano.LoadLayout(app.PageViewer, "homelayout")
    hometoolbar.Hamburger.RemoveClass("mr-2")
   
    'start adding you components here
    homeForm.AddRows1.AddColumns2x6
    homeForm.AddRows1.AddColumns2x6
    homeForm.AddRows1.AddColumns12
    homeForm.BuildGrid
    homeForm.Shrink
    '
    txtFirstName = homeForm.Cell(1, 1).AddTextBoxLabel("txtfirstname", "First Name", "Enter first name")
    txtFirstName.Required = True
    txtFirstName.ErrorMessage = "The first name is required!"
    txtFirstName.focus
   
    txtLastName = homeForm.Cell(1, 2).AddTextBoxLabel("txtlastname", "Last Name", "Enter last name")
    txtLastName.Required = True
    txtLastName.ErrorMessage = "The last name is required!"
    '
    txtEmail = homeForm.Cell(2, 1).AddEmail("txtemail", "Email", "Enter email address")
    txtEmail.Required = True
    txtEmail.ErrorMessage = "The email address is required!"
    '
    txtPassword = homeForm.Cell(2, 2).AddPassword("txtpassword", "Password", "Enter password", True)
    txtPassword.Required = True
    txtPassword.MaxLength = 8
    txtPassword.ErrorMessage = "The password is required!"
    '
    btnSave = homeForm.Cell(3, 1).AddButton("btnSave", "Save")
    btnSave.Block
    btnSave.Color = app.COLOR_PRIMARY
End Sub

Private Sub btnSave_Click (e As BANanoEvent)
    e.PreventDefault
    homeForm.ResetValidation
    'validate each of the elements
    homeForm.Validate(txtFirstName.IsBlank)
    homeForm.Validate(txtLastName.IsBlank)
    homeForm.Validate(txtEmail.IsBlank)
    homeForm.Validate(txtPassword.IsBlank)
    'check the form status
    If homeForm.IsValid = False Then Return
End Sub

Private Sub txtPassword_Append_Click (event As BANanoEvent)
    event.PreventDefault
    txtPassword.ToggleEyes
End Sub

 

[Mashiane]

On Desktop / Tablets, this displays like this...