DevExtreme React - Customize the Title
By default, the Popup allocates a part of its area to the title, regardless of whether you specified the title text or did not. To hide the title, set the showTitle option to false. Besides the text, the title area also contains a button that closes the Popup. To hide this button alone, assign false to the showCloseButton option.
jQuery
$(function() { $("#popupContainer").dxPopup({ showTitle: false, visible: true }); });
Angular
<dx-popup [showTitle]="false" [(visible)]="isPopupVisible"> </dx-popup>
import { DxPopupModule } from "devextreme-angular"; // ... export class AppComponent { isPopupVisible: boolean = true; } @NgModule({ imports: [ // ... DxPopupModule ], // ... })
If you need to define the title completely, specify a template for it as shown in the following code:
jQuery
<div id="popupContainer"> <p>Popup content</p> <div data-options="dxTemplate: { name: 'title' }"> <p>Title template</p> </div> </div>
$(function() { $("#popupContainer").dxPopup({ titleTemplate: "title" }); });
Angular
<dx-popup [(visible)]="isPopupVisible" titleTemplate="title"> <div *dxTemplate="let data of 'content'"> <p>Popup content</p> </div> <div *dxTemplate="let data of 'title'"> <p>Title template</p> </div> </dx-popup>
import { DxPopupModule } from "devextreme-angular"; // ... export class AppComponent { isPopupVisible: boolean = true; } @NgModule({ imports: [ // ... DxPopupModule ], // ... })
You can switch title templates on the fly just as you can do with content templates. Refer to the Switching Templates On the Fly topic for more information.
See Also
If you have technical questions, please create a support ticket in the DevExpress Support Center.