You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
As we've seen in the last step, a Submenu accepts any Store Framework block as child.
With this in mind, we can improve the previous activity's Menu configuration, adding to its content by using Flex Layout.
Activity
According to what we did in the last activity and what was learned about Flex Layout, let's apply Flex Layout to the Major Appliances submenu.
In the menu.jsonc file, remove the block of code in which you define [email protected]:submenu#major and also its children. This code block will be declared in a new file soon:
Create the menu-flex.jsonc file, the code block that is declared above needs to be in this file; flex-layout.row#major will be in the children list pertaining to the [email protected]:submenu#major block and it's defined as:
Now, let's declare the blocks defined in flex-layout.row#major. To start, declare the flex-layout.col#menu block, having [email protected]:menu#major as child;
Do the same for the flex-layout.col#img block, declaring image#menu and rich-text#header as its children, in addition to the following props:
✅ Getting the file
✅ Code compilation: menu.jsonc
✅ Code compilation: menu-flex.jsonc
✅ Major appliances submenu must contain a flex-layout row as children
✅ flex-layout row must be correctly stated
✅ flex-layout row must contain two cols as children
✅ flex-layout columns must be correctly stated
✅ flex-layout colum must contain major appliances menu as children
✅ flex-layout colum must contain image and rich-text as children
✅ flex-layout colum must contain correct props
✅ flex-layout colum must contain correct props
✅ image component must be correctly stated
✅ image component must contain correct props
Advanced menu with Flex Layout
✨ Branch: menuflex
Introduction
As we've seen in the last step, a Submenu accepts any Store Framework block as child.
With this in mind, we can improve the previous activity's Menu configuration, adding to its content by using Flex Layout.
Activity
According to what we did in the last activity and what was learned about Flex Layout, let's apply Flex Layout to the Major Appliances submenu.
In the
menu.jsonc
file, remove the block of code in which you define[email protected]:submenu#major
and also its children. This code block will be declared in a new file soon:Create the
menu-flex.jsonc
file, the code block that is declared above needs to be in this file;flex-layout.row#major
will be in the children list pertaining to the[email protected]:submenu#major
block and it's defined as:Now, let's declare the blocks defined in
flex-layout.row#major
. To start, declare theflex-layout.col#menu
block, having[email protected]:menu#major
as child;Do the same for the
flex-layout.col#img
block, declaringimage#menu
andrich-text#header
as its children, in addition to the following props:Lastly, let's declare the former
image#menu
as child in this last step, using the code below:ℹ️ Remember to access the documentation of both Flex Layout and Menu if you have any questions during the activity.
Expected result:
🚫 Are you lost?
Is there any problem with this step? What about sending us a feedback? 🙏
Submit feedback
If you're still unsure as to how to send your answers, click here.
The text was updated successfully, but these errors were encountered: