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
- No passo 1, adicionamos o
vtex.styleguide
como dependência, importe oLayout
ePageBlock
do styleguide para que possamos usá-los:
import { Layout, PageBlock } from 'vtex.styleguide'
- 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
- 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)
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çãoUpdated 11 months ago
Next step