From 9565cd5787d8d3ebc832561f610b1faed33ca5a9 Mon Sep 17 00:00:00 2001 From: Hsuan Lee Date: Sat, 24 Nov 2018 20:12:58 +0800 Subject: [PATCH] feat(module:drawer): add input property in NzDrawerRef (#2464) close #2403 --- components/drawer/doc/index.en-US.md | 25 ++++++++++++++++++++++--- components/drawer/doc/index.zh-CN.md | 28 ++++++++++++++++++++++++---- components/drawer/nz-drawer-ref.ts | 17 ++++++++++++++++- 3 files changed, 62 insertions(+), 8 deletions(-) diff --git a/components/drawer/doc/index.en-US.md b/components/drawer/doc/index.en-US.md index bad53ef01fd..6c19a26d7c2 100755 --- a/components/drawer/doc/index.en-US.md +++ b/components/drawer/doc/index.en-US.md @@ -63,9 +63,28 @@ A Drawer is a panel that is typically overlaid on top of a page and slides in fr ### NzDrawerRef -| Params | Description | Type | +#### Methods +| Name | Description | Type | +| --- | --- | --- | +| close | close the drawer. | `(result?: R) => void` | +| open | open the drawer. | `() => void` | + + +#### Property +| Name | Description | Type | | --- | --- | --- | | afterOpen | Callback called after open. | `Observable` | | afterClose | Callback called after close. | `Observable` | -| close | close the drawer. | `(result?: R) => void` | -| open | open the drawer. | `() => void` | \ No newline at end of file +| nzClosable | Whether a close (x) button is visible on top right of the Drawer dialog or not. | `boolean` | `true` | +| nzMaskClosable | Clicking on the mask (area outside the Drawer) to close the Drawer or not. | `boolean` | `true` | +| nzMask | Whether to show mask or not. | `boolean` | `true` | +| nzMaskStyle | Style for Drawer's mask element. | `object` | `{}` | +| nzBodyStyle | Body style for modal body element. Such as height, padding etc. | `object` | `{}` | +| nzTitle | The title for Drawer. | `string` `TemplateRef<{}>` | - | +| nzWidth | Width of the Drawer dialog. | `number` `string` | `256` | +| nzHeight | Height of the Drawer dialog, only when placement is `'top'` or `'bottom'`. | `number` `string` | `256` | +| nzWrapClassName | The class name of the container of the Drawer dialog. | `string` | - | +| nzZIndex| The `z-index` of the Drawer. | `number` | `1000` | +| nzPlacement | The placement of the Drawer. | `'top'` `'right'` `'bottom'` `'left'` | `'right'` | +| nzOffsetX | The the X coordinate offset(px). | `number` | `0` | +| nzOffsetY | The the Y coordinate offset(px), only when placement is `'top'` or `'bottom'`. | `number` | `0` | \ No newline at end of file diff --git a/components/drawer/doc/index.zh-CN.md b/components/drawer/doc/index.zh-CN.md index 442571c3e7e..513c891ce9b 100755 --- a/components/drawer/doc/index.zh-CN.md +++ b/components/drawer/doc/index.zh-CN.md @@ -47,8 +47,8 @@ title: Drawer | 参数 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | | nzContent | Drawer body 的内容 | `TemplateRef<{ $implicit: D, drawerRef: NzDrawerRef }>`, ` Type` | - | -| nzClosable | 是否显示右上角的关闭按钮 | `boolean` | `true` | | nzContentParams | 内容组件的输入参数 / Template的 context | `D` | - | +| nzClosable | 是否显示右上角的关闭按钮 | `boolean` | `true` | | nzMaskClosable | 点击蒙层是否允许关闭 | `boolean` | `true` | | nzMask | 是否展示遮罩 | `boolean` | `true` | | nzMaskStyle | 遮罩样式 | `object` | `{}` | @@ -64,9 +64,29 @@ title: Drawer ### NzDrawerRef -| 参数 | 说明 | 类型 | +#### 方法 + +| 名称 | 说明 | 类型 | +| --- | --- | --- | +| close | 关闭 Drawer | `(result?: R) => void` | +| open | 打开 Drawer | `() => void` | + +#### 属性 + +| 名称 | 说明 | 类型 | | --- | --- | --- | | afterOpen | 打开之后的回调 | `Observable` | | afterClose | 关闭之后的回调 | `Observable` | -| close | 关闭 Drawer | `(result?: R) => void` | -| open | 打开 Drawer | `() => void` | \ No newline at end of file +| nzClosable | 是否显示右上角的关闭按钮 | `boolean` | `true` | +| nzMaskClosable | 点击蒙层是否允许关闭 | `boolean` | `true` | +| nzMask | 是否展示遮罩 | `boolean` | `true` | +| nzMaskStyle | 遮罩样式 | `object` | `{}` | +| nzBodyStyle | Modal body 样式 | `object` | `{}` | +| nzTitle | 标题 | `string` `TemplateRef<{}>` | - | +| nzWidth | 宽度 | `number` `string` | `256` | +| nzHeight | 高度, 只在方向为 `'top'`或`'bottom'` 时生效 | `number` `string` | `256` | +| nzWrapClassName | 对话框外层容器的类名 | `string` | - | +| nzZIndex| 设置 Drawer 的 `z-index` | `number` | `1000` | +| nzPlacement | 抽屉的方向 | `'top'` `'right'` `'bottom'` `'left'` | `'right'` | +| nzOffsetX | x 坐标移量(px) | `number` | `0` | +| nzOffsetY | y 坐标移量(px), 高度, 只在方向为 `'top'`或`'bottom'` 时生效 | `number` | `0` | \ No newline at end of file diff --git a/components/drawer/nz-drawer-ref.ts b/components/drawer/nz-drawer-ref.ts index 3051ee63968..9a06209f303 100644 --- a/components/drawer/nz-drawer-ref.ts +++ b/components/drawer/nz-drawer-ref.ts @@ -1,11 +1,26 @@ +import { TemplateRef } from '@angular/core'; import { Observable } from 'rxjs/index'; +import { NzDrawerPlacement } from './nz-drawer-options'; // tslint:disable-next-line:no-any export abstract class NzDrawerRef { abstract afterClose: Observable; abstract afterOpen: Observable; - abstract close(result?: R): void; abstract open(): void; + + abstract nzClosable: boolean; + abstract nzMaskClosable: boolean; + abstract nzMask: boolean; + abstract nzTitle: string | TemplateRef<{}>; + abstract nzPlacement: NzDrawerPlacement; + abstract nzMaskStyle: object; + abstract nzBodyStyle: object; + abstract nzWrapClassName: string; + abstract nzWidth: number | string; + abstract nzHeight: number | string; + abstract nzZIndex: number | string; + abstract nzOffsetX: number | string; + abstract nzOffsetY: number | string; }