Skip to content
Xng UI
Docs CDK Components Tools Contribute About

Layout

@xngui/cdk/layout
@xngui/cdk/layout

Viewport breakpoints, matchMedia, and scroll helpers.

Preview

Breakpoint

tier desktop · compact false · coarse pointer false

Wide layout — use multi-column patterns.

Scroll target — focus moves here after the button is pressed.
import { XBreakpointService } from '@xngui/cdk/layout';
 
const breakpoints = inject(XBreakpointService);
 
breakpoints.isCompact(); // false
breakpoints.tier(); // 'desktop'
breakpoints.hasCoarsePointer(); // false

Events 1

  1. breakpoint 
    {
  "compact": false,
  "tier": "desktop",
  "coarsePointer": false
}