Component: Button

Discover what you can do in Agua!

You will start by building a button!

---

Step 1:

---

Screen, and Alignment

1.

1. Video

1.1. Change -Screen's- name of: "Screen"

Screen's new name:

Button

1.1. Gif

1.1. Written steps

-Inside the Screen's Properties Panel-

[Click] the current name of the Screen and [paste] :

Button

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

• The new name should not contain any spaces or special characters.

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

1.2. Set -Screen's- Alignment of: "Button"

Main: Axis center

Cross: Axis center

1.2. Gif

1.2. Written steps

-Inside each of the Screens' Properties Panel-

A. [Click] the Main Axis center button, inside the Alignment section:

• In the Top-Down first row of buttons, choose the Left-to-right second one.

• The items are packed to each other toward the center.

B. [Click] the Cross Axis center button, inside the Alignment section:

• In the Top-Down second row of buttons, choose the Left-to-right second one.

• The items are packed to each other toward the center.

Step 2:

---

Div, Icon, Alignment, and Size

2.

2. Video

2.1. Create new child -Div- inside of the Screen: "Button"

New Div name:

buttondiv

2.1. Gif

2.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 [paste] the new name:

buttondiv

• 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.2. Create new child -Icon- inside of the Div: "buttondiv"

New Icon Name:

buttonicon

2.2. Gif

2.2. Written steps

-Inside the Element Tree-

A. [Click] the Icon 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 "searchmenudiv5":

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

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

-Inside the Icon's Properties Panel-

C. [Click] the current name of the Icon and [paste]:

buttonicon

• 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.3. Set -Div's- Alignment of: "buttondiv"

Main: Axis center

Cross: Axis center

2.3 Gif

2.3. Written steps

-Inside the Div's Properties Panel-

A. [Click] the Main Axis center button, inside the Alignment section:

• In the Top-Down first row of buttons, choose the Left-to-right second one.

• The items are packed to each other toward the center.

B. [Click] the Cross Axis center button, inside the Alignment section:

• In the Top-Down second row of buttons, choose the Left-to-right second one.

• The items are packed to each other toward the center.

2.4. Set -Div's- Size of: "buttondiv"

Width: Wrap

Height: Wrap

2.4. Gif

2.4. Written steps

-Inside the Div's Properties Panel-

A. [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.

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.

2.5. Set Icon of: "buttonicon"

Icon name:

search

2.5. Gif

2.5. Written steps

-Inside the Icon's Properties Panel-

[Click] the Icon container and [paste] the Icon name:

search

• You can also find it through each Material category's dropdown and [click] it.

Step 3:

---

Background Color, Radius, and Padding

3.

3. Video

3.1. Set -Div's- Background Color of: "buttondiv

HEX Color:

FF385C

3.1. Gif

3.1. Written steps

-Inside the Div's Properties Panel-

A. [Click] the Background toggle and [click] Fill:

• Fill allows you to select either a material color or a gradient as background.

B. [Click] Background color and [paste] the color:

FF385C

• You can type a 6 characters HEX code without the initial #.

3.2. Set -Div's- Radius of: "buttondiv "

Div's Radius:

25

3.2. Gif

3.2. Written steps

-Inside the Div's Properties Panel-

[Click] the Radius container, and [paste] the value:

25

• The Radius applies to all four sides of a Div.

• You can also change the size value using the up and down arrows.

• The default Unit is in Pixels.

3.3. Set -Div's- Padding of: "buttondiv "

Top: px

8

Bottom: px

8

Left: px

8

Right: px

8

3.3. Gif

3.3. Written steps

-Inside the Div's Properties Panel-

A. [Click] the Padding Top container and [type] the new value:

• You can also change the size value using the up and down arrows.

• The default Unit is in Pixels, you do not need to change it.

B. [Click] the Padding Bottom container and [type] the new value:

• You can also change the size value using the up and down arrows.

• The default Unit is in Pixels, you do not need to change it.

C. [Click] the Padding Left container and [type] the new value:

• You can also change the size value using the up and down arrows.

• The default Unit is in Pixels, you do not need to change it.

D. [Click] the Padding Right container and [type] the new value:

• You can also change the size value using the up and down arrows.

• The default Unit is in Pixels, you do not need to change it.

3.4. Set -Icon- Size of: "buttonicon"

Icon's Radius:

28

3.4. Gif

3.4. Written steps

-Inside the Icon's Properties Panel-

[Click] the Icon Size container and [type] the new value:

• You can also change the size value using the up and down arrows.

3.5. Set -Icon- Color of: "buttonicon"

HEX Color:

E0E0E0

3.5. Gif

3.5. Written steps

-Inside the Icon's Properties Panel-

[Click] Icon Color and [Type] the color:

• You can type a 6 characters HEX code without the initial #.

• You can select either a material color or a gradient.

Step 4:

---

Create Component, and preview

4.

4. Video

4.1. Create Component:

4.1. Gif

4.1. Written steps

-Inside the Properties Panel-

[Click] the "Create a Component" blue button.

• You can only create Components out of Divs.

4.2. Define Component Name:

horizontaldivider

4.2. Gif

4.2. Written steps

-Inside the Create Component Menu-

[Type] the Component name.

• The default name provided is the name of the Div.

• You can use either use lowercase, uppercase, numbers or spaces.

4.3 Preview Component

4.3. Gif

Project Progress:

---

Save

Save

[Click] the Save Button

Gif

Code Review:

---

IDE

Code Review

Video

1. Open the project folder in your IDE

1. Gif

2. Open /.agua/generated folder

2. Gif

3. Open /src/agua/pages/button

3. Gif

4. Review button.jsx and screen.module.css

4. Gif