Homogeneidade visual

Introdução

O Admin Framework existe para unificar canais e facilitar a vida do operador de loja. É importante, no entanto, que a experiência visual seja homogênea para evitar inconsistência de usabilidade.

A fim de facilitar a integração visual para o desenvolvedor, o Styleguide, encontra-se disponível e com vários componentes que podem ser utilizados para criar rapidamente telas administrativas.

Atividade

1. No passo 1, adicionamos o vtex.styleguide como dependência, importe o Layout e PageBlock do styleguide para que possamos usá-los:

import { Layout, PageBlock } from 'vtex.styleguide'

2. Ambos estes componentes são responsáveis por criar o layout de admin que é utilizado pelas apps VTEX, você pode compô-los da seguinte forma:

import React, { FC } from 'react'
import { Layout, PageBlock } from 'vtex.styleguide'

const AdminExample: FC = () => {
  return (
    <Layout>
      <PageBlock variation="full">
        <h1>Hello, World!</h1>
      </PageBlock>
    </Layout>
  )
}

export default AdminExample

3. Vendo a documentação do PageBlock, nós podemos enriquecê-lo para adicionar um título e uma descrição:

import React, { FC } from "react";
import { Layout, PageBlock } from "vtex.styleguide";

const AdminExample: FC = () => {
  return (
    <Layout>
      <PageBlock
+       title="Titulo"
+       subtitle="Alguma explicação."
+       variation="full"
      >
        <h1>Hello, World!</h1>
      </PageBlock>
    </Layout>
  );
};

export default AdminExample;

O resultado esperado deve ser:

Está com dúvidas?

Veja o gabarito para esta etapa ou acompanhe nosso [office hours] no canal VTEX Developers(https://www.youtube.com/c/VTEXDevelopers)