Class SfAppBar

The AppBar displays the information and actions related to the current application screen. It is used to show branding, screen titles, navigation, and actions.

Inheritance
System.Object
SfBaseComponent
SfAppBar
Inherited Members
Namespace: Syncfusion.Blazor.Navigations
Assembly: Syncfusion.Blazor.dll
Syntax
public class SfAppBar : SfBaseComponent
Remarks

AppBar component can be populated by specifying the child components within SfAppBar tag directive. Support to inherit colors from AppBar provided to SfButton, SfDropDownButton, SfMenu and SfTextBox. Set CssClass property with 

e-inherit
CSS class to inherit the background and color from AppBar.
Examples

The below example shows AppBar with Primary Button.

<SfAppBar> 
    <SfButton IsPrimary="true">Primary</SfButton>
</SfAppBar>

The below example shows AppBar with Buttons which inherits colors from AppBar.

<SfAppBar>
<SfButton CssClass="e-inherit" IconCss="e-icons e-home"></SfButton>
<AppBarSeparator />
<SfButton CssClass="e-inherit" IconCss="e-icons e-pan"></SfButton>
</SfAppBar>

The below example, AppBarSpacer component used to align the Buttons on left and right.

<SfAppBar>
<SfButton CssClass="e-inherit" IconCss="e-icons e-home"></SfButton>
<AppBarSpacer />
<SfButton CssClass="e-inherit" IconCss="e-icons e-pan"></SfButton>
<SfButton CssClass="e-inherit" IconCss="e-icons e-close"></SfButton>
</SfAppBar>

Constructors

SfAppBar()

Declaration
public SfAppBar()

Properties

ChildContent

Gets or sets the child content of AppBar component.

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

The value used to build the content.
Examples

The below example, AppBarSpacer component used to align the Buttons on left and right.

<SfAppBar>
<SfButton CssClass="e-inherit" IconCss="e-icons e-home"></SfButton>
<AppBarSpacer />
<SfButton CssClass="e-inherit" IconCss="e-icons e-pan"></SfButton>
<SfButton CssClass="e-inherit" IconCss="e-icons e-close"></SfButton>
</SfAppBar>

ColorMode

Gets or sets the color mode that defines the color of AppBar component.

Declaration
public AppBarColor ColorMode { get; set; }
Property Value
Type Description
AppBarColor

One of the AppBarColor enumeration. The default value is Light

Created

Triggers when the component is created.

Declaration
public EventCallback<object> Created { get; set; }
Property Value
Type Description
Microsoft.AspNetCore.Components.EventCallback<System.Object>

Fired when AppBar created.

CssClass

Gets or sets the custom classes to customize the AppBar component.

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

If we set the css class, then the custom class is applied for AppBar. The default value is string.Empty.
Remarks

Accepts single/multiple classes (separated by a space) to be used for AppBar customization.

Examples

In the below example AppBar background and color is customized using CssClass property.

 
<SfAppBar CssClass="custom-appbar">
<SfButton CssClass="e-inherit" IconCss="e-icons e-menu"></SfButton>
</SfAppBar>
<style>
.custom-appbar {
background: #adadb1;
color: #fff;
}
</style>

Destroyed

Triggers when the component is destroyed.

Declaration
public EventCallback<object> Destroyed { get; set; }
Property Value
Type Description
Microsoft.AspNetCore.Components.EventCallback<System.Object>

Fired when AppBar destroyed.

HtmlAttributes

Gets or sets a collection of additional attributes that will be applied to the AppBar element.

Declaration
public Dictionary<string, object> HtmlAttributes { get; set; }
Property Value
Type Description
System.Collections.Generic.Dictionary<System.String, System.Object>

It allows the AppBar component to render non-declared attributes. The default value is null.
Remarks

Additional attributes can be added by specifying as inline attributes or by specifying @attributes directive.

Examples

In the below code example, Elevation of the AppBar customized using @attributes directive.

 
<SfAppBar @attributes="customAttribute">
<SfButton CssClass="e-inherit" IconCss="e-icons e-home"></SfButton>
</SfAppBar> 
@code{ 
   Dictionary<string, object> customAttribute = new Dictionary<string, object>() 
   { 
       { "style", "box-shadow: 0 5px 5px -3px rgba(0,0,0,.06), 0 8px 10px 1px rgba(0,0,0,.042), 0 3px 14px 2px rgba(0,0,0,.036)" } 
   }; 
}

IsSticky

Gets or sets whether the AppBar position is fixed or not while scrolling the page.

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

true, The AppBar will be sticky while scrolling. The default value is false.

Mode

Gets or sets mode of the AppBar that defines the AppBar height.

Declaration
public AppBarMode Mode { get; set; }
Property Value
Type Description
AppBarMode

One of the AppBarMode enumeration. The default value is Regular

Position

Gets or sets position of the AppBar.

Declaration
public AppBarPosition Position { get; set; }
Property Value
Type Description
AppBarPosition

One of the AppBarPosition enumeration. The default value is Top

Methods

BuildRenderTree(RenderTreeBuilder)

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

OnAfterRenderAsync(Boolean)

Method invoked after each time the component has been rendered.

Declaration
protected override Task OnAfterRenderAsync(bool firstRender)
Parameters
Type Name Description
System.Boolean firstRender

Set to true for the first time component rendering; otherwise gets false.
Returns
Type Description
System.Threading.Tasks.Task

A System.Threading.Tasks.Task representing any asynchronous operation.
Overrides

OnInitialized()

Declaration
protected override void OnInitialized()

OnParametersSet()

Declaration
protected override void OnParametersSet()