NG-ALAIN- Documents
Getting Started Internationalization Customize Theme Performance 组件样式 Icon
- Theme
Global Parameters Style Tools Default Layout Blank Layout theme-btnComponent-Change Style
- Service
_HttpClient SettingsServiceProject configuration MenuServiceMenu Service DrawerHelperDrawer Helper ModalHelperModal Helper TitleServiceTitle Service ResponsiveServiceResponsive Service RTLServiceRTL Service
- Router
PreloadOptionalModules
- Pipe
_dateDate keysKeys safeXSS ynBadge
Based on the NzDrawerService package, it solves some known issues:
More friendly handling callbacks
Support responsive
create
this.drawerHelper.create('Edit', FormEditComponent, { i }).subscribe(res => this.load());
// Ok callback
// 1. considered successful
this.NzDrawerRef.close(data);
this.NzDrawerRef.close(true);
// Close
this.NzDrawerRef.close();
this.NzDrawerRef.close(false);There are includes create & static methods to open the normal & static drawer.
Custom component HTML template
Your body content
<div class="drawer-footer">
// The bottom toolbar need wrapped by `drawer-footer`
<button nz-button [nzType]="'default'" (click)="cancel()">
Cancel
</button>
<button nz-button [nzType]="'primary'" (click)="ok()">
OK
</button>
</div>If you don't bottom toolbar, you need specify footer: false.
Examples
Simplest of usage.
import { Component } from '@angular/core';
import { DrawerHelper } from '@delon/theme';
import { DemoDrawerComponent } from '@shared';
import { NzMessageService } from 'ng-zorro-antd/message';
@Component({
selector: 'theme-drawer-simple',
template: `
<button nz-button (click)="open()">Open</button>
<button nz-button (click)="static()">Static</button>
`,
})
export class ThemeDrawerSimpleComponent {
constructor(private modalHelper: DrawerHelper, private msg: NzMessageService) {}
open(): void {
this.modalHelper.create('View', DemoDrawerComponent, { record: { a: 1, b: '2', c: new Date() } }).subscribe(res => {
this.msg.info(res);
});
}
static(): void {
this.modalHelper.static('View', DemoDrawerComponent, { record: { a: 1, b: '2', c: new Date() } }).subscribe(res => {
this.msg.info(res);
});
}
}API
| Property | Description | Type | Default |
|---|---|---|---|
size | Specify drawer size, responsive only supports non-numeric values | sm,md,lg,xl,number | md |
footer | Whether toolbar | boolean | true |
footerHeight | Toolbar height | number | 55 |
exact | Exact match return value, default is true, If the return value is not null (null or undefined) is considered successful, otherwise it is considered error. | boolean | true |
drawerOptions | Drawer raw parameters NzDrawerOptions 参数 | NzDrawerOptions | - |