Class DialogTemplates

A component class used within the SfDialog to configure custom templates for the header, content, and footer sections of the dialog.

Inheritance

System.Object

SfBaseComponent

DialogTemplates

Implements

System.IAsyncDisposable

Inherited Members

SfBaseComponent.DisposeAsync()

Namespace: Syncfusion.Blazor.Toolkit.Popups

Assembly: Syncfusion.Blazor.Toolkit.dll

Syntax

public class DialogTemplates : SfBaseComponent, IAsyncDisposable

Remarks

The DialogTemplates class provides template properties to customize the appearance and content of different areas within a dialog component. This allows developers to define custom UI elements and layouts for the dialog's header, content, and footer sections instead of using the default dialog structure.

Examples

@using Syncfusion.Blazor.Toolkit.Popups
<SfDialog Width="500px" @bind-Visible="Visibility">
  <DialogTemplates>
    <Header><h1>Dialog Header</h1></Header>
    <Content>
      <p>Dialog content</p>
    </Content>
    <FooterTemplate>
      <button class="e-btn" style="background-color:#8A2BE2;" onclick="@OnBtnClick">OK</button>
    </FooterTemplate>
  </DialogTemplates>
</SfDialog>
@code {
  private bool Visibility { get; set; } = true;
  private void OnBtnClick()
  {
    this.Visibility = false;
  }
}

Constructors

DialogTemplates()

Declaration

public DialogTemplates()

Properties

Content

Gets or sets the template as Microsoft.AspNetCore.Components.RenderFragment that defines the custom appearance of the dialog's content area.

Declaration

public RenderFragment Content { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.RenderFragment	A Microsoft.AspNetCore.Components.RenderFragment that specifies the custom template for the dialog content area. The default value is null.

Remarks

The Content property is used to customize the main body or content area of the dialog. This template allows you to define any custom HTML elements, Blazor components, forms, or other content that should be displayed in the dialog's body section. Specify the Content template within the DialogTemplates tag directive.

Examples

@using Syncfusion.Blazor.Toolkit.Popups
<SfDialog Width="500px" @bind-Visible="Visibility">
  <DialogTemplates>
    <Content>
      <p>Dialog content</p>
    </Content>
  </DialogTemplates>
</SfDialog>
@code {
  private bool Visibility { get; set; } = true;
}

FooterTemplate

Gets or sets the template as Microsoft.AspNetCore.Components.RenderFragment that defines the custom appearance of the dialog's footer area.

Declaration

public RenderFragment FooterTemplate { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.RenderFragment	A Microsoft.AspNetCore.Components.RenderFragment that specifies the custom template for the dialog footer area. The default value is null.

Remarks

The FooterTemplate property is used to customize the footer area of the dialog, typically used for action buttons like OK, Cancel, Save, etc. When this property is set, it overrides the default footer buttons and allows you to define custom buttons, controls, or other content for the footer section. If not specified, the action buttons are enabled by default in the footer. Specify the FooterTemplate within the DialogTemplates tag directive.

Examples

@using Syncfusion.Blazor.Toolkit.Popups
<SfDialog Width="500px" @bind-Visible="Visibility">
  <DialogTemplates>
    <Content>
      <p>Dialog content</p>
    </Content>
    <FooterTemplate>
      <button class="e-btn" style="background-color:#8A2BE2;" onclick="@OnBtnClick">OK</button>
    </FooterTemplate>
  </DialogTemplates>
</SfDialog>
@code {
  private bool Visibility { get; set; } = true;
  private void OnBtnClick()
  {
    this.Visibility = false;
  }
}

Header

Gets or sets the template as Microsoft.AspNetCore.Components.RenderFragment that defines the custom appearance of the dialog's header area.

Declaration

public RenderFragment Header { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.RenderFragment	A Microsoft.AspNetCore.Components.RenderFragment that specifies the custom template for the dialog header area. The default value is null.

Remarks

The Header property is used to customize the appearance of the dialog's title area. When this property is set, it overrides the default header content and allows you to define custom HTML elements, Blazor components, or any other content for the header section. Specify the Header template within the DialogTemplates tag directive.

Examples

@using Syncfusion.Blazor.Toolkit.Popups
<SfDialog Width="500px" @bind-Visible="Visibility">
  <DialogTemplates>
    <Header><h1>Dialog Header</h1></Header>
    <Content>
      <p>Dialog content</p>
    </Content>
  </DialogTemplates>
</SfDialog>
@code {
  private bool Visibility { get; set; } = true;
}

Implements

System.IAsyncDisposable