Skip to main content

Page

Page​

@vendure/dashboardpage-layout.tsx
v3.3.0

This component should be used to wrap all pages in the dashboard. It provides a consistent layout as well as a context for the slot-based PageBlock system.

The typical hierarchy of a page is as follows:

Example

import { Page, PageTitle, PageActionBar, PageLayout, PageBlock, Button } from '@vendure/dashboard';

const pageId = 'my-page';

export function MyPage() {
 return (
   <Page pageId={pageId} form={form} submitHandler={submitHandler} entity={entity}>
     <PageTitle>My Page</PageTitle>
     <PageActionBar>
       <PageActionBarRight>
         <Button>Save</Button>
       </PageActionBarRight>
     </PageActionBar>
     <PageLayout>
       <PageBlock column="main" blockId="my-block">
         <div>My Block</div>
       </PageBlock>
     </PageLayout>
   </Page>
 )
}
Signature
function Page(props: Readonly<PageProps>): void

Parameters

props​

parameter
Readonly<PageProps>

PageProps​

@vendure/dashboardpage-layout.tsx
v3.3.0

The props used to configure the Page component.

Signature
interface PageProps extends ComponentProps<'div'> {
    pageId?: string;
    entity?: any;
    form?: UseFormReturn<any>;
    submitHandler?: any;
}
  • Extends: ComponentProps<'div'>

pageId​

property
string

A string identifier for the page, e.g. "product-list", "review-detail", etc.

entity​

property
any

form​

property
UseFormReturn<any>

submitHandler​

property
any