ObjectStackObjectStack

Responsive

Responsive protocol schemas

Breakpoint Name Enum

Matches the breakpoint names defined in theme.zod.ts BreakpointsSchema.

Source: packages/spec/src/ui/responsive.zod.ts

TypeScript Usage

import { BreakpointColumnMap, BreakpointName, BreakpointOrderMap, PerformanceConfig, ResponsiveConfig } from '@objectstack/spec/ui';
import type { BreakpointColumnMap, BreakpointName, BreakpointOrderMap, PerformanceConfig, ResponsiveConfig } from '@objectstack/spec/ui';

// Validate data
const result = BreakpointColumnMap.parse(data);

BreakpointColumnMap

Grid columns per breakpoint (1-12)

Properties

PropertyTypeRequiredDescription
xsnumberoptional
smnumberoptional
mdnumberoptional
lgnumberoptional
xlnumberoptional
2xlnumberoptional

BreakpointName

Allowed Values

  • xs
  • sm
  • md
  • lg
  • xl
  • 2xl

BreakpointOrderMap

Display order per breakpoint

Properties

PropertyTypeRequiredDescription
xsnumberoptional
smnumberoptional
mdnumberoptional
lgnumberoptional
xlnumberoptional
2xlnumberoptional

PerformanceConfig

Performance optimization configuration

Properties

PropertyTypeRequiredDescription
lazyLoadbooleanoptionalEnable lazy loading (defer rendering until visible)
virtualScrollObjectoptionalVirtual scrolling configuration
cacheStrategyEnum<'none' | 'cache-first' | 'network-first' | 'stale-while-revalidate'>optionalClient-side data caching strategy
prefetchbooleanoptionalPrefetch data before component is visible
pageSizenumberoptionalNumber of items per page for pagination
debounceMsnumberoptionalDebounce interval for user interactions in milliseconds

ResponsiveConfig

Responsive layout configuration

Properties

PropertyTypeRequiredDescription
breakpointEnum<'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'>optionalMinimum breakpoint for visibility
hiddenOnEnum<'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'>[]optionalHide on these breakpoints
columnsObjectoptionalGrid columns per breakpoint
orderObjectoptionalDisplay order per breakpoint

On this page