Resizable

Resize element.

  • Support preview
  • Support Grids System
  • Support for custom handles and preview styles

Examples

content

Basic Usage.

expand codeexpand code
import { Component } from '@angular/core';

@Component({
  selector: 'nz-demo-resizable-basic',
  template: `
    <div
      class="box"
      nz-resizable
      [nzMaxWidth]="600"
      [nzMinWidth]="80"
      [nzMaxHeight]="200"
      [nzMinHeight]="80"
      [style.height.px]="height"
      [style.width.px]="width"
      (nzResize)="onResize($event)"
    >
      <nz-resize-handles></nz-resize-handles>
      content
    </div>
  `,
  styles: [
    `
      :host {
        display: block;
        height: 200px;
      }
      .box {
        display: flex;
        align-items: center;
        justify-content: center;
        background: #eee;
        border: 1px solid #ddd;
      }
    `
  ]
})
export class NzDemoResizableBasicComponent {
  width = 400;
  height = 200;
  id = -1;

  onResize({ width, height }: { width: number; height: number }): void {
    cancelAnimationFrame(this.id);
    this.id = requestAnimationFrame(() => {
      this.width = width;
      this.height = height;
    });
  }
}
content

Customize Handle。

expand codeexpand code
import { Component } from '@angular/core';

@Component({
  selector: 'nz-demo-resizable-customize',
  template: `
    <div class="box" nz-resizable (nzResize)="onResize($event)" [style.height.px]="height" [style.width.px]="width">
      content
      <nz-resize-handle nzDirection="bottomRight">
        <i class="bottom-right" nz-icon nzType="caret-up" nzTheme="outline" [nzRotate]="135"></i>
      </nz-resize-handle>
      <nz-resize-handle nzDirection="right">
        <div class="right-wrap">
          <i class="right" nz-icon nzType="more" nzTheme="outline"></i>
        </div>
      </nz-resize-handle>
    </div>
  `,
  styles: [
    `
      :host {
        display: block;
        height: 200px;
      }

      .box {
        display: flex;
        align-items: center;
        justify-content: center;
        background: #eee;
        border: 1px solid #ddd;
      }

      .bottom-right {
        position: absolute;
        top: 0;
        left: 0;
      }

      .right-wrap {
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .right {
        background: #fff;
        border: 1px solid #ddd;
        text-align: center;
        font-size: 12px;
        height: 20px;
        line-height: 20px;
      }
    `
  ]
})
export class NzDemoResizableCustomizeComponent {
  width = 400;
  height = 200;
  id = -1;

  onResize({ width, height }: { width: number; height: number }): void {
    cancelAnimationFrame(this.id);
    this.id = requestAnimationFrame(() => {
      this.width = width;
      this.height = height;
    });
  }
}
content

Lock the resize aspect ratio.

expand codeexpand code
import { Component } from '@angular/core';

@Component({
  selector: 'nz-demo-resizable-lock-aspect-ratio',
  template: `
    <div
      class="box"
      nz-resizable
      nzLockAspectRatio
      (nzResize)="onResize($event)"
      [style.height.px]="height"
      [style.width.px]="width"
    >
      <nz-resize-handles></nz-resize-handles>
      content
    </div>
  `,
  styles: [
    `
      :host {
        display: block;
        height: 200px;
      }
      .box {
        display: flex;
        align-items: center;
        justify-content: center;
        background: #eee;
        border: 1px solid #ddd;
      }
    `
  ]
})
export class NzDemoResizableLockAspectRatioComponent {
  width = 400;
  height = 200;
  id = -1;

  onResize({ width, height }: { width: number; height: number }): void {
    cancelAnimationFrame(this.id);
    this.id = requestAnimationFrame(() => {
      this.width = width;
      this.height = height;
    });
  }
}
content

Preview before apply size.

expand codeexpand code
import { Component } from '@angular/core';

@Component({
  selector: 'nz-demo-resizable-preview',
  template: `
    <div
      class="box"
      nz-resizable
      nzPreview
      (nzResizeEnd)="onResize($event)"
      [style.height.px]="height"
      [style.width.px]="width"
    >
      <nz-resize-handles></nz-resize-handles>
      content
    </div>
  `,
  styles: [
    `
      :host {
        display: block;
        height: 200px;
      }
      .box {
        display: flex;
        align-items: center;
        justify-content: center;
        background: #eee;
        border: 1px solid #ddd;
      }
    `
  ]
})
export class NzDemoResizablePreviewComponent {
  width = 400;
  height = 200;

  onResize({ width, height }: { width: number; height: number }): void {
    this.width = width;
    this.height = height;
  }
}
col-8
col-16

Resize with grid.

expand codeexpand code
import { Component } from '@angular/core';

@Component({
  selector: 'nz-demo-resizable-grid',
  template: `
    <div nz-row>
      <div
        class="col"
        nz-col
        nz-resizable
        (nzResize)="onResize($event)"
        [nzMinColumn]="3"
        [nzMaxColumn]="20"
        [nzGridColumnCount]="24"
        [nzSpan]="col"
      >
        <nz-resize-handles [nzDirections]="['right']"></nz-resize-handles>
        col-{{ col }}
      </div>
      <div class="col right" nz-col [nzSpan]="24 - col">col-{{ 24 - col }}</div>
    </div>
  `,
  styles: [
    `
      .col {
        padding: 16px 0;
        text-align: center;
        border-radius: 0;
        min-height: 30px;
        margin-top: 8px;
        margin-bottom: 8px;
        background: rgba(0, 160, 233, 0.7);
        color: #fff;
      }

      .col.right {
        background: #00a0e9;
      }
    `
  ]
})
export class NzDemoResizableGridComponent {
  col = 8;
  id = -1;

  onResize({ col }: { col: number }): void {
    cancelAnimationFrame(this.id);
    this.id = requestAnimationFrame(() => {
      this.col = col;
    });
  }
}
Header
Sider
Content 1
Content 2

Layout with resizable.

expand codeexpand code
import { Component } from '@angular/core';

@Component({
  selector: 'nz-demo-resizable-layout',
  template: `
    <nz-layout>
      <nz-header>Header</nz-header>
      <nz-layout>
        <nz-sider
          [nzWidth]="siderWidth"
          nz-resizable
          [nzMinWidth]="50"
          [nzMaxWidth]="300"
          (nzResize)="onSideResize($event)"
        >
          <nz-resize-handle nzDirection="right">
            <div class="sider-resize-line"></div>
          </nz-resize-handle>
          Sider
        </nz-sider>
        <nz-content>
          <div
            nz-resizable
            class="resizable-box"
            [style.height.px]="contentHeight"
            [nzMaxHeight]="300"
            [nzMinHeight]="50"
            (nzResize)="onContentResize($event)"
          >
            <nz-resize-handle nzDirection="bottom">
              <div class="content-resize-line"></div>
            </nz-resize-handle>
            Content 1
          </div>
          <div>
            Content 2
          </div>
        </nz-content>
      </nz-layout>
    </nz-layout>
  `,
  styles: [
    `
      nz-header {
        background: #7dbcea;
        color: #fff;
      }
      nz-sider {
        background: #3ba0e9;
        color: #fff;
      }

      nz-sider.nz-resizable-resizing {
        transition: none;
      }

      nz-content {
        display: flex;
        flex-direction: column;
        background: rgba(16, 142, 233, 1);
        height: 350px;
        color: #fff;
      }

      nz-content > div {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 1;
      }

      nz-content .resizable-box {
        flex: none;
      }

      nz-content,
      nz-header,
      ::ng-deep nz-sider > .ant-layout-sider-children {
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .sider-resize-line {
        height: 100%;
        width: 5px;
        border-right: 1px solid #e8e8e8;
      }

      .content-resize-line {
        width: 100%;
        height: 5px;
        border-bottom: 1px solid #e8e8e8;
      }
    `
  ]
})
export class NzDemoResizableLayoutComponent {
  siderWidth = 120;
  contentHeight = 200;
  id = -1;

  onSideResize({ width }: { width: number }): void {
    cancelAnimationFrame(this.id);
    this.id = requestAnimationFrame(() => {
      this.siderWidth = width;
    });
  }

  onContentResize({ height }: { height: number }): void {
    cancelAnimationFrame(this.id);
    this.id = requestAnimationFrame(() => {
      this.contentHeight = height;
    });
  }
}

Resize the drawer width.

expand codeexpand code
import { Component } from '@angular/core';

@Component({
  selector: 'nz-demo-resizable-drawer',
  template: `
    <button nz-button nzType="primary" (click)="open()">Open</button>
    <nz-drawer
      [nzClosable]="false"
      [nzVisible]="visible"
      [nzBodyStyle]="{
        padding: 0,
        height: 'calc(100vh - 55px)'
      }"
      [nzWidth]="width"
      nzPlacement="left"
      nzTitle="Resizable Drawer"
      (nzOnClose)="close()"
    >
      <div
        *ngIf="visible"
        class="drawer-body"
        nz-resizable
        nzBounds="window"
        [nzMinWidth]="256"
        (nzResize)="onResize($event)"
      >
        <nz-resize-handles [nzDirections]="['right']"></nz-resize-handles>
        <p>Some contents...</p>
        <p>Some contents...</p>
        <p>Some contents...</p>
      </div>
    </nz-drawer>
  `,
  styles: [
    `
      .drawer-body {
        width: 100%;
        height: 100%;
        padding: 24px;
      }
    `
  ]
})
export class NzDemoResizableDrawerComponent {
  width = 256;
  visible = false;
  id = -1;

  onResize({ width }: { width: number }): void {
    cancelAnimationFrame(this.id);
    this.id = requestAnimationFrame(() => {
      this.width = width;
    });
  }

  open(): void {
    this.visible = true;
  }

  close(): void {
    this.visible = false;
  }
}
Name
Age
Address
Actions
John Brown32New York No. 1 Lake Park-
Jim Green42London No. 1 Lake Park-
Joe Black32Sidney No. 1 Lake Park-

Resize the table header.

expand codeexpand code
import { Component } from '@angular/core';

@Component({
  selector: 'nz-demo-resizable-table',
  template: `
    <nz-table #basicTable [nzData]="listOfData">
      <thead>
        <tr>
          <ng-container *ngFor="let col of cols">
            <th
              *ngIf="col.width"
              nz-resizable
              nzBounds="window"
              nzPreview
              [nzWidth]="col.width"
              [nzMaxWidth]="256"
              [nzMinWidth]="60"
              (nzResizeEnd)="onResize($event, col.title)"
            >
              {{ col.title }}
              <nz-resize-handle nzDirection="right">
                <div class="resize-trigger"></div>
              </nz-resize-handle>
            </th>
            <th *ngIf="!col.width">
              {{ col.title }}
            </th>
          </ng-container>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let data of basicTable.data">
          <td>{{ data.name }}</td>
          <td>{{ data.age }}</td>
          <td>{{ data.address }}</td>
          <td>-</td>
        </tr>
      </tbody>
    </nz-table>
  `,
  styles: [
    `
      .resize-trigger {
        width: 1px;
        height: 30px;
        margin-top: 12px;
        background: #e8e8e8;
      }
      .nz-resizable-preview {
        border-width: 0;
        border-right-width: 1px;
      }
    `
  ]
})
export class NzDemoResizableTableComponent {
  cols = [
    {
      title: 'Name',
      width: '180px'
    },
    {
      title: 'Age',
      width: '180px'
    },
    {
      title: 'Address',
      width: '200px'
    },
    {
      title: 'Actions'
    }
  ];

  listOfData = [
    {
      key: '1',
      name: 'John Brown',
      age: 32,
      address: 'New York No. 1 Lake Park'
    },
    {
      key: '2',
      name: 'Jim Green',
      age: 42,
      address: 'London No. 1 Lake Park'
    },
    {
      key: '3',
      name: 'Joe Black',
      age: 32,
      address: 'Sidney No. 1 Lake Park'
    }
  ];
  onResize({ width }: { width: number }, col: string): void {
    this.cols = this.cols.map(e => (e.title === col ? { ...e, width: `${width}px` } : e));
  }
}

API#

[nz-resizable]#

Resizable element the position attribute must be one of 'relative' | 'absolute' | 'fixed' |'sticky',default is 'relative'.

interface NzResizeEvent {
  width?: number;
  height?: number;
  col?: number;
  mouseEvent?: MouseEvent
}
PropertyDescriptionTypeDefault
[nzBounds]Specifies resize boundaries.'window' | 'parent' | ElementRef<HTMLElement>parent
[nzMaxHeight]Maximum height of resizable elementnumber-
[nzMaxWidth]Maximum width of resizable elementnumber-
[nzMinHeight]Minimum height of resizable elementnumber40
[nzMinWidth]Minimum width of resizable elementnumber40
[nzGridColumnCount]Number of columns(-1 is not grid)number-1
[nzMaxColumn]Maximum Columnnumber-
[nzMinColumn]Minimum Columnnumber-
[nzLockAspectRatio]Lock the aspect ratio based on the initial sizebooleanfalse
[nzPreview]Enable preview when resizingbooleanfalse
(nzResize)Calls when ResizingEventEmitter<NzResizeEvent>-
(nzResizeStart)Calls when resize startEventEmitter<NzResizeEvent>-
(nzResizeEnd)Calls when resize endEventEmitter<NzResizeEvent>-

nz-resize-handle#

Define handles and directions.

type NzResizeDirection = 'top' | 'right' | 'bottom' | 'left' | 'topRight' | 'bottomRight' | 'bottomLeft' | 'topLeft';
PropertyDescriptionTypeDefault
[nzDirection]Set the direction of resizableNzResizeDirection'bottomRight'

nz-resize-handles#

Simpler way to define handles.

const DEFAULT_RESIZE_DIRECTION: NzResizeDirection[] = ['bottomRight', 'topRight', 'bottomLeft', 'topLeft', 'bottom', 'right', 'top', 'left'];
PropertyDescriptionTypeDefault
[nzDirections]Allow directions of resizableNzResizeDirection[]DEFAULT_RESIZE_DIRECTION

Styling#

The Component styles only contain the necessary positional properties and simple styles, you can customize the style by overriding the following class.

  • .nz-resizable The nz-resizable component namespace
  • .nz-resizable-resizing This class name that is added to nz-resizable while resizing
  • .nz-resizable-preview The ghost element's class name when enable preview
  • .nz-resizable-handle-box-hover This class name that is added to nz-resize-handle while mouse hover on nz-resizable
  • .nz-resizable-handle The nz-resize-handle component namespace and directions class name
    • .nz-resizable-handle-top
    • .nz-resizable-handle-left
    • .nz-resizable-handle-bottom
    • .nz-resizable-handle-right
    • .nz-resizable-handle-topRight
    • .nz-resizable-handle-topLeft
    • .nz-resizable-handle-bottomRight
    • .nz-resizable-handle-bottomLeft
Resizable Drawer