search

fspinelli-cruce / store-framework

https://lab.github.com/vtex-trainings/store-framework-espanol
0 stars 0 forks source link

Flex Layout: cree layouts utilizando el poder de Flexbox #7

Closed github-learning-lab[bot] closed 4 years ago

github-learning-lab[bot] commented 4 years ago

Flex Layout: cree layouts utilizando el poder de Flexbox

:sparkles: Branch: flexlayout

Introducción

Flex Layout es un paradigma de estructuración de layout creado en el Store Framework para permitir la construcción de layouts complejos. Este paradigma utiliza el concepto de líneas y columnas para definir la estructura y la colocación deseadas de los bloques en una determinada página.

Hay dos bloques de construcción básicos de cada Flex Layout:

Si ya está familiarizado con Flexbox utilizado en CSS, Flex Layout debería ser fácil de entender, pues flex-layout.row y flex-layout.col utilizan Flexbox por debajo.

Flex Layout

Con Flex Layout es posible crear layouts personalizados, utilizando la estructura de líneas y columnas de Flexbox.

Analizando la documentación del bloque, vemos que puede utilizar cualquier array de bloques como children de Flex Layout. Además, siempre debe usar flex-layout.row y flex-layout.col, NUNCA flex-layout de forma aislada.

A continuación, tenemos un ejemplo de flex layout compuesto de un flex-layout.row con dos children: un info-card y un rich-text:

  "flex-layout.row":{
    "children": [
      "info-card#rethink",
      "rich-text#deletar"
    ]
  },

 "info-card#rethink": {
    "props": {
      "imageUrl": "https://appliancetheme.vteximg.com.br/arquivos/utensilios-cozinha-min.png",
      "isFullModeStyle": true,
      "headline": "Time to rethink your kitchen",
      "callToActionText": "Discover",
      "textPosition": "center"
    }
  },

  "rich-text#deletar": {
    "props": {
      "text": "I'll be deleted soon"
    }
  }

Actividad

  1. Declare el flex-layout.row dentro de los blocks del template de store.home y declare los bloques propuestos arriba en su archivo home.jsonc .
  2. Altere los children de flex-layout.row reemplazando el bloque rich-text por una columna flex-layout.col .
  3. Elimine el bloque de rich-text propuesto arriba de su tema.
  4. Declare el bloque flex-layout.col en su archivo home.jsonc con dos componentes de imagen como children: image#electronics y image#major-appliance, en este orden.
  5. Defina los bloques image con las siguientes props:
...
"image#electronics": {
  "props": {
    "src": "https://appliancetheme.vteximg.com.br/assets/vtex.file-manager-graphql/images/electronics_banner___25d69b49f8224b369375e68513b4d593.png",
    "maxWidth": "100%"
  }
},
"image#major-appliance": {
  "props": {
    "src": "https://appliancetheme.vteximg.com.br/assets/vtex.file-manager-graphql/images/major_appliance_banner___bb10093866a127345ddfbcca3efa5022.png",
    "maxWidth": "100%"
  }
}

El resultado obtenido debe ser semejante a este:

image

:information_source: Recuerde acceder a la documentación de Flex Layout 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í.

github-learning-lab[bot] commented 4 years ago

¡Ha completado este paso con éxito!

Vaya al siguiente paso:

Estante de productos

vtex-course-hub[bot] commented 4 years ago

You did great! :grin:

Results

:white_check_mark::white_check_mark::white_check_mark:

Tests

:white_check_mark: Rich-text should not be rendered by flex-layout.row :white_check_mark: Add a flex-layout.col inside of flex-layout.row :white_check_mark: Define two images as children of flex-layout.col with the correct props for each image