ObjectUIComponentsComplex
View Switcher
Switch between multiple view configurations in one container
The View Switcher component renders a selector and the active view schema in one place.
JSON Configuration
{
type: 'view-switcher',
variant: 'tabs',
position: 'top',
defaultView: 'grid',
views: [
{
type: 'grid',
label: 'Grid',
schema: { type: 'text', content: 'Grid content' }
},
{
type: 'kanban',
label: 'Kanban',
schema: { type: 'text', content: 'Kanban content' }
}
]
}Basic Usage
View Switcher
Switch between multiple view schemas using tabs.
{
"type": "view-switcher",
"variant": "tabs",
"position": "top",
"defaultView": "grid",
"views": [
{
"type": "grid",
"label": "Grid",
"schema": {
"type": "text",
"content": "Grid content"
}
},
{
"type": "kanban",
"label": "Kanban",
"schema": {
"type": "text",
"content": "Kanban content"
}
},
{
"type": "calendar",
"label": "Calendar",
"schema": {
"type": "text",
"content": "Calendar content"
}
}
]
}Schema
interface ViewSwitcherSchema {
type: 'view-switcher';
views: Array<{
type: 'list' | 'detail' | 'grid' | 'kanban' | 'calendar' | 'timeline' | 'map';
label?: string;
icon?: string;
schema?: SchemaNode;
}>;
defaultView?: string;
activeView?: string;
variant?: 'tabs' | 'buttons' | 'dropdown';
position?: 'top' | 'bottom' | 'left' | 'right';
onViewChange?: string;
persistPreference?: boolean;
storageKey?: string;
allowCreateView?: boolean; // Show "+" button to create views
viewActions?: Array<{ // Per-view action icons
type: 'share' | 'settings' | 'duplicate' | 'delete';
icon?: string;
}>;
}