Documentation
Low-code
Low-code
  • What is Agua?
  • Quick Start
    • AirBnb: Tutorial
      • Component: Button
      • Component: Card
        • Card's Tag
        • Card's Images
        • Card's Info
      • Home Header
        • 1. Banner
        • 2. Divider
        • 3. Desktop Menu
          • 3.1. Site Menu | Elements
          • 3.2. Site Menu | Style
          • 3.3. Search | Elements
          • 3.4. Search | Style
        • 4. Tablet Menu
          • 4.1. Menu | Elements
          • 4.2. Menu | Style
  • Daily Use
    • Basics
      • Initial Setup
      • Project structure
        • .agua folder
      • Project persistence
        • Saving your project
        • Deploy Locally
  • Help and Community
    • Support
    • Latam Community
    • Global Community
Powered by GitBook
On this page
  1. Quick Start
  2. AirBnb: Tutorial

Home Header

Build the Header of your Home Screen!

PreviousCard's InfoNext1. Banner

Last updated 1 year ago

1. Change "Screen" name:

New name: home

1.1. Written steps

-Inside the Properties Panel-

[Click] the current name of the Screen and type the new one:

  • The name is located at the top of the panel, above of the Style toggle.

  • The new name should be lowercase, without any spaces or special characters.

  • The name will be updated in the Element Tree after you have [clicked] away.

Div, and Size

1. New Div:

New Div name: homeheader

1.1. Written steps

-Inside the Element Tree-

A. [Click] the Div Icon:

  • The button is located at the top of the panel, below the Screens.

  • The Icon will turn blue, and your pointer will change.

B. Drag your pointer and click "Home":

  • The new element will appear as a child of the Screen.

  • The Div will be created with the default name "Layer #".

-Inside the Properties Panel-

C. [Click] the current name of the Div and [type] the new one:

  • The new name should be lowercase, without any spaces or special characters.

  • The name will be updated in the Element Tree after you have [clicked] away.

2. New child Divs, inside "homeheader":

New Div 1 name: homebanner

New Div 2 name:: horizontaldivider

New Div 3 name:: homemenu

New Div 4 name:: homenavbar

1.2. Written steps

Apply this steps for each of the new Divs.

-Inside the Element Tree-

A. [Click] the Div Icon:

  • The button is located at the top of the panel, below the Screens.

  • The Icon will turn blue, and your pointer will change.

B. Drag your pointer and click "homeheader":

  • The new element will appear as a child of the Screen.

  • The Div will be created with the default name "Layer #".

-Inside the Properties Panel-

C. [Click] the current name of the Div and [type] the new one:

  • The new name should be lowercase, without any spaces or special characters.

  • The name will be updated in the Element Tree after you have [clicked] away.

3. Set "homeheader" Size:

Width: Fill

Height: Wrap

1.3. Written steps

-Inside the Properties Panel-

A. [Click] the Fill button, inside the Width section:

  • The horizontal size of the Div will be the 100% of the screen.

  • You cannot use Fill size in the case there is a parent element in Wrap size.

B. [Click] the Wrap button, inside the Height section:

  • The vertical size of the Div will become its child's maximum combined size.

  • You cannot use Wrap size in the case there is a child element in Fill size.