@zellvora/ng-layout

Enterprise Angular 21 layout components library - fully Signal-based, SSR-compatible, zoneless, and tree-shakable.

Features

• 100% Signal-based - Uses Angular Signals throughout, computed(), effect(), input(), output()
• No Dependencies - Zero Angular Material dependency, built from scratch
• Standalone Components - All components are standalone, no NgModules
• SSR Compatible - Works seamlessly with Angular Universal and Server-Side Rendering
• Zoneless Ready - Compatible with Angular's zoneless change detection
• Tree Shakable - Every file is optimized for dead code elimination
• Type Safe - Full TypeScript support with comprehensive types
• Themeable - CSS Custom Properties for dynamic theming
• Accessible - WCAG AA compliant with ARIA support

Installation

npm install @zellvora/ng-layout

Components

Foundation

• zv-container - Width-constrained container
• zv-section - Semantic section wrapper
• zv-page - Full-height page container
• zv-main - Main content area
• zv-content - Scrollable content area
• zv-aside - Sidebar/aside area
• zv-spacer - Flexible spacer
• zv-divider - Separator line
• zv-header - Page header with sticky support
• zv-footer - Page footer
• zv-toolbar - Action toolbar

Grid System

• zv-grid - CSS Grid container (12/24 columns)
• zv-row - Flexbox row container
• zv-column - Grid cell with responsive span

Stack & Layout

• zv-stack - Vertical/horizontal stack with gap
• zv-wrap - Flexbox wrap container

Services

• BreakpointService - Responsive breakpoint detection
• ThemeService - Theme switching and CSS variable management
• ViewportService - Viewport dimensions and scroll tracking
• SidebarService - Sidebar state management
• DrawerService - Multi-drawer state management
• LayoutService - Orchestrates layout components
• ScrollService - Scroll utilities
• NavigationService - Navigation state and menu management

Hooks

Injection functions for accessing services:

import { useBreakpoint, useTheme, useSidebar } from '@zellvora/ng-layout';

export class MyComponent {
  breakpoint = useBreakpoint();
  theme = useTheme();
  sidebar = useSidebar();
}

Basic Usage

import {
  ZvPage,
  ZvHeader,
  ZvMain,
  ZvFooter,
  ZvContainer,
  ZvStack,
} from '@zellvora/ng-layout';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [ZvPage, ZvHeader, ZvMain, ZvFooter, ZvContainer, ZvStack],
  template: `
    <zv-page>
      <zv-header sticky>
        <h1>My App</h1>
      </zv-header>

      <zv-main>
        <zv-container size="lg" padding="md">
          <zv-stack direction="vertical" gap="lg">
            <h2>Welcome</h2>
            <p>Your content here</p>
          </zv-stack>
        </zv-container>
      </zv-main>

      <zv-footer>
        <p>&copy; 2024</p>
      </zv-footer>
    </zv-page>
  `,
})
export class AppComponent {}

Responsive Breakpoints

| Breakpoint | Min Width | |-----------|-----------| | xxs | 0px | | xs | 320px | | sm | 640px | | md | 768px | | lg | 1024px | | xl | 1280px | | xxl | 1536px |

Theming

All components use CSS Custom Properties for theming. Set custom values on :root:

:root {
  --zv-layout-primary: #3b82f6;
  --zv-layout-secondary: #6b7280;
  --zv-layout-surface: #ffffff;
  --zv-layout-border: #e5e7eb;
  /* ... more variables */
}

License

MIT