3.3. Search | Elements

Build a desktop oriented menu for your Home Screen!

Step 11:

Div, Size, Orientation, and Padding

11.

11. Video

11. GIF

11.1. New child Divs, inside "searchmenu":

Name 1 : searchmenudiv1

Name 2 : searchmenudiv2

Name 3 : searchmenudiv3

Name 4 : searchmenudiv4

Name 5 : searchmenudiv5

11.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 "searchmenu":

• 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.

11.2. Set "searchmenu" Size:

Width: Wrap

Height: Wrap

11.2. Written steps

-Inside the Properties Panel-

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

• The horizontal 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.

11.3. Set "searchmenu" Orientation:

Horizontal

11.3. Written steps

-Inside the Properties Panel-

[Click] the Horizontal button, inside the Orientation section:

• Set the Div's flex-direction to row.

• Maintain Div's Main and Cross axis Alignment.

Step 12:

Text, and Icon

12.

12. Video

12. GIF

12.1. New child Texts, inside "searchmenudiv1":

Name 1 : searchmenudiv1text1

Name 2 : searchmenudiv1text2

12.1. Written steps

-Inside the Element Tree-

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

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

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

-Inside the Properties Panel-

C. [Click] the current name of the Text 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.

12.2. New child Texts, inside "searchmenudiv2":

Name 1 : searchmenudiv2text1

Name 2 : searchmenudiv2text2

12.2. Written steps

-Inside the Element Tree-

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

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

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

-Inside the Properties Panel-

C. [Click] the current name of the Text 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.

12.3. New child Texts, inside "searchmenudiv3":

Name 1 : searchmenudiv3text1

Name 2 : searchmenudiv3text2

12.3. Written steps

-Inside the Element Tree-

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

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

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

-Inside the Properties Panel-

C. [Click] the current name of the Text 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.

12.4. New child Texts, inside "searchmenudiv4":

Name 1 : searchmenudiv4text1

Name 2 : searchmenudiv4text2

12.4. Written steps

-Inside the Element Tree-

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

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

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

-Inside the Properties Panel-

C. [Click] the current name of the Text 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.

12.5. New child Icon, inside "searchmenudiv5":

Name : searchmenudiv5icon1

12.5. 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 Properties Panel-

C. [Click] the current name of the Icon 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.

Step 13:

Alignment, and Size

13.

13. Video

13. GIF

13.1. Set "searchmenu" Alignment:

Main: Axis center

Cross: Axis center

13.1. Written steps

-Inside the 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.

13.2. Set "searchmenudiv1, searchmenudiv2, searchmenudiv3, searchmenudiv4, and searchmenudiv5" Size:

Width: Wrap

Height: Wrap

13.2. Written steps

-Inside the Properties Panel-

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

• The horizontal 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.

Step 14:

Text, and Icon

14.

14. Video

14. GIF

14.1. Set "searchmenudiv1text1" Text:

Where

14.1. Written steps

-Inside the Properties Panel-

[Click] the Text container and [type]:

• You will have to erase the default text: Type...

• You can also copy and paste text from other sources.

• You can use any type of characters.

• You cannot create a line break with the [enter] key.

• You can create line breaks by adjusting the Text Width.

14.2. Set "searchmenudiv1text2" Text:

Search destinations

14.2. Written steps

-Inside the Properties Panel-

[Click] the Text container and [type]:

• You will have to erase the default text: Type...

• You can also copy and paste text from other sources.

• You can use any type of characters.

• You cannot create a line break with the [enter] key.

• You can create line breaks by adjusting the Text Width.

14.3. Set "searchmenudiv2text1" Text:

Check in

14.3. Written steps

-Inside the Properties Panel-

[Click] the Text container and [type]:

• You will have to erase the default text: Type...

• You can also copy and paste text from other sources.

• You can use any type of characters.

• You cannot create a line break with the [enter] key.

• You can create line breaks by adjusting the Text Width.

14.4. Set "searchmenudiv2text2" Text:

Add dates

14.4. Written steps

-Inside the Properties Panel-

[Click] the Text container and [type]:

• You will have to erase the default text: Type...

• You can also copy and paste text from other sources.

• You can use any type of characters.

• You cannot create a line break with the [enter] key.

• You can create line breaks by adjusting the Text Width.

14.5. Set "searchmenudiv3text1" Text:

Check out

14.5. Written steps

-Inside the Properties Panel-

[Click] the Text container and [type]:

• You will have to erase the default text: Type...

• You can also copy and paste text from other sources.

• You can use any type of characters.

• You cannot create a line break with the [enter] key.

• You can create line breaks by adjusting the Text Width.

14.6. Set "searchmenudiv3text2" Text:

Add dates

14.6. Written steps

-Inside the Properties Panel-

[Click] the Text container and [type]:

• You will have to erase the default text: Type...

• You can also copy and paste text from other sources.

• You can use any type of characters.

• You cannot create a line break with the [enter] key.

• You can create line breaks by adjusting the Text Width.

14.7. Set "searchmenudiv4text1" Text:

Who

14.7. Written steps

-Inside the Properties Panel-

[Click] the Text container and [type]:

• You will have to erase the default text: Type...

• You can also copy and paste text from other sources.

• You can use any type of characters.

• You cannot create a line break with the [enter] key.

• You can create line breaks by adjusting the Text Width.

14.8. Set "searchmenudiv4text2" Text:

Add guests

14.8. Written steps

-Inside the Properties Panel-

[Click] the Text container and [type]:

• You will have to erase the default text: Type...

• You can also copy and paste text from other sources.

• You can use any type of characters.

• You cannot create a line break with the [enter] key.

• You can create line breaks by adjusting the Text Width.

14.9. Set "searchmenudiv5ticon1" Icon:

search

14.9. Written steps

-Inside the Properties Panel-

[Click] the Icon container and [click] the Icon:

• You can use the Icon name to find it through the SearchBar.

• You can also find it through each Material category's dropdown.