PageBlock

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

tsx

<PageBlock column="main" blockId="my-block">
 <div>My Block</div>
</PageBlock>

function PageBlock(props: Readonly<PageBlockProps>): void

Parameters

props

<MemberInfo kind="parameter" type={Readonly<<a href='/reference/dashboard/page-layout/page-block#pageblockprops'>PageBlockProps</a>>} />

PageBlockProps

Props used to configure the PageBlock component.

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

children

The content of the block.

column

Which column this block should appear in

blockId

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

title

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

description

An optional description of the block.

className

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

</div> ## FullWidthPageBlock <GenerationInfo sourceFile="packages/dashboard/src/lib/framework/layout-engine/page-layout.tsx" sourceLine="947" packageName="@vendure/dashboard" since="3.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.

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

Parameters

props

<MemberInfo kind="parameter" type={Readonly<Pick<<a href='/reference/dashboard/page-layout/page-block#pageblockprops'>PageBlockProps</a>, 'children' | 'className' | 'blockId'>>} />

CustomFieldsPageBlock

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

tsx

<CustomFieldsPageBlock column="main" entityType="Product" control={form.control} />

function CustomFieldsPageBlock(props: Readonly<{
    column: 'main' | 'side';
    entityType: string;
    control: Control<any, any>;
}>): void

Parameters

props