Resizable

Resize element.
Import
Source components/resizable
Docs Edit this page

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.

When To Use#

When you want to resize elements.

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

Import Style#

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

Examples

content
Basic Usage

Basic Usage.

      Loading...
content
Customize

Customize Handle。

      Loading...
content
Lock Aspect Ratio

Lock the resize aspect ratio.

      Loading...
content
Preview

Preview before apply size.

      Loading...
col-8
col-16
Grid

Resize with grid.

      Loading...
Header
 Sider
Content 1
Content 2
Layout

Layout with resizable.

      Loading...
Drawer

Resize the drawer width.

      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.

      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