Resizable

NG-ZORRO experiments are features that are released but not yet considered stable or production ready

Developers and users can opt-in into these features before they are fully released. But breaking changes may occur with any release.

Resize element.

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

When To Use#

When you want to resize elements.

Import Module#

import { NzResizableModule } from 'ng-zorro-antd/resizable';

Import Style#

@import 'node_modules/ng-zorro-antd/resizable/style/entry.less';

Examples

content
Basic Usage

Basic Usage.

expand codeexpand code
      Loading...
content
Customize

Customize Handle。

expand codeexpand code
      Loading...
content
Lock Aspect Ratio

Lock the resize aspect ratio.

expand codeexpand code
      Loading...
content
Preview

Preview before apply size.

expand codeexpand code
      Loading...
col-8
col-16
Grid

Resize with grid.

expand codeexpand code
      Loading...
Header
 Sider
Content 1
Content 2
Layout

Layout with resizable.

expand codeexpand code
      Loading...
Drawer

Resize the drawer width.

expand codeexpand code
      Loading...
Name
Age
Address
Actions
John Brown32New York No. 1 Lake Park-
Jim Green42London No. 1 Lake Park-
Joe Black32Sidney No. 1 Lake Park-
Table

Resize the table header.

expand codeexpand code
      Loading...

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;
  direction?: NzResizeDirection;
  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
[nzDisabled]Disable resizebooleanfalse
(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';
type NzCursorType = 'window' | 'grid';
PropertyDescriptionTypeDefault
[nzDirection]Set the direction of resizableNzResizeDirection'bottomRight'
[nzCursorType]Cursor type for handleNzCursorType'window'

nz-resize-handles#

Simpler way to define handles.

interface NzResizeHandleOption {
  direction: NzResizeDirection;
  cursorType: NzCursorType;
}
PropertyDescriptionTypeDefault
[nzDirections]Allow handle directions or handle options(NzResizeDirection | NzResizeHandleOption)[]ALL DIRECTIONS

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
  • .nz-resizable-handle-cursor-type Cursor type namespace for handle
    • .nz-resizable-handle-cursor-type-window
    • .nz-resizable-handle-cursor-type-grid
Resizable Drawer