Skip to content

layout-manager.md

Latest commit

 

History

History
548 lines (461 loc) · 19 KB

layout-manager.md

File metadata and controls

548 lines (461 loc) · 19 KB

Layout Manager, Dock Manager & Tile Manager

Part of the igniteui-angular-components skill hub. For app setup, providers, and import patterns — see setup.md.

Contents

Layout Manager Directives

Docs: Layout Manager

The Layout Manager is a pair of Angular directives (igxLayout / igxFlex) that wrap CSS Flexbox. Apply igxLayout to any container to control its children's flow; apply igxFlex to individual children to control their flex properties.

import { IgxLayoutDirective, IgxFlexDirective } from 'igniteui-angular/directives';
<!-- Basic row layout -->
<div igxLayout igxLayoutDir="row" igxLayoutJustify="space-between">
  <div igxFlex>Item 1</div>
  <div igxFlex>Item 2</div>
  <div igxFlex>Item 3</div>
</div>

Common Layout Patterns

App Shell (Sidebar + Content)

<div igxLayout igxLayoutDir="row" style="height: 100vh;">

  <!-- Sidebar column -->
  <div igxFlex igxFlexGrow="0" igxFlexShrink="0" igxFlexBasis="240px"
       igxLayout igxLayoutDir="column" class="sidebar">
    <div igxFlex>Nav item 1</div>
    <div igxFlex>Nav item 2</div>
  </div>

  <!-- Main content column -->
  <div igxFlex igxLayout igxLayoutDir="column" class="main">
    <div igxFlex igxFlexGrow="0" class="header">Header</div>
    <div igxFlex class="body">
      <!-- Nested row -->
      <div igxLayout igxLayoutDir="row">
        <div igxFlex>Col 1</div>
        <div igxFlex>Col 2</div>
        <div igxFlex>Col 3</div>
      </div>
    </div>
    <div igxFlex igxFlexGrow="0" class="footer">Footer</div>
  </div>

</div>

Centered Content

<div igxLayout igxLayoutDir="row" igxLayoutJustify="center" igxLayoutItemAlign="center"
     style="height: 100vh;">
  <div igxFlex igxFlexGrow="0">Centered content</div>
</div>

Wrapping Tiles

<div igxLayout igxLayoutDir="row" igxLayoutWrap="wrap" igxLayoutJustify="flex-start">
  @for (item of items; track item.id) {
    <div igxFlex igxFlexBasis="200px" igxFlexGrow="0" class="tile">
      {{ item.title }}
    </div>
  }
</div>

igxLayout Directive Inputs

Input Values Default Description
igxLayoutDir 'row' | 'column' 'row' Flex direction
igxLayoutReverse true | false false Reverse flow order
igxLayoutWrap 'nowrap' | 'wrap' | 'wrap-reverse' 'nowrap' Child wrapping
igxLayoutJustify 'flex-start' | 'center' | 'flex-end' | 'space-between' | 'space-around' 'flex-start' Main axis alignment
igxLayoutItemAlign 'flex-start' | 'center' | 'flex-end' | 'stretch' | 'baseline' 'stretch' Cross axis alignment

igxFlex Directive Inputs

Input Type Default Description
igxFlexGrow number 1 How much the element grows to fill space
igxFlexShrink number 1 How much the element shrinks when space is limited
igxFlexBasis string 'auto' Initial main-axis size (e.g., '200px', '30%')
igxFlexOrder number 0 Visual order among siblings

Key Rules for Layout Manager

  • igxLayout affects its immediate children only — nest multiple igxLayout containers for deeper control
  • Combine igxLayoutDir="column" on the outer container with igxFlex on children to create page shells
  • igxFlexGrow="0" on headers/footers/sidebars prevents them from stretching; leave it at 1 (default) for the main content area
  • This is a thin CSS Flexbox wrapper — the container element gets display: flex applied

Dock Manager

Docs: Dock Manager (Angular) Full API Docs: Dock Manager Web Component

The Dock Manager is a separate package (igniteui-dockmanager) and is implemented as a Web Component (<igc-dockmanager>). It provides IDE-style dockable, resizable, floating, and tabbed pane layouts. It is a premium (licensed) component.

Installation

npm install igniteui-dockmanager

Setup

Because Dock Manager is a Web Component, it requires two one-time setup steps:

1. Register custom elements — main.ts:

import { defineCustomElements } from 'igniteui-dockmanager/loader';

// Must be called before bootstrapApplication
defineCustomElements();

2. Add CUSTOM_ELEMENTS_SCHEMA to every standalone component that uses <igc-dockmanager>:

import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

@Component({
  selector: 'app-dock-manager',
  templateUrl: './dock-manager.component.html',
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class DockManagerComponent { ... }

Basic Usage

import { ChangeDetectionStrategy, Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import {
  IgcDockManagerLayout,
  IgcDockManagerPaneType,
  IgcSplitPaneOrientation
} from 'igniteui-dockmanager';

@Component({
  selector: 'app-dock-manager',
  templateUrl: './dock-manager.component.html',
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class DockManagerComponent {
  layout: IgcDockManagerLayout = {
    rootPane: {
      type: IgcDockManagerPaneType.splitPane,
      orientation: IgcSplitPaneOrientation.horizontal,
      panes: [
        {
          type: IgcDockManagerPaneType.contentPane,
          contentId: 'sidebar',
          header: 'Explorer'
        },
        {
          type: IgcDockManagerPaneType.documentHost,
          rootPane: {
            type: IgcDockManagerPaneType.splitPane,
            orientation: IgcSplitPaneOrientation.horizontal,
            allowEmpty: true,
            panes: [
              {
                type: IgcDockManagerPaneType.tabGroupPane,
                panes: [
                  {
                    type: IgcDockManagerPaneType.contentPane,
                    header: 'File 1',
                    contentId: 'doc1',
                    documentOnly: true
                  },
                  {
                    type: IgcDockManagerPaneType.contentPane,
                    header: 'File 2',
                    contentId: 'doc2',
                    documentOnly: true
                  }
                ]
              }
            ]
          }
        },
        {
          type: IgcDockManagerPaneType.splitPane,
          orientation: IgcSplitPaneOrientation.vertical,
          size: 280,
          panes: [
            {
              type: IgcDockManagerPaneType.contentPane,
              contentId: 'properties',
              header: 'Properties'
            },
            {
              type: IgcDockManagerPaneType.contentPane,
              contentId: 'output',
              header: 'Output',
              isPinned: false  // starts unpinned (auto-hidden)
            }
          ]
        }
      ]
    },
    floatingPanes: [
      {
        type: IgcDockManagerPaneType.splitPane,
        orientation: IgcSplitPaneOrientation.horizontal,
        floatingWidth: 300,
        floatingHeight: 200,
        floatingLocation: { x: 200, y: 150 },
        panes: [
          {
            type: IgcDockManagerPaneType.contentPane,
            contentId: 'search',
            header: 'Search'
          }
        ]
      }
    ]
  };
}
<!-- Each slot value matches a contentId in the layout -->
<igc-dockmanager [layout]="layout" style="height: 100vh; display: block;">
  <div slot="sidebar">File explorer content</div>
  <div slot="doc1">Document 1 content</div>
  <div slot="doc2">Document 2 content</div>
  <div slot="properties">Properties panel</div>
  <div slot="output">Output panel</div>
  <div slot="search">Search panel</div>
</igc-dockmanager>

Full Example (from user-provided code)

import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import {
  IgcDockManagerLayout,
  IgcDockManagerPaneType,
  IgcSplitPaneOrientation
} from 'igniteui-dockmanager';

@Component({
  selector: 'app-dock-manager',
  templateUrl: './dock-manager.component.html',
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class DockManagerComponent {
  layout: IgcDockManagerLayout = {
    rootPane: {
      type: IgcDockManagerPaneType.splitPane,
      orientation: IgcSplitPaneOrientation.horizontal,
      panes: [
        {
          type: IgcDockManagerPaneType.splitPane,
          orientation: IgcSplitPaneOrientation.vertical,
          panes: [
            { type: IgcDockManagerPaneType.contentPane, contentId: 'content1', header: 'Content Pane 1' },
            { type: IgcDockManagerPaneType.contentPane, contentId: 'content2', header: 'Unpinned Pane 1', isPinned: false }
          ]
        },
        {
          type: IgcDockManagerPaneType.splitPane,
          orientation: IgcSplitPaneOrientation.vertical,
          size: 200,
          panes: [
            {
              type: IgcDockManagerPaneType.documentHost,
              size: 200,
              rootPane: {
                type: IgcDockManagerPaneType.splitPane,
                orientation: IgcSplitPaneOrientation.horizontal,
                allowEmpty: true,
                panes: [
                  {
                    type: IgcDockManagerPaneType.tabGroupPane,
                    panes: [
                      { type: IgcDockManagerPaneType.contentPane, header: 'Document 1', contentId: 'content3', documentOnly: true },
                      { type: IgcDockManagerPaneType.contentPane, header: 'Document 2', contentId: 'content4', documentOnly: true }
                    ]
                  }
                ]
              }
            },
            { type: IgcDockManagerPaneType.contentPane, contentId: 'content5', header: 'Unpinned Pane 2', isPinned: false }
          ]
        },
        {
          type: IgcDockManagerPaneType.splitPane,
          orientation: IgcSplitPaneOrientation.vertical,
          panes: [
            {
              type: IgcDockManagerPaneType.tabGroupPane,
              size: 200,
              panes: [
                { type: IgcDockManagerPaneType.contentPane, contentId: 'content6', header: 'Tab 1' },
                { type: IgcDockManagerPaneType.contentPane, contentId: 'content7', header: 'Tab 2' },
                { type: IgcDockManagerPaneType.contentPane, contentId: 'content8', header: 'Tab 3' },
                { type: IgcDockManagerPaneType.contentPane, contentId: 'content9', header: 'Tab 4' },
                { type: IgcDockManagerPaneType.contentPane, contentId: 'content10', header: 'Tab 5' }
              ]
            },
            { type: IgcDockManagerPaneType.contentPane, contentId: 'content11', header: 'Content Pane 2' }
          ]
        }
      ]
    },
    floatingPanes: [
      {
        type: IgcDockManagerPaneType.splitPane,
        orientation: IgcSplitPaneOrientation.horizontal,
        floatingHeight: 150,
        floatingWidth: 250,
        floatingLocation: { x: 300, y: 200 },
        panes: [
          { type: IgcDockManagerPaneType.contentPane, contentId: 'content12', header: 'Floating Pane' }
        ]
      }
    ]
  };
}
<igc-dockmanager [layout]="layout" style="height: 600px;">
  <div slot="content1" class="dockManagerContent">Content 1</div>
  <div slot="content2" class="dockManagerContent">Content 2</div>
  <div slot="content3" class="dockManagerContent">Content 3</div>
  <div slot="content4" class="dockManagerContent">Content 4</div>
  <div slot="content5" class="dockManagerContent">Content 5</div>
  <div slot="content6" class="dockManagerContent">Content 6</div>
  <div slot="content7" class="dockManagerContent">Content 7</div>
  <div slot="content8" class="dockManagerContent">Content 8</div>
  <div slot="content9" class="dockManagerContent">Content 9</div>
  <div slot="content10" class="dockManagerContent">Content 10</div>
  <div slot="content11" class="dockManagerContent">Content 11</div>
  <div slot="content12" class="dockManagerContent">Content 12</div>
</igc-dockmanager>

Pane Types

IgcDockManagerPaneType Purpose
splitPane Splits space horizontally or vertically between child panes
contentPane A single leaf pane that renders a slotted element via contentId
tabGroupPane Groups multiple contentPane children as tabs
documentHost A special area for documentOnly: true panes (like an editor area)

IgcSplitPaneOrientation

Value Layout
horizontal Children placed left-to-right
vertical Children placed top-to-bottom

Key contentPane Properties

Property Type Description
contentId string Matches the slot attribute on the rendered HTML element
header string Tab/title bar label
isPinned boolean false = auto-hidden (collapsed to edge); default true
documentOnly boolean Restricts pane to documentHost areas only
size number Relative size within parent split
allowClose boolean Show close button (default true)
allowPinning boolean Allow user to pin/unpin (default true)
allowFloating boolean Allow user to float the pane (default true)

Key splitPane / floating pane Properties

Property Type Description
orientation IgcSplitPaneOrientation horizontal or vertical
size number Relative size in the parent split
allowEmpty boolean Allow pane to remain when all children are closed
floatingWidth number Initial width of floating pane (px)
floatingHeight number Initial height of floating pane (px)
floatingLocation {x, y} Initial top-left corner position of floating pane

Key Rules for Dock Manager

  1. Separate package — igniteui-dockmanager is installed independently of igniteui-angular
  2. Call defineCustomElements() in main.ts before bootstrapApplication — without this the <igc-dockmanager> element renders as an unknown element
  3. Add CUSTOM_ELEMENTS_SCHEMA to every standalone component or NgModule that uses <igc-dockmanager>
  4. Slot names = contentId values — the slot="..." attribute on child elements must exactly match the contentId string in the layout
  5. Premium component — requires a licensed Ignite UI subscription; verify availability before recommending to users
  6. Not part of igniteui-angular — do not import from igniteui-angular entry points; all Dock Manager types come from igniteui-dockmanager

Tile Manager

Docs: Tile Manager (Angular)
Full API Docs: Tile Manager Web Component

The Tile Manager is a layout Web Component that displays content in individual tiles users can rearrange and resize. It is implemented as an igc-tile-manager container with one or more igc-tile children.

Installation

npm install igniteui-webcomponents

Setup

Register the Tile Manager Web Component before bootstrap:

import { defineComponents, IgcTileManagerComponent } from 'igniteui-webcomponents';

defineComponents(IgcTileManagerComponent);

Add CUSTOM_ELEMENTS_SCHEMA to any component using <igc-tile-manager>:

import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

@Component({
  selector: 'app-tile-manager',
  templateUrl: './tile-manager.component.html',
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class TileManagerComponent { }

Basic Usage

<igc-tile-manager>
  <igc-tile>
    <span slot="title">Tile 1 header</span>
    <p>Tile 1 content</p>
  </igc-tile>
  <igc-tile>
    <span slot="title">Tile 2 header</span>
    <p>Tile 2 content</p>
  </igc-tile>
</igc-tile-manager>

Layout Properties

Key igc-tile-manager properties:

  • column-count: number of grid columns; if omitted or <1, as many columns as fit with a minimum width (200px) are created.
  • gap: space between tiles (e.g., "20px", "1rem").
  • min-column-width: minimum width per column (e.g., "200px").
  • min-row-height: minimum height per row (e.g., "150px").
<igc-tile-manager
  column-count="2"
  gap="20px"
  min-column-width="220px"
  min-row-height="160px">
  <igc-tile>
    <span slot="title">Tile 1 header</span>
    <p>Tile 1 content</p>
  </igc-tile>
  <igc-tile>
    <span slot="title">Tile 2 header</span>
    <p>Tile 2 content</p>
  </igc-tile>
</igc-tile-manager>

Tile Properties

Each igc-tile can configure its own size and behavior:

  • row-start / col-start: starting row/column for the tile
  • row-span / col-span: how many rows/columns the tile spans
  • disable-resize: prevents the tile from being resized
  • disable-maximize / disable-fullscreen: hide default header actions
<igc-tile-manager>
  <igc-tile col-span="2" disable-resize>
    <span slot="title">Wide tile</span>
    <p>Content</p>
  </igc-tile>
  <igc-tile row-span="2">
    <span slot="title">Tall tile</span>
    <p>Content that spans two rows.</p>
  </igc-tile>
</igc-tile-manager>

Resizing & Dragging

  • Resizing is controlled by the resize-mode property on igc-tile-manager ("none", "hover", "always").
  • Reordering is enabled via the drag-mode property ("tile" or "tile-header").
<igc-tile-manager resize-mode="hover" drag-mode="tile-header">
  <igc-tile>
    <span slot="title">Tile 1</span>
    <p>Content</p>
  </igc-tile>
  <igc-tile>
    <span slot="title">Tile 2</span>
    <p>Content</p>
  </igc-tile>
</igc-tile-manager>

Key Rules for Tile Manager

  1. Web Component package — Tile Manager ships via igniteui-webcomponents, not igniteui-angular.
  2. Register components — call defineComponents(IgcTileManagerComponent) once before using <igc-tile-manager>.
  3. Use CUSTOM_ELEMENTS_SCHEMA on Angular components that host the Tile Manager.
  4. Use slots — header content goes into slot="title"; additional actions and custom adorners use the documented slots (fullscreen-action, maximize-action, actions, side-adorner, corner-adorner, bottom-adorner).
  5. Treat it as a layout container — use Tile Manager when users need interactive, resizable and re-orderable tiles, not tabular data (use grids for that).

See Also

  • setup.md — App providers, architecture, all entry points
  • layout.md — Tabs, Stepper, Accordion, Splitter, Navigation Drawer
  • data-display.md — List, Tree, Card and other display components
  • feedback.md — Dialog, Snackbar, Toast, Banner
  • directives.md — Button, Ripple, Tooltip, Drag and Drop