Homogeneidade visual

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'
  1. 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
  1. 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:

imageimage

Está com dúvidas?

Veja o gabarito para esta etapa ou participe do nosso office hours


Ajude-nos a fazer este conteúdo melhor!

Os cursos do VTEX IO são de código aberto. Se você perceber algum problema, pode abrir um pull request!

Faça uma contribuição

ou abra uma issue


Next step