Look'n Feel
View in PortugueseThis 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.
Introduction
The Admin Framework exists to unify channels and make life easier for the store operator. It is important, however, that the visual experience is homogeneous to avoid inconsistency of usability.
In order to facilitate visual integration for the developer, Styleguide is available and with several components that can be used to quickly create administrative screens.
Activity
- In step 1, in the
/react/adminExample.tsxfile we addvtex.styleguideas a dependency, import the styleguide'sLayoutandPageBlockso that we can use them:
_10import { Layout, PageBlock } from 'vtex.styleguide'
- Both components are responsible for creating the admin layout that is used by VTEX apps, you can compose them as follows:
_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
- By viewing the [PageBlock] documentation (https://styleguide.vtex.com/#/Components/Admin%20structure/PageBlock), we can enrich it by adding a title and description:
_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;
The expected result should be:
