Layout
DashboardActionBarItem
Allows you to define custom action bar items for any page in the dashboard.
interface DashboardActionBarItem {
pageId: string;
component: React.FunctionComponent<{ context: PageContextValue }>;
type?: 'button' | 'dropdown';
requiresPermission?: string | string[];
}
pageId
string
The ID of the page where the action bar item should be displayed.
component
React.FunctionComponent<{ context: PageContextValue }>
A React component that will be rendered in the action bar.
type
'button' | 'dropdown'
'button'
The type of action bar item to display. Defaults to button
.
The 'dropdown' type is used to display the action bar item as a dropdown menu item.
When using the dropdown type, use a suitable dropdown item component, such as:
import { DropdownMenuItem } from '@vendure/dashboard';
// ...
{
component: () => <DropdownMenuItem>My Item</DropdownMenuItem>
}
requiresPermission
string | string[]
Any permissions that are required to display this action bar item.
PageBlockLocation
The location of a page block in the dashboard. The location can be found by turning on
"developer mode" in the dashboard user menu (bottom left corner) and then
clicking the < />
icon when hovering over a page block.
type PageBlockLocation = {
pageId: string;
position: PageBlockPosition;
column: 'main' | 'side';
}
DashboardPageBlockDefinition
This allows you to insert a custom component into a specific location on any page in the dashboard.
interface DashboardPageBlockDefinition {
id: string;
title?: React.ReactNode;
location: PageBlockLocation;
component: React.FunctionComponent<{ context: PageContextValue }>;
requiresPermission?: string | string[];
}