Resizable调整尺寸

NG-ZORRO 实验性功能是指已发布但不稳定或者还未准备好用于生产环境的功能。

开发者或用户可以选择在正式发布前使用这些功能，但是每次发布版本时都可能存在 breaking changes。

调整元素尺寸。

  • 支持释放前预览提高性能
  • 支持栅格系统
  • 支持自定义调整手柄和预览样式

何时使用#

当你想调整元素尺寸时.

引入模块#

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

引入样式#

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

代码演示

content
基本使用

基本使用。

expand codeexpand code
      加载中
content
自定义

自定义拖拽柄样式。

expand codeexpand code
      加载中
content
锁定比例

锁定宽高比。

expand codeexpand code
      加载中
content
预览

在应用尺寸前预览。

expand codeexpand code
      加载中
col-8
col-16
栅格

配合栅格使用

expand codeexpand code
      加载中
Header
 Sider
Content 1
Content 2
布局

调整布局尺寸。

expand codeexpand code
      加载中
抽屉

调整抽屉宽度。

expand codeexpand code
      加载中
Name
Age
Address
Actions
John Brown32New York No. 1 Lake Park-
Jim Green42London No. 1 Lake Park-
Joe Black32Sidney No. 1 Lake Park-
表格

调整表头宽度。

expand codeexpand code
      加载中

API#

[nz-resizable]#

声明在需要调整尺寸的元素上，元素 position 属性必须为 'relative' | 'absolute' | 'fixed' |'sticky' 之一，默认会自动设置为 'relative'。

interface NzResizeEvent {
  width?: number;
  height?: number;
  col?: number;
  direction?: NzResizeDirection;
  mouseEvent?: MouseEvent;
}
参数说明类型默认值
[nzBounds]调整尺寸的边界'window' | 'parent' | ElementRef<HTMLElement>parent
[nzMaxHeight]最大高度(超过边界部分忽略)number-
[nzMaxWidth]最大宽度(超过边界部分忽略)number-
[nzMinHeight]最小高度number40
[nzMinWidth]最小宽度number40
[nzGridColumnCount]栅格列数(-1 为不栅格)number-1
[nzMaxColumn]栅格最大列数number-
[nzMinColumn]栅格最小列数number-
[nzLockAspectRatio]锁定宽高比booleanfalse
[nzPreview]开启预览booleanfalse
[nzDisabled]禁用booleanfalse
(nzResize)调整尺寸时的事件EventEmitter<NzResizeEvent>-
(nzResizeStart)开始调整尺寸时的事件EventEmitter<NzResizeEvent>-
(nzResizeEnd)结束调整尺寸时的事件EventEmitter<NzResizeEvent>-

nz-resize-handle#

定义调整手柄及方向。

type NzResizeDirection = 'top' | 'right' | 'bottom' | 'left' | 'topRight' | 'bottomRight' | 'bottomLeft' | 'topLeft';
type NzCursorType = 'window' | 'grid';
参数说明类型默认值
[nzDirection]调整方向NzResizeDirection'bottomRight'
[nzCursorType]手柄的光标类型NzCursorType'window'

nz-resize-handles#

定义调整手柄的快捷组件。

interface NzResizeHandleOption {
  direction: NzResizeDirection;
  cursorType: NzCursorType;
}
参数说明类型默认值
[nzDirections]需要的手柄方向或手柄选项(NzResizeDirection | NzResizeHandleOption)[]所有方向

样式#

组件样式只包含了必要的位置属性和简单的样式，你可以通过覆写下列类名自定义样式。

  • .nz-resizablenz-resizable 组件命名空间
  • .nz-resizable-resizing 正在调整尺寸时被添加到 nz-resizable 上
  • .nz-resizable-preview 开启预览时幽灵元素的类名
  • .nz-resizable-handle-box-hover 当鼠标悬停在 nz-resizable 上时被添加到 nz-resize-handle 上。
  • .nz-resizable-handle 调整手柄命名空间及各方向类名
    • .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 手柄的光标类型命名空间
    • .nz-resizable-handle-cursor-type-window
    • .nz-resizable-handle-cursor-type-grid
Resizable Drawer