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;
  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';
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