Title
The Window provides options for displaying a title and customizing its behavior.
To set a title to the Window, use its title
property.
@Component({
selector: 'my-app',
template: `
<button kendoButton *ngIf="!opened" (click)="openClose(true)">Open</button>
<kendo-window title="Awesome title goes here" *ngIf="opened" (close)="openClose(false)">
</kendo-window>
`
})
class AppComponent {
public opened: boolean = true;
public openClose(isOpened: boolean) {
this.opened = isOpened;
}
}
To customize the title by adding arbitrary components:
- Nest the components inside
<kendo-window-titlebar>
. - Include the needed actions.
If the
title
property is set and you use the<kendo-window-titlebar>
element, thetitle
configuration will be overridden.
@Component({
selector: 'my-app',
template: `
<kendo-window>
<kendo-window-titlebar>
<div style="font-size: 18px; line-height: 1.3em;">
<span class="k-icon k-i-print"></span> Print this page
</div>
<button kendoWindowMaximizeAction></button>
<button kendoWindowRestoreAction></button>
</kendo-window-titlebar>
<p style="margin: 30px; text-align: center;">A sample print window.</p>
</kendo-window>
`
})
class AppComponent {
}
If title
is not specified, instead of a title, the Window will display a title bar with the default actions.
@Component({
selector: 'my-app',
template: `
<button kendoButton *ngIf="!opened" (click)="openClose(true)">Open</button>
<kendo-window *ngIf="opened" (close)="openClose(false)" [width]="450">
<div style="text-align: center; margin: 30px;">
<h4>Enter your e-mail below to unlock.</h4>
<p>
<input class="k-textbox" placeholder="Your e-mail here" style="width: 300px;" />
</p>
<p>
<button kendoButton primary="true" style="width: 300px;">GET MY $10 OFF</button>
</p>
<a href="#">No thanks!</a>
</div>
</kendo-window>
`
})
class AppComponent {
public opened: boolean = true;
public openClose(isOpened: boolean) {
this.opened = isOpened;
}
}