Class SfToolbar

The Toolbar control contains a list of toolbar items that are aligned horizontally.

Inheritance

System.Object

SfBaseComponent

SfToolbar

Inherited Members

SfBaseComponent.Dispose()

SfBaseComponent.Dispose(Boolean)

SfBaseComponent.GetEffectivePlatform()

SfBaseComponent.GetMainComponentPlatform()

SfBaseComponent.IsMainLicenseComponent()

SfBaseComponent.LicenseContext

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

SfBaseComponent.ValidateLicense()

Namespace: Syncfusion.Blazor.Navigations

Assembly: Syncfusion.Blazor.dll

Syntax

public class SfToolbar : SfBaseComponent

Remarks

Toolbar items can be populated by specifying ToolbarItem within ToolbarItems tag directive.

Examples

In the below code example, a basic toolbar component initialized with ToolbarItems tag directive.

<SfToolbar>
    <ToolbarItems>
        <ToolbarItem Type="ItemType.Button" Text="Cut" PrefixIcon="e-icons e-cut"></ToolbarItem>
        <ToolbarItem Type="ItemType.Button" Text="Copy" PrefixIcon="e-icons e-copy"></ToolbarItem>
        <ToolbarItem Type="ItemType.Button" Text="Paste" PrefixIcon="e-icons e-paste"></ToolbarItem>
        <ToolbarItem Type="ItemType.Separator"></ToolbarItem>
        <ToolbarItem Type="ItemType.Input">
            <Template>
                <input @bind="inputValue" type="text" />
            </Template>
        </ToolbarItem>
    </ToolbarItems>
</SfToolbar>
@code {
    private string inputValue { get; set; }
}

Constructors

SfToolbar()

Declaration

public SfToolbar()

Properties

AllowKeyboard

Gets or sets whether the allow keyboard interaction in toolbar.

Declaration

public bool AllowKeyboard { get; set; }

Property Value

Type	Description
System.Boolean	false, the keyboard interaction in toolbar, The default value is `true`.

ChildContent

Gets or sets the child content of toolbar component.

Declaration

public RenderFragment ChildContent { get; set; }

Property Value

Type
Microsoft.AspNetCore.Components.RenderFragment

CssClass

Gets or sets the custom classes to customize the toolbar 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 toolbar element. The default value is `null`.

Examples

 
<SfToolbar CssClass="custom-toolbar"></SfToolbar>

EnableCollision

Gets or sets whether enable or disable popup collision to display the popup based on viewport window.

Declaration

public bool EnableCollision { get; set; }

Property Value

Type	Description
System.Boolean	false, the popup collision is disabled. The default value is `true`.

Remarks

This property is applicable only when Popup or Extended is used.

EnableRtl

Gets or sets whether the right to left direction is enabled for toolbar component.

Declaration

public bool EnableRtl { get; set; }

Property Value

Type	Description
System.Boolean	true, the right to left direction is enabled for toolbar component. The default value is `false`.

Height

Gets or sets the height of the toolbar element in pixels/number/percentage.

Declaration

public string Height { get; set; }

Property Value

Type	Description
System.String	If we set the height value, then the toolbar will render based on specified height otherwise the default height value `auto` is set.

Remarks

If we set number values, then it is considered as pixels.

Examples

 
<SfToolbar Height="500px"></SfToolbar>

HtmlAttributes

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

Declaration

public Dictionary<string, object> HtmlAttributes { get; set; }

Property Value

Type	Description
System.Collections.Generic.Dictionary<System.String, System.Object>	It allows the toolbar 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

 
<SfToolbar title="Search toolbar"></SfToolbar>

ID

Gets or sets the unique Id value for toolbar component.

Declaration

public string ID { get; set; }

Property Value

Type	Description
System.String	If we set the id, then the id value set for toolbar element. The default value is `null`.

Items

Gets or sets the list of toolbar items that will be populated using the ToolbarItems tag directive.

Declaration

public List<ToolbarItem> Items { get; set; }

Property Value

Type	Description
System.Collections.Generic.List<ToolbarItem>	ToolbarItems

OverflowMode

Gets or sets a value that indicates how to display toolbar items when the toolbar content exceeds the viewing area.

Declaration

public OverflowMode OverflowMode { get; set; }

Property Value

Type	Description
OverflowMode	One of the OverflowMode enumeration. The default value is Scrollable

Remarks

If the OverflowMode is Scrollable, all the elements are displayed in a single line with enabled horizontal scrolling. If the OverflowMode is Popup, prioritized elements are displayed on the toolbar and the rest of elements are moved to the popup. If the popup content overflows the height of the page, the rest of the elements will be hidden. If the OverflowMode is MultiRow, overflow toolbar items are displayed as in-line of toolbar. If the OverflowMode is Extended, hides the overflow items in next row. The extended content were shown when click on the expand icon.

ScrollStep

Gets or sets the scrolling distance of toolbar scroller.

Declaration

public int ScrollStep { get; set; }

Property Value

Type	Description
System.Int32	When the left/right navigation icon is clicked, then the toolbar scrolled based on the specified value otherwise the default value `0` is set.

Remarks

This property is applicable only when Scrollable is set.

Examples

<SfToolbar ScrollStep="50"></SfToolbar>

Width

Gets or sets the width of the toolbar element in pixels/number/percentage.

Declaration

public string Width { get; set; }

Property Value

Type	Description
System.String	If we set the width value, then the toolbar will render based on specified width otherwise the default width value `auto` is set.

Remarks

If we set number values, then it is considered as pixels.

Examples

 
<SfToolbar Width="500px"></SfToolbar>

Methods

AddItems(List<ToolbarItem>, Int32)

Adds new items to the Toolbar that accepts an list of Toolbar items.

Declaration

public void AddItems(List<ToolbarItem> items, int index)

Parameters

Type	Name	Description
System.Collections.Generic.List<ToolbarItem>	items	A list of items to be added to the Toolbar.
System.Int32	index	Number value that determines where the command is to be added.

BuildRenderTree(RenderTreeBuilder)

Declaration

protected override void BuildRenderTree(RenderTreeBuilder __builder)

Parameters

Type	Name	Description
Microsoft.AspNetCore.Components.Rendering.RenderTreeBuilder	__builder

DisableAsync(Boolean)

Specifies the value to disable/enable the Toolbar component. When set to True, the component will be disabled.

Declaration

public Task DisableAsync(bool disable)

Parameters

Type	Name	Description
System.Boolean	disable	Based on this Boolean value, Toolbar will be enabled (false) or disabled (true).

Returns

Type	Description
System.Threading.Tasks.Task	System.Threading.Tasks.Task.

EnableItems(List<Int32>, Nullable<Boolean>)

Enables or disables the specified Toolbar item.

Declaration

public void EnableItems(List<int> items, Nullable<bool> isEnable = null)

Parameters

Type	Name	Description
System.Collections.Generic.List<System.Int32>	items	A list of toolbar item index to be enabled or disabled.
System.Nullable<System.Boolean>	isEnable	Boolean value that determines whether the command should be enabled or disabled. By default, `isEnable` is set to true.

HideItemAsync(Int32, Nullable<Boolean>)

Shows or hides the Toolbar item that is in the specified index.

Declaration

public Task HideItemAsync(int index, Nullable<bool> isHide = null)

Parameters

Type	Name	Description
System.Int32	index	Index value of target item to be hidden or shown.
System.Nullable<System.Boolean>	isHide	Based on this Boolean value, item will be hide (true) or show (false). By default, isHide is false.

Returns

Type	Description
System.Threading.Tasks.Task	System.Threading.Tasks.Task.

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)

OnInitializedAsync()

Method invoked when the component is ready to start.

Declaration

protected override Task OnInitializedAsync()

Returns

Type	Description
System.Threading.Tasks.Task	A System.Threading.Tasks.Task representing any asynchronous operation.

Overrides

SfBaseComponent.OnInitializedAsync()

OnParametersSetAsync()

Method invoked when the component has received parameters from its parent in the render tree, and the incoming values have been assigned to properties.

Declaration

protected override Task OnParametersSetAsync()

Returns

Type	Description
System.Threading.Tasks.Task	A System.Threading.Tasks.Task representing any asynchronous operation.

PreventRender(Boolean)

Prevents the Toolbar render. This method will internally sets value to be returned from ShouldRender method.

Declaration

public void PreventRender(bool preventRender = true)

Parameters

Type	Name	Description
System.Boolean	preventRender	Default value is true. Toggles the ShouldRender method value.

RefreshAsync()

Applies all the pending property changes and render the component again.

Declaration

public Task RefreshAsync()

Returns

Type	Description
System.Threading.Tasks.Task	System.Threading.Tasks.Task.

RefreshOverflowAsync()

Refresh the whole Toolbar component without re-rendering.

It is used to manually refresh the Toolbar overflow modes such as scrollable, popup, multi row, and extended.
It will refresh the Toolbar component after loading items dynamically.

Declaration

public Task RefreshOverflowAsync()

Returns

Type	Description
System.Threading.Tasks.Task	System.Threading.Tasks.Task.

RemoveItems(Int32)

Removes the items from the Toolbar at the specified index.

Declaration

public Task RemoveItems(int index)

Parameters

Type	Name	Description
System.Int32	index	Index of item which is to be removed from the Toolbar.

Returns

Type	Description
System.Threading.Tasks.Task	System.Threading.Tasks.Task.

ShouldRender()

Declaration

protected override bool ShouldRender()

Returns

Type
System.Boolean