Open github-learning-lab[bot] opened 3 years ago
:white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::x::x::white_check_mark::white_check_mark:
:white_check_mark: Getting the file :white_check_mark: First test - Code compilation :white_check_mark: store.home must contain responsive layouts mobile and desktop :white_check_mark: Desktop's image and rich text must be correctly stated :white_check_mark: Mobile's image and rich text must be correctly stated :x: You haven't declared the props text,textPosition,textAlignment from rich-text#mobile correctly. Review their names and values. :x: You haven't declared the props text,textPosition,textAlignment from rich-text#desktop correctly. Review their names and values. :white_check_mark: Image Mobile props must be correclty declared :white_check_mark: Image Desktop props must be correclty declared
:white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::x::x::white_check_mark::white_check_mark:
:white_check_mark: Getting the file :white_check_mark: First test - Code compilation :white_check_mark: store.home must contain responsive layouts mobile and desktop :white_check_mark: Desktop's image and rich text must be correctly stated :white_check_mark: Mobile's image and rich text must be correctly stated :x: You haven't declared the props text,textPosition,textAlignment from rich-text#mobile correctly. Review their names and values. :x: You haven't declared the props text,textPosition,textAlignment from rich-text#desktop correctly. Review their names and values. :white_check_mark: Image Mobile props must be correclty declared :white_check_mark: Image Desktop props must be correclty declared
:white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::x::x::white_check_mark::white_check_mark:
:white_check_mark: Getting the file :white_check_mark: First test - Code compilation :white_check_mark: store.home must contain responsive layouts mobile and desktop :white_check_mark: Desktop's image and rich text must be correctly stated :white_check_mark: Mobile's image and rich text must be correctly stated :x: You haven't declared the props text,textPosition,textAlignment from rich-text#mobile correctly. Review their names and values. :x: You haven't declared the props text,textPosition,textAlignment from rich-text#desktop correctly. Review their names and values. :white_check_mark: Image Mobile props must be correclty declared :white_check_mark: Image Desktop props must be correclty declared
:white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::x::x::white_check_mark::white_check_mark:
:white_check_mark: Getting the file :white_check_mark: First test - Code compilation :white_check_mark: store.home must contain responsive layouts mobile and desktop :white_check_mark: Desktop's image and rich text must be correctly stated :white_check_mark: Mobile's image and rich text must be correctly stated :x: You haven't declared the props text,textPosition,textAlignment from rich-text#mobile correctly. Review their names and values. :x: You haven't declared the props text,textPosition,textAlignment from rich-text#desktop correctly. Review their names and values. :white_check_mark: Image Mobile props must be correclty declared :white_check_mark: Image Desktop props must be correclty declared
: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: First test - Code compilation :white_check_mark: store.home must contain responsive layouts mobile and desktop :white_check_mark: Desktop's image and rich text must be correctly stated :white_check_mark: Mobile's image and rich text must be correctly stated :white_check_mark: Rich-text Mobile props must be correclty declared :white_check_mark: Rich-text Desktop props must be correclty declared :white_check_mark: Image Mobile props must be correclty declared :white_check_mark: Image Desktop props must be correclty declared
Carrusel de bloques
:sparkles: Branch: slider
Introducción
Slider Layout, como Flex Layout, es una forma flexible de crear un nuevo bloque a partir de otros bloques usando
children
. Este permite que se creen sliders de otros bloques, comoinfo-card
s e inclusoflex-layout
s, por ejemplo.Utilizaremos Slider Layout para convertir un conjunto de info-cards en un slider.
Slider Layout
Analizando la documentación, vemos que usted puede utilizar cualquier array de bloques como
children
, así como en el Flex Layout.A continuación, sigue un ejemplo de implementación de un slider-layout con dos
info-card
:Actividad
En esta actividad, crearemos un slider de marcas para nuestro sitio web:
En el archivo
home.jsonc
, declare el bloqueslider-layout#home
al templatestore.home
.Cree un archivo llamado
slider-layout.jsonc
dentro de la carpeta/store/blocks
.En este archivo, basado en el código anterior, reemplace los
info-card
declarados como children deslider-layout#home
y agregue 6 componentes de imagenimage
como children. Utilice el formatoimage#brand1
,image#brand2
(...)image#brand6
para declarar los componentes.Declare una prop
src
específica para cadaimage#brand
definido. Utilice las siguientes URLs para cada una:https://appliancetheme.vteximg.com.br/arquivos/flatflat-brand-logo-square1.png
https://appliancetheme.vteximg.com.br/arquivos/flatflat-brand-logo-square2.png
https://appliancetheme.vteximg.com.br/arquivos/flatflat-brand-logo-square3.png
https://appliancetheme.vteximg.com.br/arquivos/flatflat-brand-logo-square4.png
https://appliancetheme.vteximg.com.br/arquivos/flatflat-brand-logo-square5.png
https://appliancetheme.vteximg.com.br/arquivos/flatflat-brand-logo-square6.png
Por último, usted debe utilizar la propriedad de
autoplay
en el bloqueslider-layout#home
. Haga que el slide cambie automáticamente cada 7 segundos y que se detenga cuando el usuario pase el mouse encima del slide.:information_source: Recuerde acceder a la documentación del Slider Layout e Image si tiene alguna duda durante la actividad.