Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Flex Layout: create layouts using the power of Flexbox #7

Open
github-learning-lab bot opened this issue Dec 1, 2020 · 2 comments
Open

Flex Layout: create layouts using the power of Flexbox #7

github-learning-lab bot opened this issue Dec 1, 2020 · 2 comments

Comments

@github-learning-lab
Copy link

Flex Layout: cree layouts utilizando el poder de Flexbox

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:

  • flex-layout.row
  • flex-layout.col

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

ℹ️ Recuerde acceder a la documentación de Flex Layout si tiene alguna duda durante la actividad.


🚫 ¿Perdido?

¿Hay algún problema con este paso? ¿Qué tal si nos envía un feedback? 🙏

Crear feedback


Si aún tiene alguna duda sobre cómo enviar su respuesta, puede revisar aquí.

@vtex-course-hub
Copy link

You did great! 😁

Results

✅✅✅✅

Tests

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

@github-learning-lab
Copy link
Author

¡Ha completado este paso con éxito!

Vaya al siguiente paso!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

0 participants