Appearance Settings

This article outlines the available ToolBar parameters, which control its appearance.

FillMode

The FillMode parameter controls if the ToolBar will have a background and borders. To set the parameter value, use the string members of the static class ThemeConstants.ToolBar.FillMode.

FillMode Class Member	String Value
Solid (default)	"solid"
Flat	"flat"
Outline	"outline"

The built-in fill modes

@{
    var fields = typeof(Telerik.Blazor.ThemeConstants.ToolBar.FillMode)
        .GetFields(System.Reflection.BindingFlags.Public
            | System.Reflection.BindingFlags.Static
            | System.Reflection.BindingFlags.FlattenHierarchy)
        .Where(field => field.IsLiteral && !field.IsInitOnly).ToList();

    foreach (var field in fields)
    {
        string fillMode = field.GetValue(null).ToString();

        <div style="float:left; margin: 20px;">
            <TelerikToolBar FillMode="@fillMode">
                <ToolBarButton Icon="@SvgIcon.Cut">Cut</ToolBarButton>
                <ToolBarButton Icon="@SvgIcon.Copy">Copy</ToolBarButton>
                <ToolBarButton Icon="@SvgIcon.Clipboard">Paste</ToolBarButton>
            </TelerikToolBar>
        </div>
    }
}

Size

You can increase or decrease the size of the ToolBar by setting the Size parameter to a member of the Telerik.Blazor.ThemeConstants.ToolBar.Size class:

Class members	Manual declarations
Small	sm
Medium default value	md
Large	lg

The built-in sizes

@{
    var fields = typeof(Telerik.Blazor.ThemeConstants.ToolBar.Size)
        .GetFields(System.Reflection.BindingFlags.Public 
        | System.Reflection.BindingFlags.Static
        | System.Reflection.BindingFlags.FlattenHierarchy)
        .Where(field => field.IsLiteral && !field.IsInitOnly).ToList();

    foreach (var field in fields)
    {
        string size = field.GetValue(null).ToString();

        <div style="float:left; margin: 20px;">
            <TelerikToolBar Size="@size">
                <ToolBarButton Icon="@SvgIcon.Cut">Cut</ToolBarButton>
                <ToolBarButton Icon="@SvgIcon.Copy">Copy</ToolBarButton>
                <ToolBarButton Icon="@SvgIcon.Clipboard">Paste</ToolBarButton>
            </TelerikToolBar>
        </div>
    }
}

See Also

• Live Demo: ToolBar Appearance