Look'n Feel

Look'n Feel

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

  1. In step 1, in the /react/adminExample.tsx file we add vtex.styleguide as a dependency, import the styleguide'sLayout and PageBlock so that we can use them:
import { Layout, PageBlock } from 'vtex.styleguide'
  1. Both components are responsible for creating the admin layout that is used by VTEX apps, you can compose them as follows:
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. By viewing the [PageBlock] documentation (https://styleguide.vtex.com/#/Components/Admin%20structure/PageBlock), we can enrich it by adding a title and description:
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;

The expected result should be:

imageimage

Any questions?

See the answersheet for this step or join us on our office hours


Help us make this content better!

VTEX IO courses are open source. If you see something wrong, you can open a pull request!

Make a contribution

or open an issue