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
object
ComponentBase
OwningComponentBase
SfOwningComponentBase
SfBaseComponent
SfAppBar
Implements
Inherited Members
Namespace: Syncfusion.Blazor.Navigations
Assembly: Syncfusion.Blazor.dll
Syntax
public class SfAppBar : SfBaseComponent, IComponent, IHandleEvent, IHandleAfterRender, IDisposable
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
[Parameter]
public RenderFragment ChildContent { get; set; }
Property Value
Type Description
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
[Parameter]
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
[Parameter]
public EventCallback<object> Created { get; set; }
Property Value
Type Description
EventCallback<object>

Fired when AppBar created.

CssClass

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

Declaration
[Parameter]
public string CssClass { get; set; }
Property Value
Type Description
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
[Parameter]
public EventCallback<object> Destroyed { get; set; }
Property Value
Type Description
EventCallback<object>

Fired when AppBar destroyed.

IsSticky

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

Declaration
[Parameter]
public bool IsSticky { get; set; }
Property Value
Type Description
bool

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
[Parameter]
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
[Parameter]
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
RenderTreeBuilder __builder
Overrides

OnAfterRenderAsync(bool)

Method invoked after each time the component has been rendered.

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

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

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

OnInitialized()

Declaration
protected override void OnInitialized()
Overrides

OnParametersSet()

Declaration
protected override void OnParametersSet()
Overrides

Implements