Open github-learning-lab[bot] opened 4 years ago
: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::white_check_mark::white_check_mark::white_check_mark:
:white_check_mark: Getting files :white_check_mark: First test - Code compilation :white_check_mark: Your store must contain header full and header layouts desktop and mobile :white_check_mark: Desktop's header rows must be correctly stated :white_check_mark: Mobile's header rows must be correctly stated :white_check_mark: Your store must contain Desktop's Header Rows :white_check_mark: Your store must contain Mobile's Header Rows :white_check_mark: Your store must contain login, logo and rich-text :white_check_mark: Your store must contain correct login props :white_check_mark: Your store must contain correct logo props :white_check_mark: Your store must contain correct rich-text props :white_check_mark: Your store must contain the correct Search row on mobile mode :white_check_mark: Your store must contain the correct main row on mobile mode :white_check_mark: Your store must contain the correct main row on desktop mode :white_check_mark: Your store must contain the correct main row on desktop mode :white_check_mark: Search SVG should be correctly placed on iconpack :white_check_mark: Cart SVG should be correctly placed on iconpack
Layout de pestañas
:sparkles: Branch: tab-layout
Introducción
Tab Layout es un paradigma de estructuración de layouts creado en Store Framework para permitir la construcción de layouts con pestañas.
En este paradigma tenemos dos containers:
tab-list
ytab-content
. En cada uno de estos containers, tenemos los ítems que los componen. Dentro detab-list
, tenemos lostab-list.item
. Entab-content
, tenemos lostab-content.item
.A continuación, veremos un ejemplo de implementación de un tab layout.
En primer lugar, es necesario declarar el block
tab-layout
en el template deseado:Después, es necesario declarar un
tab-list
y untab-content
como children deltab-layout
:Con esto, tenemos estos dos containers como componentes de nuestro
tab-layout
. El siguiente paso es declarar lostab-list.item
ytab-content.item
como children deltab-list
ytab-content
, respectivamente:En la siguiente etapa, tenemos que declarar las propiedades de los
tab-list.item
. El siguiente código genera una interfaz de tabs como la de esta imagen:La propiedad
tabId
es muy importante, pues es la llave que conecta el botón de untab-list.item
con untab-content.item
.A continuación, declararemos los children y las props de los
tab-content.item
.En el array de children, es posible incluir diversos blocks como
rich-text
,info-card
,image
,flex-layout
y etc.En la prop
tabId
, es necesario incluir los mismos ids declarados en lostab-list.item
para que el enlace entre la pestaña y el contenido funcione.Por último, debe declarar las propiedades de su contenido. En nuestro ejemplo, colocamos apenas un
rich-text
en cadatab-content.item
:Actividad
En esta actividad, crearemos la estructura simple de un tab layout, como en la siguiente imagen. Más adelante incluiremos algún contenido para estilizar nuestra página personalizada.
about-us.jsonc
creado anteriormente, agregue untab-layout#home
al templatestore.custom#about-us
.tab-layout#home
y agregue como sus children untab-list#home
y untab-content#home
.tab-list#home
y agregue como sus children untab-list.item#home1
y untab-list.item#home2
.tab-list.item#home1
de manera que la interfaz muestre el texto "Major Appliances". (Consejo: no olvide que incluir en las props untabId
="majorAppliances"
y la propiedaddefaultActiveTab
=true
).tab-list.item#home2
de manera que la interfaz muestre el texto "Electronics". (Consejo: no se olvide que incluir en las props untabId
="electronics"
).tab-content#home
en su tema y agregue los childrentab-content.item#home1
ytab-content.item#home2
.tab-content.item
, declare apenas unrich-text
como children (por ejemplo,rich-text#home1
yrich-text#home2
).tabId
en cadatab-content.item
de manera que se produzca el enlace entre eltab-list
creado anteriormente ytab-content
.Por último, agregue los
rich-text
y declare sus props de acuerdo con el siguiente código::information_source: Recuerde acceder a la documentación Tab Layout y Rich Text si tiene alguna duda durante la actividad.
:no_entry_sign: ¿Perdido?
¿Hay algún problema con este paso? ¿Qué tal si nos envía un feedback? :pray:
Crear feedback
Si aún tiene alguna duda sobre cómo enviar su respuesta, puede revisar aquí.