Skip to content

layout.md

Latest commit

 

History

History
225 lines (185 loc) · 7.46 KB

layout.md

File metadata and controls

225 lines (185 loc) · 7.46 KB

Layout Components

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

Contents

Tabs

Docs: Tabs Component

import { IGX_TABS_DIRECTIVES } from 'igniteui-angular/tabs';
import { IgxIconComponent } from 'igniteui-angular/icon';
<igx-tabs [(selectedIndex)]="activeTab">
  <igx-tab-item>
    <igx-tab-header>
      <igx-icon igxTabHeaderIcon>info</igx-icon>
      <span igxTabHeaderLabel>Info</span>
    </igx-tab-header>
    <igx-tab-content>Content for Info tab</igx-tab-content>
  </igx-tab-item>
  <igx-tab-item>
    <igx-tab-header>
      <span igxTabHeaderLabel>Settings</span>
    </igx-tab-header>
    <igx-tab-content>Settings content</igx-tab-content>
  </igx-tab-item>
</igx-tabs>

Key inputs: [(selectedIndex)], [tabAlignment] ('start' | 'end' | 'center' | 'justify'), [disableAnimation].

Bottom Navigation

Docs: Bottom Navigation

import { IgxBottomNavComponent, IgxBottomNavItemComponent, IgxBottomNavHeaderComponent, IgxBottomNavContentComponent } from 'igniteui-angular/bottom-nav';
<igx-bottom-nav [(selectedIndex)]="activeNavItem">
  <igx-bottom-nav-item>
    <igx-bottom-nav-header>
      <igx-icon>home</igx-icon>
      <span>Home</span>
    </igx-bottom-nav-header>
    <igx-bottom-nav-content>Home content</igx-bottom-nav-content>
  </igx-bottom-nav-item>
  <igx-bottom-nav-item>
    <igx-bottom-nav-header>
      <igx-icon>settings</igx-icon>
      <span>Settings</span>
    </igx-bottom-nav-header>
    <igx-bottom-nav-content>Settings content</igx-bottom-nav-content>
  </igx-bottom-nav-item>
</igx-bottom-nav>

Stepper

Docs: Stepper Component

import { IGX_STEPPER_DIRECTIVES } from 'igniteui-angular/stepper';
<igx-stepper [linear]="true" [orientation]="'horizontal'">
  <igx-step [completed]="step1Done">
    <div igxStepTitle>Account</div>
    <div igxStepSubtitle>Create your account</div>
    <div igxStepContent>
      <!-- form fields -->
    </div>
  </igx-step>
  <igx-step [optional]="true">
    <div igxStepTitle>Profile</div>
    <div igxStepSubtitle>Optional step</div>
    <div igxStepContent>...</div>
  </igx-step>
  <igx-step>
    <div igxStepTitle>Confirm</div>
    <div igxStepContent>Review and submit</div>
  </igx-step>
</igx-stepper>

Key inputs: [linear], [orientation] ('horizontal' | 'vertical'), [stepType] ('indicator' | 'title' | 'full'), [animationType].

Events: (activeStepChanging), (activeStepChanged).

Programmatic navigation:

stepper = viewChild.required(IgxStepperComponent);

next() { this.stepper().next(); }
prev() { this.stepper().prev(); }
navigateTo(index: number) { this.stepper().navigateTo(index); }

Accordion

Docs: Accordion Component

import { IgxAccordionComponent } from 'igniteui-angular/accordion';
import { IGX_EXPANSION_PANEL_DIRECTIVES } from 'igniteui-angular/expansion-panel';
<igx-accordion [singleBranchExpand]="true">
  <igx-expansion-panel>
    <igx-expansion-panel-header>
      <igx-expansion-panel-title>Panel 1</igx-expansion-panel-title>
      <igx-expansion-panel-description>Subtitle text</igx-expansion-panel-description>
    </igx-expansion-panel-header>
    <igx-expansion-panel-body>
      Content for panel 1
    </igx-expansion-panel-body>
  </igx-expansion-panel>
  <igx-expansion-panel>
    <igx-expansion-panel-header>
      <igx-expansion-panel-title>Panel 2</igx-expansion-panel-title>
    </igx-expansion-panel-header>
    <igx-expansion-panel-body>Content for panel 2</igx-expansion-panel-body>
  </igx-expansion-panel>
</igx-accordion>

Standalone igx-expansion-panel (without accordion):

<igx-expansion-panel [(collapsed)]="isCollapsed">
  <igx-expansion-panel-header>
    <igx-expansion-panel-title>Settings</igx-expansion-panel-title>
  </igx-expansion-panel-header>
  <igx-expansion-panel-body>Content</igx-expansion-panel-body>
</igx-expansion-panel>

Splitter

Docs: Splitter Component

import { IgxSplitterComponent, IgxSplitterPaneComponent, SplitterType } from 'igniteui-angular/splitter';
<!-- Horizontal split (side by side) -->
<igx-splitter [type]="SplitterType.Horizontal" style="height: 400px">
  <igx-splitter-pane [size]="'30%'" [minSize]="'20%'">
    Left panel content
  </igx-splitter-pane>
  <igx-splitter-pane>
    Right panel content
  </igx-splitter-pane>
</igx-splitter>

<!-- Vertical split (top/bottom) -->
<igx-splitter [type]="SplitterType.Vertical" style="height: 600px">
  <igx-splitter-pane [size]="'50%'">Top panel</igx-splitter-pane>
  <igx-splitter-pane>Bottom panel</igx-splitter-pane>
</igx-splitter>

Navigation Drawer

Docs: Navigation Drawer

import { IgxNavigationDrawerComponent, IgxNavDrawerItemDirective, IgxNavDrawerTemplateDirective, IgxNavDrawerMiniTemplateDirective } from 'igniteui-angular/navigation-drawer';
import { IgxIconComponent } from 'igniteui-angular/icon';
import { IgxRippleDirective } from 'igniteui-angular/directives';
<igx-nav-drawer #drawer [isOpen]="drawerOpen" [pinThreshold]="1024" [pin]="isDesktop">
  <ng-template igxDrawer>
    <nav>
      <span igxDrawerItem [isHeader]="true">Navigation</span>
      <span igxDrawerItem igxRipple [active]="activeRoute === 'home'" routerLink="/home">
        <igx-icon>home</igx-icon>
        <span>Home</span>
      </span>
      <span igxDrawerItem igxRipple [active]="activeRoute === 'settings'" routerLink="/settings">
        <igx-icon>settings</igx-icon>
        <span>Settings</span>
      </span>
    </nav>
  </ng-template>
  <!-- Mini mode (icons only, shown when drawer is collapsed but pinned) -->
  <ng-template igxDrawerMini>
    <span igxDrawerItem igxRipple routerLink="/home"><igx-icon>home</igx-icon></span>
    <span igxDrawerItem igxRipple routerLink="/settings"><igx-icon>settings</igx-icon></span>
  </ng-template>
</igx-nav-drawer>

<button igxButton (click)="drawer.toggle()">Toggle Menu</button>

Key inputs: [isOpen], [pin] (dock to content), [pinThreshold] (auto-pin at viewport width), [width], [miniWidth].

Events: (opened), (closed), (pinChange).

AGENT INSTRUCTION: The Navigation Drawer uses the Ignite UI overlay/animation system — ensure provideAnimations() is in app.config.ts.

See Also

  • setup.md — App providers, architecture, all entry points
  • form-controls.md — Input Group, Combo, Select, Date/Time Pickers, Calendar, Checkbox, Radio, Switch, Slider
  • data-display.md — List, Tree, Card and other display components
  • feedback.md — Dialog, Snackbar, Toast, Banner
  • directives.md — Button, Ripple, Tooltip, Drag and Drop