Skip to main content

PageBlock

PageBlock​

@vendure/dashboardpage-layout.tsx
v3.3.0

A component for displaying a block of content on a page. This should be used inside the PageLayout component. It should be provided with a column prop to determine which column it should appear in, and a blockId prop to identify the block.

Example

<PageBlock column="main" blockId="my-block">
 <div>My Block</div>
</PageBlock>
Signature
function PageBlock(props: Readonly<PageBlockProps>): void

Parameters

props​

parameter
Readonly<PageBlockProps>

PageBlockProps​

@vendure/dashboardpage-layout.tsx
v3.3.0

Props used to configure the PageBlock component.

Signature
type PageBlockProps = {
    children?: React.ReactNode;
    column: 'main' | 'side';
    blockId?: string;
    title?: React.ReactNode | string;
    description?: React.ReactNode | string;
    className?: string;
}

children​

property
React.ReactNode

The content of the block.

column​

property
'main' | 'side'

Which column this block should appear in

blockId​

property
string

The ID of the block, e.g. "gift-cards" or "related-products".

title​

property
React.ReactNode | string

The title of the block, e.g. "Gift Cards" or "Related Products".

description​

property
React.ReactNode | string

An optional description of the block.

className​

property
string

An optional set of CSS classes to apply to the block.

FullWidthPageBlock​

@vendure/dashboardpage-layout.tsx
v3.3.0

Status: Developer Preview

A component for displaying a block of content on a page that takes up the full width of the page. This should be used inside the PageLayout component.

Signature
function FullWidthPageBlock(props: Readonly<Pick<PageBlockProps, 'children' | 'className' | 'blockId'>>): void

Parameters

props​

parameter
Readonly<Pick<PageBlockProps, 'children' | 'className' | 'blockId'>>

CustomFieldsPageBlock​

@vendure/dashboardpage-layout.tsx
v3.3.0

A component for displaying an auto-generated form for custom fields on a page. This is a special form of PageBlock that automatically generates a form corresponding to the custom fields for the given entity type.

Example

<CustomFieldsPageBlock column="main" entityType="Product" control={form.control} />
Signature
function CustomFieldsPageBlock(props: Readonly<{
    column: 'main' | 'side';
    entityType: string;
    control: Control<any, any>;
}>): void

Parameters

props​

parameter
Readonly<{ column: 'main' | 'side'; entityType: string; control: Control<any, any>; }>