Class ToolbarItem

A class that represents toolbar component item of SfToolbar component.

Inheritance

System.Object

ToolbarItem

Namespace: Syncfusion.Blazor.Navigations

Assembly: Syncfusion.Blazor.dll

Syntax

public class ToolbarItem : OwningComponentBase

Remarks

You can render icon only, text only, icon and text toolbar item by specifying value to corresponding property.

Examples

In the below code example, a basic toolbar item has been added using ToolbarItem tag directive.

<SfToolbar>
    <ToolbarItems>
        <ToolbarItem Text="Cut" PrefixIcon="e-icons e-cut"></ToolbarItem>
        <ToolbarItem Text="Copy" PrefixIcon="e-icons e-copy"></ToolbarItem>
        <ToolbarItem Text="Paste" PrefixIcon="e-icons e-paste"></ToolbarItem>
    </ToolbarItems>
</SfToolbar>

Constructors

ToolbarItem()

Declaration

public ToolbarItem()

Properties

Align

Gets or sets the location for aligning toolbar items on the toolbar.

Declaration

public ItemAlign Align { get; set; }

Property Value

Type	Description
ItemAlign	One of the ItemAlign enumeration. The default value is Left

Remarks

If the ItemAlign is Left, the toolbar item aligned from left side of toolbar. If the ItemAlign is Center, the toolbar item aligned from center of toolbar. If the ItemAlign is Right, the toolbar item aligned from right side of toolbar. Each item will be aligned according to the Align property.

ChildContent

Gets or sets the child content for the toolbar item.

Declaration

public RenderFragment ChildContent { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.RenderFragment	The value used to build the content.

CssClass

Gets or sets the classes for toolbar item to customize the toolbar item.

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 item. The default value is `string.Empty`.

Examples

 
<SfToolbar>
    <ToolbarItems>
        <ToolbarItem Text="Cut" CssClass="item1"></ToolbarItem>
    </ToolbarItems>
</SfToolbar>

Disabled

Gets or sets whether the toolbar item is disabled or not.

Declaration

public bool Disabled { get; set; }

Property Value

Type	Description
System.Boolean	`true`, to disable the toolbar item. The default value is `false`.

HtmlAttributes

Gets or sets a collection of additional attributes that will be applied to the toolbar item 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 item 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, title attribute were added for toolbar item.

<SfToolbar>
    <ToolbarItems>
        <ToolbarItem Text="Cut" id="item1"></ToolbarItem>
    </ToolbarItems>
</SfToolbar>

Id

Gets or sets the unique ID for toolbar button or input element.

Declaration

public string Id { get; set; }

Property Value

Type	Description
System.String	Accepts a string value. The default value is `String.Empty`.

OnClick

Event triggers when click the toolbar item.

Declaration

public EventCallback<ClickEventArgs> OnClick { get; set; }

Property Value

Type
Microsoft.AspNetCore.Components.EventCallback<ClickEventArgs>

Remarks

You can get the clicked toolbar item details.

Examples

In the below code example, the clicked toolbar item text can be obtained from the OnClick event.

<SfToolbar>
    <ToolbarItems>
        <ToolbarItem Text="Cut" TooltipText="Cut" OnClick="ItemClick"></ToolbarItem>
        <ToolbarItem Text="Copy" TooltipText="Copy"></ToolbarItem>
        <ToolbarItem Text="Paste" TooltipText="Paste"></ToolbarItem>
    </ToolbarItems>
</SfToolbar>
@code {
    public void ItemClick(ClickEventArgs args)
        string clickedText = args.Item.Text;
    }
}

Overflow

Gets or sets a value that indicates whether to display the toolbar item on toolbar or not, when the content is too large to fit available space.

Declaration

public OverflowOption Overflow { get; set; }

Property Value

Type	Description
OverflowOption	One of the OverflowOption enumeration. The default value is None

Remarks

If the OverflowOption is Show, always shows the toolbar item as the primary priority on the Toolbar. If the OverflowOption is Hide, always shows the toolbar item as the secondary priority on the popup. If the OverflowOption is None, no priority were set for toolbar item, as per normal order moves to popup when content exceeds. This property is applicable only when OverflowMode is Popup of Extended.

PrefixIcon

Gets or sets the classes to display an icon for toolbar button item.

Declaration

public string PrefixIcon { get; set; }

Property Value

Type	Description
System.String	Accepts a string value. The default value is `String.Empty`.

Remarks

The icon will be positioned before the text content if Text is available, otherwise the icon alone will be rendered.

Examples

<SfToolbar>
    <ToolbarItems>
        <ToolbarItem Text="Cut" PrefixIcon="e-icons e-cut"></ToolbarItem>
    </ToolbarItems>
</SfToolbar>

ShowAlwaysInPopup

Gets or sets the toolbar items whether to display always in popup or not.

Declaration

public bool ShowAlwaysInPopup { get; set; }

Property Value

Type	Description
System.Boolean	`true`, to render the toolbar item in popup. The default value is `false`.

Remarks

It allows to maintain toolbar item on popup always but it does not work for toolbar priority items. This property is applicable only when OverflowMode is Popup of Extended.

ShowTextOn

Gets or sets a value that indicates whether to display the button text on toolbar or popup.

Declaration

public DisplayMode ShowTextOn { get; set; }

Property Value

Type	Description
DisplayMode	One of the DisplayMode enumeration. The default value is Both

Remarks

If the DisplayMode is Toolbar, text will be displayed on Toolbar only. If the DisplayMode is Overflow, text will be displayed only when content overflows to popup. If the DisplayMode is Both, text will be displayed on both popup and Toolbar.

SuffixIcon

Gets or sets the classes to display an icon for toolbar button item.

Declaration

public string SuffixIcon { get; set; }

Property Value

Type	Description
System.String	Accepts a string value. The default value is `String.Empty`.

Remarks

The icon will be positioned after the text content if Text is available, otherwise the icon alone will be rendered.

Examples

<SfToolbar>
    <ToolbarItems>
        <ToolbarItem Text="Cut" SuffixIcon="e-icons e-cut"></ToolbarItem>
    </ToolbarItems>
</SfToolbar>

TabIndex

Gets or sets the tab order of the Toolbar items. When positive values assigned, it allows to switch focus to the next/previous toolbar items with Tab/ShiftTab keys.

Declaration

public int TabIndex { get; set; }

Property Value

Type	Description
System.Int32	Tab index of toolbar item. The default value is `-1`.

Remarks

By default, user can able to switch between items only via arrow keys. If the value is set to 0 for all tool bar items, then tab switches based on element order.

Template

Gets or sets the HTML element content for the toolbar item.

Declaration

public RenderFragment Template { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.RenderFragment	The value used to build the content.

Examples

<SfToolbar>
    <ToolbarItems>
        <ToolbarItem>
            <Template>
                <input type='checkbox' title="Accept" checked/>
            </Template>
        </ToolbarItem>
    </ToolbarItems>
</SfToolbar>

Text

Gets or sets the text content for toolbar button item.

Declaration

public string Text { get; set; }

Property Value

Type	Description
System.String	Accepts a string value. The default value is `String.Empty`.

Examples

<SfToolbar>
    <ToolbarItems>
        <ToolbarItem Text="Cut"></ToolbarItem>
    </ToolbarItems>
</SfToolbar>

TooltipText

Gets or sets the tooltip text content to be displayed on hovering the toolbar button item.

Declaration

public string TooltipText { get; set; }

Property Value

Type	Description
System.String	Accepts a string value. The default value is `String.Empty`.

Examples

<SfToolbar>
    <ToolbarItems>
        <ToolbarItem Text="Cut" TooltipText="Cut"></ToolbarItem>
    </ToolbarItems>
</SfToolbar>

Type

Gets or sets a value that indicates the type of toolbar item to be rendered in toolbar.

Declaration

public ItemType Type { get; set; }

Property Value

Type	Description
ItemType	One of the ItemType enumeration. The default value is Button

Remarks

If the ItemType is Button, creates the Button control with its given properties like text, prefixIcon, etc. If the ItemType is Separator, adds a horizontal line that separates the toolbar item. If the ItemType is Spacer, adds a space that separates the toolbar item. If the ItemType is Input, creates an input element that is applicable to template rendering with Syncfusion controls like DropDownList, AutoComplete, etc.

Visible

Gets or sets whether the toolbar item is hidden or not.

Declaration

public bool Visible { get; set; }

Property Value

Type	Description
System.Boolean	`false`, to hide the toolbar item. The default value is `true`.

Width

Gets or sets the width of the toolbar button item 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 button item will render based on specified width otherwise the default width value `auto` is set.

Methods

BuildRenderTree(RenderTreeBuilder)

Declaration

protected override void BuildRenderTree(RenderTreeBuilder __builder)

Parameters

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

Dispose(Boolean)

Dispose unmanaged resources in the Syncfusion Blazor component.

Declaration

protected override void Dispose(bool disposing)

Parameters

Type	Name	Description
System.Boolean	disposing	Boolean value to dispose the object.

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.

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.