menu

Blazor

  • Code Examples
  • Upgrade Guide
  • User Guide
  • Demos
  • Support
  • Forums
  • Download
Class ToolbarItem - Blazor API Reference | Syncfusion

    Show / Hide Table of Contents

    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.

    Back to top Generated by DocFX
    Copyright © 2001 - 2025 Syncfusion Inc. All Rights Reserved