Homogeneidade visual
View in EnglishThis content was migrated from the VTEX Learning Center and is no longer being actively maintained. For the most accurate and up-to-date information, please check the official documentation.
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.styleguidecomo dependência, importe oLayoutePageBlockdo styleguide para que possamos usá-los:
_10import { 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:
_14import React, { FC } from 'react'_14import { Layout, PageBlock } from 'vtex.styleguide'_14_14const AdminExample: FC = () => {_14 return (_14 <Layout>_14 <PageBlock variation="full">_14 <h1>Hello, World!</h1>_14 </PageBlock>_14 </Layout>_14 )_14}_14_14export default AdminExample
- Vendo a documentação do PageBlock, nós podemos enriquecê-lo para adicionar um título e uma descrição:
_18import React, { FC } from "react";_18import { Layout, PageBlock } from "vtex.styleguide";_18_18const AdminExample: FC = () => {_18 return (_18 <Layout>_18 <PageBlock_18+ title="Titulo"_18+ subtitle="Alguma explicação."_18+ variation="full"_18 >_18 <h1>Hello, World!</h1>_18 </PageBlock>_18 </Layout>_18 );_18};_18_18export default AdminExample;
O resultado esperado deve ser:
