Actions

Since 0.1.0-alpha.13

Form posts, C# on click, toggle buttons and split buttons, from the bar or the menu.

Static server-side rendering: no circuit, no WebAssembly.

Posting a form

Use Submit, Name and Value on its buttons as on a Button: in the … menu they post the same, with JavaScript off too. Put the form around the toolbar.

Preview Code

Preview

Code

BulkActions.razor

<Card Size="ControlSize.Sm" Width="Length.Full">
    <CardBody Gap="3">
        <form method="post" @formname="toolbar-bulk-actions" @onsubmit="Apply" data-enhance>
            <AntiforgeryToken />
            <Toolbar Label="Selected messages">
                <ToolbarText>3 selected</ToolbarText>
                <ToolbarButton Submit Name="intent" Value="archive" StartIcon="Lucide.Archive" OnClick='() => _pressed = "archive"'>Archive</ToolbarButton>
                <ToolbarButton Submit Name="intent" Value="read" StartIcon="Lucide.MailOpen" OnClick='() => _pressed = "read"'>Mark read</ToolbarButton>
                <ToolbarButton Submit Name="intent" Value="delete" StartIcon="Lucide.Trash" Accent="Accent.Danger" OnClick='() => _pressed = "delete"'>Delete</ToolbarButton>
            </Toolbar>
        </form>
        @if (_result is not null)
        {
            <Alert Status="Status.Success">@_result</Alert>
        }
    </CardBody>
</Card>

@code {
    // Static pages: the pressed button's (or menu item's) Name=Value posts with the form.
    [SupplyParameterFromForm(FormName = "toolbar-bulk-actions", Name = "intent")]
    private string? Intent { get; set; }

    // Interactive pages post nothing, so OnClick says which it was.
    private string? _pressed;
    private string? _result;

    private void Apply() => _result = (Intent ?? _pressed) switch
    {
        "archive" => "Archived 3 messages.",
        "read" => "Marked 3 messages as read.",
        "delete" => "Deleted 3 messages.",
        _ => null,
    };
}

Static: The same posts, without a full reload.

Running C# on click

Use OnClick on its buttons on interactive pages; it runs from the bar or the menu.

Always Interactive

Preview Code

Preview

Count: 0

Code

OnClick.razor

<Card Size="ControlSize.Sm" Width="Length.Full">
    <CardBody Gap="3">
        <Toolbar Label="Counter">
            <ToolbarIconButton Icon="Lucide.Minus" Label="Decrease" OnClick="() => _count--" />
            <ToolbarIconButton Icon="Lucide.Plus" Label="Increase" OnClick="() => _count++" />
            <ToolbarButton StartIcon="Lucide.RotateCcw" OnClick="() => _count = 0">Reset count</ToolbarButton>
            <ToolbarButton StartIcon="Lucide.ChevronsUp" OnClick="() => _count += 10">Add ten</ToolbarButton>
        </Toolbar>
        <TextBlock Size="TextSize.Sm" Color="Color.Muted">Count: @_count</TextBlock>
    </CardBody>
</Card>

@code {
    private int _count;
}

Toggle buttons

Use @bind-Pressed on its buttons for tools that turn on and off. In the … menu they're checkbox items that toggle the same.

Always Interactive

Preview Code

Preview

Bold on, italic off, marks off, spelling on

Code

Toggles.razor

@* Toggles in a toolbar: in the … menu they're checkbox items, which toggle the same. *@
<Card Size="ControlSize.Sm" Width="Length.Full">
    <CardBody Gap="3">
        <Toolbar Label="Format">
            <ToolbarButtonGroup Label="Text style" Priority="1">
                <ToolbarIconButton Icon="Lucide.Bold" Label="Bold" @bind-Pressed="_bold" />
                <ToolbarIconButton Icon="Lucide.Italic" Label="Italic" @bind-Pressed="_italic" />
            </ToolbarButtonGroup>
            <ToolbarSeparator />
            <ToolbarButton StartIcon="Lucide.Pilcrow" @bind-Pressed="_marks">Show marks</ToolbarButton>
            <ToolbarButton StartIcon="Lucide.SpellCheck" @bind-Pressed="_spelling">Check spelling</ToolbarButton>
        </Toolbar>
        <TextBlock Size="TextSize.Sm" Color="Color.Muted">
            Bold @OnOff(_bold), italic @OnOff(_italic), marks @OnOff(_marks), spelling @OnOff(_spelling)
        </TextBlock>
    </CardBody>
</Card>

@code {
    private bool _bold = true;
    private bool _italic;
    private bool _marks;
    private bool _spelling = true;

    private static string OnOff(bool on) => on ? "on" : "off";
}

Split buttons

Use ToolbarSplitButton for a main action with a menu of related ones. In the … menu it's a submenu named by its MenuLabel, with the main action as the first item. See SplitButton.

Preview Code

Preview

Save disabled

Nothing saved yet

Code

SplitButton.razor

<Column Gap="3" Width="Length.Full">
    <form method="post" @onsubmit="Posted" @formname="toolbar-split" data-enhance>
        <AntiforgeryToken />
        <Toolbar Label="Document">
            <ToolbarButton StartIcon="Lucide.Link">Link</ToolbarButton>
            <ToolbarButton StartIcon="Lucide.Image">Image</ToolbarButton>
            <ToolbarSeparator />
            <ToolbarButton StartIcon="Lucide.Table">Table</ToolbarButton>
            <ToolbarSplitButton Label="Save" StartIcon="Lucide.Save" Submit Name="intent" Value="save" OnClick='() => _pressed = "save"' MenuLabel="More save options" Variant="ButtonVariant.Outline" Disabled="_disabled" id="toolbar-save">
                <MenuItem Submit Name="intent" Value="draft" OnClick='() => _pressed = "draft"'>Save as draft</MenuItem>
                <MenuItem Href="docs/components/split-button">Open drafts</MenuItem>
            </ToolbarSplitButton>
            @* Only ever in the … menu. *@
            <ToolbarSplitButton Label="Export" StartIcon="Lucide.Download" Href="favicon.svg" download="izzy.svg" MenuLabel="Export formats" Overflow="ToolbarOverflow.Always">
                <MenuItem Href="favicon.ico" download="izzy.ico">ICO</MenuItem>
            </ToolbarSplitButton>
            <ToolbarSplitButton Label="Publish" MenuLabel="Publish options" Position="ToolbarPosition.End" Priority="1" Accent="Accent.Primary" Variant="ButtonVariant.Solid">
                <MenuItem>Schedule</MenuItem>
            </ToolbarSplitButton>
        </Toolbar>
    </form>
    <Toolbar Label="Collapsing" CollapseLabels>
        <ToolbarSplitButton Label="Share" StartIcon="Lucide.Share2" MenuLabel="Share options">
            <MenuItem>Copy link</MenuItem>
        </ToolbarSplitButton>
        <ToolbarSplitButton Label="Print" StartIcon="Lucide.Printer" IconOnly MenuLabel="Print options">
            <MenuItem>Print to PDF</MenuItem>
        </ToolbarSplitButton>
        <ToolbarButton StartIcon="Lucide.Link">Link</ToolbarButton>
        <ToolbarButton StartIcon="Lucide.Image">Image</ToolbarButton>
        <ToolbarSplitButton Label="Publish" StartIcon="Lucide.Send" MenuLabel="Publish options" Overflow="ToolbarOverflow.Never" Position="ToolbarPosition.End">
            <MenuItem>Schedule</MenuItem>
        </ToolbarSplitButton>
    </Toolbar>
    <Switch @bind-Value="_disabled" Label="Save disabled" />
    <TextBlock Size="TextSize.Sm" Color="Color.Muted">@_result</TextBlock>
</Column>

@code {
    // Static pages: the Name=Value of what was chosen; interactive pages say it with OnClick.
    [SupplyParameterFromForm(FormName = "toolbar-split", Name = "intent")]
    private string? Intent { get; set; }

    private bool _disabled;
    private string? _pressed;
    private string _result = "Nothing saved yet";

    private void Posted() => _result = $"Posted: {Intent ?? _pressed}";
}

Static: The switch needs an interactive page; the rest works.