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.

expand codeexpand code
Loading...
content

Customize Handle。

expand codeexpand code
Loading...
content

Lock the resize aspect ratio.

expand codeexpand code
Loading...
content

Preview before apply size.

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

Resize with grid.

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

Layout with resizable.

expand codeexpand code
Loading...

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-
  • 1
  • 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