Class SfMessage

The Blazor Message component displays messages with severity by differentiating icons and colors to denote the importance and context of the message to the end user.

Inheritance
System.Object
SfBaseComponent
SfMessage
Inherited Members
Namespace: Syncfusion.Blazor.Notifications
Assembly: Syncfusion.Blazor.dll
Syntax
public class SfMessage : SfBaseComponent
Examples

The below code example shows Message component with simple content.

<SfMessage Severity="MessageSeverity.Success">
    <p>The <b>Nature.png</b> file is uploaded successfully.</p>
</SfMessage>

The below code example shows the Message component with multiline content.

<SfMessage Severity="MessageSeverity.Info" ShowIcon="false">
    <div>
        <h3>Transform your web apps today with Syncfusion Blazor components</h3>
        <ul>
            <li><span>70+ high-performance and responsive UI components</span></li>
            <li><span>Dedicated support</span></li>
            <li><span>Hassle-free licensing</span></li>
        </ul>
        <div><a href="https://www.syncfusion.com/downloads/blazor/" target="_blank"><button>Try It for Free</button></a></div>
    </div>
</SfMessage>

Constructors

SfMessage()

Declaration
public SfMessage()

Properties

ChildContent

Gets or sets the child content for the Message component, including the HTML elements.

Declaration
public RenderFragment ChildContent { get; set; }
Property Value
Type Description
Microsoft.AspNetCore.Components.RenderFragment

The template content. The default value is null.
Remarks

The child content which is specified within SfMessage tag directive is either a string or HTML elements.

Examples

The below code example shows the Message component with simple content.

<SfMessage Severity="MessageSeverity.Success">
    <p>The <b>Nature.png</b> file is uploaded successfully.</p>
</SfMessage>

The below code example shows the Message component with multiline content.

<SfMessage Severity="MessageSeverity.Info" ShowIcon="false">
    <div>
        <h3>Transform your web apps today with Syncfusion Blazor components</h3>
        <ul>
            <li><span>70+ high-performance and responsive UI components</span></li>
            <li><span>Dedicated support</span></li>
            <li><span>Hassle-free licensing</span></li>
        </ul>
        <div><a href="https://www.syncfusion.com/downloads/blazor/" target="_blank"><button>Try It for Free</button></a></div>
    </div>
</SfMessage>

Closed

Triggers when the Message component is closed (hided) successfully.

Declaration
public EventCallback<MessageCloseEventArgs> Closed { get; set; }
Property Value
Type Description
Microsoft.AspNetCore.Components.EventCallback<MessageCloseEventArgs>

An event callback function.

ContentAlignment

Gets or sets the alignment of message content. The available content alignments are Left, Center and Right.

Declaration
public HorizontalAlign ContentAlignment { get; set; }
Property Value
Type Description
HorizontalAlign

One of the HorizontalAlign enumeration. The default value is Left.

CssClass

Gets or sets the CSS class or multiple classes separated by space that can be appended with the root element of the Message component to customize a message.

Declaration
public string CssClass { get; set; }
Property Value
Type Description
System.String

The default value is String.Empty.
Examples

The below code example shows border customization of the Message component.

<SfMessage CssClass="custom">
   Conference Room no 01 / Building 135 10:00 AM - 10:30 AM
</SfMessage>
<style>
.custom {
    border-color: pink;
}
</style>

Severity

Gets or sets the severity of the message, which is used to define the appearance (icons and colors) of the message. The available severity messages are Normal, Info, Success, Warning and Error.

Declaration
public MessageSeverity Severity { get; set; }
Property Value
Type Description
MessageSeverity

One of the MessageSeverity enumeration. The default value is Normal

ShowCloseIcon

Gets or sets whether to show or hide the close icon in the Message component. The end user can click the close icon to hide the message. The Closed event triggered when message closed.

Declaration
public bool ShowCloseIcon { get; set; }
Property Value
Type Description
System.Boolean

true, the close icon for the Message component is visible at the top right corner of the Message component. The default value is false.

ShowIcon

Gets or sets whether to show or hide the severity icon in the Message component. When set to true, the severity icon is displayed at the left edge of the Message component. This icon will be distinctive based on the Severity property.

Declaration
public bool ShowIcon { get; set; }
Property Value
Type Description
System.Boolean

false hides the severity icon in the Message component. The default value is true.

Variant

Gets or sets the variant from predefined appearance variants to display the content of the Message component. The available variants are Text, Outlined and Filled.

Declaration
public MessageVariant Variant { get; set; }
Property Value
Type Description
MessageVariant

One of the MessageVariant enumeration. The default value is Text

Visible

Gets or sets the visibility of the Message component. The Message component will be hidden when set to false.

Declaration
public bool Visible { get; set; }
Property Value
Type Description
System.Boolean

false, hides the Message component. The default value is true.

VisibleChanged

Gets or sets a callback for the bound Visible property value.

Declaration
public EventCallback<bool> VisibleChanged { get; set; }
Property Value
Type Description
Microsoft.AspNetCore.Components.EventCallback<System.Boolean>

An event callback function.

Methods

BuildRenderTree(RenderTreeBuilder)

Declaration
protected override void BuildRenderTree(RenderTreeBuilder __builder)
Parameters
Type Name Description
Microsoft.AspNetCore.Components.Rendering.RenderTreeBuilder __builder

OnParametersSetAsync()

Declaration
protected override Task OnParametersSetAsync()
Returns
Type
System.Threading.Tasks.Task