Skip to content
Permalink
Browse files

feat(module:resizable): add resizable component (#3771)

* feat(module:resizable): add resizable component

ref #3701

* docs(module:resizable): add layout demo

* test(module:resizable): add test cases

* docs(module:resizable): add module file

* test(module:resizable): add test cases

* docs: add experimental docs

* refactor(module:resizable): refactor size calculation

* docs(module:resizable): update docs

* docs: add static paths

* docs: update
  • Loading branch information...
hsuanxyz authored and vthinkxie committed Aug 13, 2019
1 parent aeccb20 commit 5e7173966359c57249573481b4b25c7fabd58003
Showing with 2,230 additions and 26 deletions.
  1. +11 −0 components/core/util/ensure-in-bounds.ts
  2. +1 −0 components/core/util/public-api.ts
  3. +16 −0 components/resizable/demo/basic.md
  4. +49 −0 components/resizable/demo/basic.ts
  5. +16 −0 components/resizable/demo/customize.md
  6. +68 −0 components/resizable/demo/customize.ts
  7. +16 −0 components/resizable/demo/drawer.md
  8. +63 −0 components/resizable/demo/drawer.ts
  9. +17 −0 components/resizable/demo/grid.md
  10. +52 −0 components/resizable/demo/grid.ts
  11. +16 −0 components/resizable/demo/layout.md
  12. +117 −0 components/resizable/demo/layout.ts
  13. +16 −0 components/resizable/demo/lock-aspect-ratio.md
  14. +46 −0 components/resizable/demo/lock-aspect-ratio.ts
  15. +10 −0 components/resizable/demo/module
  16. +17 −0 components/resizable/demo/preview.md
  17. +42 −0 components/resizable/demo/preview.ts
  18. +16 −0 components/resizable/demo/table.md
  19. +98 −0 components/resizable/demo/table.ts
  20. +86 −0 components/resizable/doc/index.en-US.md
  21. +87 −0 components/resizable/doc/index.zh-CN.md
  22. +9 −0 components/resizable/index.ts
  23. +308 −0 components/resizable/nz-resizable.directive.ts
  24. +21 −0 components/resizable/nz-resizable.module.ts
  25. +28 −0 components/resizable/nz-resizable.service.ts
  26. +664 −0 components/resizable/nz-resizable.spec.ts
  27. +1 −0 components/resizable/nz-resize-handle.component.html
  28. +72 −0 components/resizable/nz-resize-handle.component.ts
  29. +1 −0 components/resizable/nz-resize-handles.component.html
  30. +42 −0 components/resizable/nz-resize-handles.component.ts
  31. +7 −0 components/resizable/package.json
  32. +13 −0 components/resizable/public-api.ts
  33. +2 −0 components/resizable/style/entry.less
  34. +87 −0 components/resizable/style/index.less
  35. +26 −0 docs/experimental.en-US.md
  36. +26 −0 docs/experimental.zh-CN.md
  37. +5 −1 scripts/prerender/static.paths.ts
  38. +34 −17 scripts/site/_site/doc/app/app.component.html
  39. +11 −2 scripts/site/_site/doc/app/app.component.ts
  40. +1 −0 scripts/site/_site/doc/styles.less
  41. +12 −6 scripts/site/utils/generate-routes.js
@@ -0,0 +1,11 @@
/**
* @license
* Copyright Alibaba.com All Rights Reserved.
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
*/

export function ensureInBounds(value: number, boundValue: number): number {
return value ? (value < boundValue ? value : boundValue) : boundValue;
}
@@ -19,3 +19,4 @@ export * from './textarea-caret-position';
export * from './style-checke';
export * from './text-measure';
export * from './measure-scrollbar';
export * from './ensure-in-bounds';
@@ -0,0 +1,16 @@
---
order: 0
title:
zh-CN: 基本使用
en-US: Basic Usage
---

## zh-CN

基本使用。

## en-US

Basic Usage.


@@ -0,0 +1,49 @@
import { Component } from '@angular/core';

@Component({
selector: 'nz-demo-resizable-basic',
template: `
<div
class="box"
nz-resizable
[nzMaxWidth]="600"
[nzMinWidth]="80"
[nzMaxHeight]="200"
[nzMinHeight]="80"
[style.height.px]="height"
[style.width.px]="width"
(nzResize)="onResize($event)"
>
<nz-resize-handles></nz-resize-handles>
content
</div>
`,
styles: [
`
:host {
display: block;
height: 200px;
}
.box {
display: flex;
align-items: center;
justify-content: center;
background: #eee;
border: 1px solid #ddd;
}
`
]
})
export class NzDemoResizableBasicComponent {
width = 400;
height = 200;
id = -1;

onResize({ width, height }: { width: number; height: number }): void {
cancelAnimationFrame(this.id);
this.id = requestAnimationFrame(() => {
this.width = width;
this.height = height;
});
}
}
@@ -0,0 +1,16 @@
---
order: 1
title:
zh-CN: 自定义
en-US: Customize
---

## zh-CN

自定义拖拽柄样式。


## en-US

Customize Handle。

@@ -0,0 +1,68 @@
import { Component } from '@angular/core';

@Component({
selector: 'nz-demo-resizable-customize',
template: `
<div class="box" nz-resizable (nzResize)="onResize($event)" [style.height.px]="height" [style.width.px]="width">
content
<nz-resize-handle nzDirection="bottomRight">
<i class="bottom-right" nz-icon nzType="caret-up" nzTheme="outline" [nzRotate]="135"></i>
</nz-resize-handle>
<nz-resize-handle nzDirection="right">
<div class="right-wrap">
<i class="right" nz-icon nzType="more" nzTheme="outline"></i>
</div>
</nz-resize-handle>
</div>
`,
styles: [
`
:host {
display: block;
height: 200px;
}
.box {
display: flex;
align-items: center;
justify-content: center;
background: #eee;
border: 1px solid #ddd;
}
.bottom-right {
position: absolute;
top: 0;
left: 0;
}
.right-wrap {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.right {
background: #fff;
border: 1px solid #ddd;
text-align: center;
font-size: 12px;
height: 20px;
line-height: 20px;
}
`
]
})
export class NzDemoResizableCustomizeComponent {
width = 400;
height = 200;
id = -1;

onResize({ width, height }: { width: number; height: number }): void {
cancelAnimationFrame(this.id);
this.id = requestAnimationFrame(() => {
this.width = width;
this.height = height;
});
}
}
@@ -0,0 +1,16 @@
---
order: 6
title:
zh-CN: 抽屉
en-US: Drawer
---

## zh-CN

调整抽屉宽度。

## en-US

Resize the drawer width.


@@ -0,0 +1,63 @@
import { Component } from '@angular/core';

@Component({
selector: 'nz-demo-resizable-drawer',
template: `
<button nz-button nzType="primary" (click)="open()">Open</button>
<nz-drawer
[nzClosable]="false"
[nzVisible]="visible"
[nzBodyStyle]="{
padding: 0,
height: 'calc(100vh - 55px)'
}"
[nzWidth]="width"
nzPlacement="left"
nzTitle="Resizable Drawer"
(nzOnClose)="close()"
>
<div
*ngIf="visible"
class="drawer-body"
nz-resizable
nzBounds="window"
[nzMinWidth]="256"
(nzResize)="onResize($event)"
>
<nz-resize-handles [nzDirections]="['right']"></nz-resize-handles>
<p>Some contents...</p>
<p>Some contents...</p>
<p>Some contents...</p>
</div>
</nz-drawer>
`,
styles: [
`
.drawer-body {
width: 100%;
height: 100%;
padding: 24px;
}
`
]
})
export class NzDemoResizableDrawerComponent {
width = 256;
visible = false;
id = -1;

onResize({ width }: { width: number }): void {
cancelAnimationFrame(this.id);
this.id = requestAnimationFrame(() => {
this.width = width;
});
}

open(): void {
this.visible = true;
}

close(): void {
this.visible = false;
}
}
@@ -0,0 +1,17 @@
---
order: 4
title:
zh-CN: 栅格
en-US: Grid
---

## zh-CN

配合栅格使用

## en-US

Resize with grid.



@@ -0,0 +1,52 @@
import { Component } from '@angular/core';

@Component({
selector: 'nz-demo-resizable-grid',
template: `
<div nz-row>
<div
class="col"
nz-col
nz-resizable
(nzResize)="onResize($event)"
[nzMinColumn]="3"
[nzMaxColumn]="20"
[nzGridColumnCount]="24"
[nzSpan]="col"
>
<nz-resize-handles [nzDirections]="['right']"></nz-resize-handles>
col-{{ col }}
</div>
<div class="col right" nz-col [nzSpan]="24 - col">col-{{ 24 - col }}</div>
</div>
`,
styles: [
`
.col {
padding: 16px 0;
text-align: center;
border-radius: 0;
min-height: 30px;
margin-top: 8px;
margin-bottom: 8px;
background: rgba(0, 160, 233, 0.7);
color: #fff;
}
.col.right {
background: #00a0e9;
}
`
]
})
export class NzDemoResizableGridComponent {
col = 8;
id = -1;

onResize({ col }: { col: number }): void {
cancelAnimationFrame(this.id);
this.id = requestAnimationFrame(() => {
this.col = col;
});
}
}
@@ -0,0 +1,16 @@
---
order: 5
title:
zh-CN: 布局
en-US: Layout
---

## zh-CN

调整布局尺寸。

## en-US

Layout with resizable.


0 comments on commit 5e71739

Please sign in to comment.
You can’t perform that action at this time.