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

SfBaseComponent.OnInitializedAsync()

SfBaseComponent.Dispose()

SfBaseComponent.Dispose(Boolean)

SfBaseComponent.OnObservableChange(String, Object, Boolean, NotifyCollectionChangedEventArgs)

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

SfBaseComponent.OnAfterRenderAsync(Boolean)

OnInitialized()

Declaration

protected override void OnInitialized()

OnParametersSet()

Declaration

protected override void OnParametersSet()