@kit-ng-ui/layout

Page scaffolding for Kit UI. Mirrors ant-design's <Layout> / <Layout.Header> / <Layout.Sider> / <Layout.Content> / <Layout.Footer> API on Angular standalone + signals.

Install

pnpm add @kit-ng-ui/layout @kit-ng-ui/core

Styles

@use '@kit-ng-ui/core/styles' as *;
@use '@kit-ng-ui/layout/styles' as layout;

Use

import {
  KitLayoutComponent,
  KitHeaderComponent,
  KitSiderComponent,
  KitContentComponent,
  KitFooterComponent,
} from '@kit-ng-ui/layout';

@Component({
  standalone: true,
  imports: [
    KitLayoutComponent,
    KitHeaderComponent,
    KitSiderComponent,
    KitContentComponent,
    KitFooterComponent,
  ],
  template: `
    <kit-layout style="min-height: 600px">
      <kit-header>Chim Lợn</kit-header>
      <kit-layout>
        <kit-sider collapsible [(collapsed)]="collapsed">
          <nav>...</nav>
        </kit-sider>
        <kit-content>...</kit-content>
      </kit-layout>
      <kit-footer>© 2026 Chim Lợn</kit-footer>
    </kit-layout>
  `,
})
export class Demo {
  collapsed = signal(false);
}

API

<kit-layout>

Container that auto-flips direction: stacks children vertically by default, and switches to row layout when a direct child <kit-sider> is present. Nest layouts to mix both axes.

<kit-header>, <kit-content>, <kit-footer>

Semantic shells (<header> / <main> / <footer>) styled to ant-design defaults. No inputs — project content directly.

<kit-sider>

| Input | Type | Default | Description | | ---------------- | -------------------------------------------------------------- | --------- | -------------------------------------------------------------------------- | | width | number | 200 | Expanded width (px). | | collapsedWidth | number | 80 | Width when collapsed (px). Set to 0 for full collapse. | | collapsible | boolean | false | Show the default toggle trigger at the bottom of the sider. | | collapsed | boolean (model) | false | Two-way bindable collapsed state. | | theme | 'light' \| 'dark' | 'light' | Sider color scheme. | | breakpoint | 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'xxl' \| null | null | Auto-collapse when the viewport drops below this breakpoint. | | hideTrigger | boolean | false | Hide the default trigger button. Project [kitSiderTrigger] for a custom one. |

| Output | Type | Description | | ----------------- | ----------------------------------------------------- | ------------------------------------------------------------------------ | | collapse | EventEmitter<boolean> | Emits with the new collapsed value whenever it flips (toggle / breakpoint). | | breakpointMatch | EventEmitter<boolean> | Emits true when the viewport falls below the configured breakpoint. | | collapsedChange | (generated by model()) | Two-way binding companion to [(collapsed)]. |

Behavior notes

• A <kit-layout> becomes horizontal only when it has a direct sider child — wrap nested layouts in their own <kit-layout> to keep the axis predictable.
• The sider participates in the parent flex flow via flex: 0 0 {width}px so it neither grows nor shrinks. The collapse animation transitions both width and the flex shorthand.
• Trigger projection: <button kitSiderTrigger>…</button> swaps the default chevron with your own content while preserving the wrapper button's a11y attributes.
• Server-side rendering: matchMedia is gated on document.defaultView so the sider safely no-ops outside a browser.