Closed github-learning-lab[bot] closed 4 years ago
:white_check_mark::white_check_mark::white_check_mark::x::white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark:
:white_check_mark: Getting the file :white_check_mark: Code compilation: menu.jsonc :white_check_mark: Code compilation: menu-flex.jsonc :x: You must declare flex-layout.row#major as children of vtex.menu@2.x:submenu#major :white_check_mark: flex-layout row must be correctly stated :white_check_mark: flex-layout row must contain two cols as children :white_check_mark: flex-layout columns must be correctly stated :white_check_mark: flex-layout colum must contain major appliances menu as children :white_check_mark: flex-layout colum must contain image and rich-text as children :white_check_mark: flex-layout colum must contain correct props :white_check_mark: flex-layout colum must contain correct props :white_check_mark: image component must be correctly stated :white_check_mark: image component must contain correct props
:white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark:
:white_check_mark: Getting the file :white_check_mark: Code compilation: menu.jsonc :white_check_mark: Code compilation: menu-flex.jsonc :white_check_mark: Major appliances submenu must contain a flex-layout row as children :white_check_mark: flex-layout row must be correctly stated :white_check_mark: flex-layout row must contain two cols as children :white_check_mark: flex-layout columns must be correctly stated :white_check_mark: flex-layout colum must contain major appliances menu as children :white_check_mark: flex-layout colum must contain image and rich-text as children :white_check_mark: flex-layout colum must contain correct props :white_check_mark: flex-layout colum must contain correct props :white_check_mark: image component must be correctly stated :white_check_mark: image component must contain correct props
Advanced menu with Flex Layout
:sparkles: 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 definevtex.menu@2.x: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 thevtex.menu@2.x: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, havingvtex.menu@2.x: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::information_source: Remember to access the documentation of both Flex Layout and Menu if you have any questions during the activity.
Expected result:
:no_entry_sign: Are you lost?
Is there any problem with this step? What about sending us a feedback? :pray:
Submit feedback
If you're still unsure as to how to send your answers, click here.