starred/radzen-blazor
1
0
Fork 0
mirror of https://github.com/radzenhq/radzen-blazor.git synced 2026-07-08 18:16:08 +00:00
Code Issues 1.3k Packages Projects Releases 28 Wiki Activity
Files
609622692e6b368edee3238744c3d0ba6b8973ea
radzen-blazor/RadzenBlazorDemos/Pages/SplitButtonFlat.razor
Atanas Korchev 4bbb0eed85 Use semantic button style names in SplitButton demos 
Replace generic "SplitButton" text with style-specific labels (Primary,
Secondary, Info, Success, Warning, Danger, Light, Dark) to match the
convention used in the Button demos.
2026-02-18 12:01:27 +02:00

228 lines
13 KiB
Plaintext
Raw Blame History

@inject NotificationService NotificationService
<RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" Gap="1rem" Wrap="FlexWrap.Wrap">
<RadzenSplitButton Variant="Variant.Flat" Click=@(args => OnClick(args, "Primary split button")) Text="Primary">
<ChildContent>
<RadzenSplitButtonItem Text="Item1" Value="1" />
<RadzenSplitButtonItem Text="Item2" Value="2" />
</ChildContent>
</RadzenSplitButton>
<RadzenSplitButton Variant="Variant.Flat" Click=@(args => OnClick(args, "Secondary split button")) Text="Secondary" ButtonStyle="ButtonStyle.Secondary">
<ChildContent>
<RadzenSplitButtonItem Text="Item1" Value="1" />
<RadzenSplitButtonItem Text="Item2" Value="2" />
</ChildContent>
</RadzenSplitButton>
<RadzenSplitButton Variant="Variant.Flat" Click=@(args => OnClick(args, "Info split button")) Text="Info" ButtonStyle="ButtonStyle.Info">
<ChildContent>
<RadzenSplitButtonItem Text="Item1" Value="1" />
<RadzenSplitButtonItem Text="Item2" Value="2" />
</ChildContent>
</RadzenSplitButton>
<RadzenSplitButton Variant="Variant.Flat" Click=@(args => OnClick(args, "Success split button")) Text="Success" ButtonStyle="ButtonStyle.Success">
<ChildContent>
<RadzenSplitButtonItem Text="Item1" Value="1" />
<RadzenSplitButtonItem Text="Item2" Value="2" />
</ChildContent>
</RadzenSplitButton>
<RadzenSplitButton Variant="Variant.Flat" Click=@(args => OnClick(args, "Warning split button")) Text="Warning" ButtonStyle="ButtonStyle.Warning">
<ChildContent>
<RadzenSplitButtonItem Text="Item1" Value="1" />
<RadzenSplitButtonItem Text="Item2" Value="2" />
</ChildContent>
</RadzenSplitButton>
<RadzenSplitButton Variant="Variant.Flat" Click=@(args => OnClick(args, "Danger split button")) Text="Danger" ButtonStyle="ButtonStyle.Danger">
<ChildContent>
<RadzenSplitButtonItem Text="Item1" Value="1" />
<RadzenSplitButtonItem Text="Item2" Value="2" />
</ChildContent>
</RadzenSplitButton>
</RadzenStack>
<RadzenText TextStyle="TextStyle.Subtitle1" TagName="TagName.H3" class="rz-mt-4">Flat Shades</RadzenText>
<RadzenStack Gap="1rem">
<RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" Gap="1rem" Wrap="FlexWrap.Wrap">
<RadzenSplitButton Variant="Variant.Flat" Click=@(args => OnClick(args, "Primary split button")) Text="Primary" Shade="Shade.Lighter">
<ChildContent>
<RadzenSplitButtonItem Text="Item1" Value="1" />
<RadzenSplitButtonItem Text="Item2" Value="2" />
</ChildContent>
</RadzenSplitButton>
<RadzenSplitButton Variant="Variant.Flat" Click=@(args => OnClick(args, "Secondary split button")) Text="Secondary" ButtonStyle="ButtonStyle.Secondary" Shade="Shade.Lighter">
<ChildContent>
<RadzenSplitButtonItem Text="Item1" Value="1" />
<RadzenSplitButtonItem Text="Item2" Value="2" />
</ChildContent>
</RadzenSplitButton>
<RadzenSplitButton Variant="Variant.Flat" Click=@(args => OnClick(args, "Info split button")) Text="Info" ButtonStyle="ButtonStyle.Info" Shade="Shade.Lighter">
<ChildContent>
<RadzenSplitButtonItem Text="Item1" Value="1" />
<RadzenSplitButtonItem Text="Item2" Value="2" />
</ChildContent>
</RadzenSplitButton>
<RadzenSplitButton Variant="Variant.Flat" Click=@(args => OnClick(args, "Success split button")) Text="Success" ButtonStyle="ButtonStyle.Success" Shade="Shade.Lighter">
<ChildContent>
<RadzenSplitButtonItem Text="Item1" Value="1" />
<RadzenSplitButtonItem Text="Item2" Value="2" />
</ChildContent>
</RadzenSplitButton>
<RadzenSplitButton Variant="Variant.Flat" Click=@(args => OnClick(args, "Warning split button")) Text="Warning" ButtonStyle="ButtonStyle.Warning" Shade="Shade.Lighter">
<ChildContent>
<RadzenSplitButtonItem Text="Item1" Value="1" />
<RadzenSplitButtonItem Text="Item2" Value="2" />
</ChildContent>
</RadzenSplitButton>
<RadzenSplitButton Variant="Variant.Flat" Click=@(args => OnClick(args, "Danger split button")) Text="Danger" ButtonStyle="ButtonStyle.Danger" Shade="Shade.Lighter">
<ChildContent>
<RadzenSplitButtonItem Text="Item1" Value="1" />
<RadzenSplitButtonItem Text="Item2" Value="2" />
</ChildContent>
</RadzenSplitButton>
</RadzenStack>
<RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" Gap="1rem" Wrap="FlexWrap.Wrap">
<RadzenSplitButton Variant="Variant.Flat" Click=@(args => OnClick(args, "Primary split button")) Text="Primary" Shade="Shade.Light">
<ChildContent>
<RadzenSplitButtonItem Text="Item1" Value="1" />
<RadzenSplitButtonItem Text="Item2" Value="2" />
</ChildContent>
</RadzenSplitButton>
<RadzenSplitButton Variant="Variant.Flat" Click=@(args => OnClick(args, "Secondary split button")) Text="Secondary" ButtonStyle="ButtonStyle.Secondary" Shade="Shade.Light">
<ChildContent>
<RadzenSplitButtonItem Text="Item1" Value="1" />
<RadzenSplitButtonItem Text="Item2" Value="2" />
</ChildContent>
</RadzenSplitButton>
<RadzenSplitButton Variant="Variant.Flat" Click=@(args => OnClick(args, "Info split button")) Text="Info" ButtonStyle="ButtonStyle.Info" Shade="Shade.Light">
<ChildContent>
<RadzenSplitButtonItem Text="Item1" Value="1" />
<RadzenSplitButtonItem Text="Item2" Value="2" />
</ChildContent>
</RadzenSplitButton>
<RadzenSplitButton Variant="Variant.Flat" Click=@(args => OnClick(args, "Success split button")) Text="Success" ButtonStyle="ButtonStyle.Success" Shade="Shade.Light">
<ChildContent>
<RadzenSplitButtonItem Text="Item1" Value="1" />
<RadzenSplitButtonItem Text="Item2" Value="2" />
</ChildContent>
</RadzenSplitButton>
<RadzenSplitButton Variant="Variant.Flat" Click=@(args => OnClick(args, "Warning split button")) Text="Warning" ButtonStyle="ButtonStyle.Warning" Shade="Shade.Light">
<ChildContent>
<RadzenSplitButtonItem Text="Item1" Value="1" />
<RadzenSplitButtonItem Text="Item2" Value="2" />
</ChildContent>
</RadzenSplitButton>
<RadzenSplitButton Variant="Variant.Flat" Click=@(args => OnClick(args, "Danger split button")) Text="Danger" ButtonStyle="ButtonStyle.Danger" Shade="Shade.Light">
<ChildContent>
<RadzenSplitButtonItem Text="Item1" Value="1" />
<RadzenSplitButtonItem Text="Item2" Value="2" />
</ChildContent>
</RadzenSplitButton>
</RadzenStack>
<RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" Gap="1rem" Wrap="FlexWrap.Wrap">
<RadzenSplitButton Variant="Variant.Flat" Click=@(args => OnClick(args, "Primary split button")) Text="Primary" Shade="Shade.Dark">
<ChildContent>
<RadzenSplitButtonItem Text="Item1" Value="1" />
<RadzenSplitButtonItem Text="Item2" Value="2" />
</ChildContent>
</RadzenSplitButton>
<RadzenSplitButton Variant="Variant.Flat" Click=@(args => OnClick(args, "Secondary split button")) Text="Secondary" ButtonStyle="ButtonStyle.Secondary" Shade="Shade.Dark">
<ChildContent>
<RadzenSplitButtonItem Text="Item1" Value="1" />
<RadzenSplitButtonItem Text="Item2" Value="2" />
</ChildContent>
</RadzenSplitButton>
<RadzenSplitButton Variant="Variant.Flat" Click=@(args => OnClick(args, "Info split button")) Text="Info" ButtonStyle="ButtonStyle.Info" Shade="Shade.Dark">
<ChildContent>
<RadzenSplitButtonItem Text="Item1" Value="1" />
<RadzenSplitButtonItem Text="Item2" Value="2" />
</ChildContent>
</RadzenSplitButton>
<RadzenSplitButton Variant="Variant.Flat" Click=@(args => OnClick(args, "Success split button")) Text="Success" ButtonStyle="ButtonStyle.Success" Shade="Shade.Dark">
<ChildContent>
<RadzenSplitButtonItem Text="Item1" Value="1" />
<RadzenSplitButtonItem Text="Item2" Value="2" />
</ChildContent>
</RadzenSplitButton>
<RadzenSplitButton Variant="Variant.Flat" Click=@(args => OnClick(args, "Warning split button")) Text="Warning" ButtonStyle="ButtonStyle.Warning" Shade="Shade.Dark">
<ChildContent>
<RadzenSplitButtonItem Text="Item1" Value="1" />
<RadzenSplitButtonItem Text="Item2" Value="2" />
</ChildContent>
</RadzenSplitButton>
<RadzenSplitButton Variant="Variant.Flat" Click=@(args => OnClick(args, "Danger split button")) Text="Danger" ButtonStyle="ButtonStyle.Danger" Shade="Shade.Dark">
<ChildContent>
<RadzenSplitButtonItem Text="Item1" Value="1" />
<RadzenSplitButtonItem Text="Item2" Value="2" />
</ChildContent>
</RadzenSplitButton>
</RadzenStack>
<RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" Gap="1rem" Wrap="FlexWrap.Wrap">
<RadzenSplitButton Variant="Variant.Flat" Click=@(args => OnClick(args, "Primary split button")) Text="Primary" Shade="Shade.Darker">
<ChildContent>
<RadzenSplitButtonItem Text="Item1" Value="1" />
<RadzenSplitButtonItem Text="Item2" Value="2" />
</ChildContent>
</RadzenSplitButton>
<RadzenSplitButton Variant="Variant.Flat" Click=@(args => OnClick(args, "Secondary split button")) Text="Secondary" ButtonStyle="ButtonStyle.Secondary" Shade="Shade.Darker">
<ChildContent>
<RadzenSplitButtonItem Text="Item1" Value="1" />
<RadzenSplitButtonItem Text="Item2" Value="2" />
</ChildContent>
</RadzenSplitButton>
<RadzenSplitButton Variant="Variant.Flat" Click=@(args => OnClick(args, "Info split button")) Text="Info" ButtonStyle="ButtonStyle.Info" Shade="Shade.Darker">
<ChildContent>
<RadzenSplitButtonItem Text="Item1" Value="1" />
<RadzenSplitButtonItem Text="Item2" Value="2" />
</ChildContent>
</RadzenSplitButton>
<RadzenSplitButton Variant="Variant.Flat" Click=@(args => OnClick(args, "Success split button")) Text="Success" ButtonStyle="ButtonStyle.Success" Shade="Shade.Darker">
<ChildContent>
<RadzenSplitButtonItem Text="Item1" Value="1" />
<RadzenSplitButtonItem Text="Item2" Value="2" />
</ChildContent>
</RadzenSplitButton>
<RadzenSplitButton Variant="Variant.Flat" Click=@(args => OnClick(args, "Warning split button")) Text="Warning" ButtonStyle="ButtonStyle.Warning" Shade="Shade.Darker">
<ChildContent>
<RadzenSplitButtonItem Text="Item1" Value="1" />
<RadzenSplitButtonItem Text="Item2" Value="2" />
</ChildContent>
</RadzenSplitButton>
<RadzenSplitButton Variant="Variant.Flat" Click=@(args => OnClick(args, "Danger split button")) Text="Danger" ButtonStyle="ButtonStyle.Danger" Shade="Shade.Darker">
<ChildContent>
<RadzenSplitButtonItem Text="Item1" Value="1" />
<RadzenSplitButtonItem Text="Item2" Value="2" />
</ChildContent>
</RadzenSplitButton>
</RadzenStack>
</RadzenStack>
<RadzenText TextStyle="TextStyle.Subtitle1" TagName="TagName.H3" class="rz-mt-4">Flat Light and Dark</RadzenText>
<RadzenText TextStyle="TextStyle.Body2" class="rz-mb-4">Light and Dark button styles don't have Shades</RadzenText>
<RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" Gap="1rem" Wrap="FlexWrap.Wrap">
<RadzenSplitButton Variant="Variant.Flat" Click=@(args => OnClick(args, "Light split button")) Text="Light" ButtonStyle="ButtonStyle.Light">
<ChildContent>
<RadzenSplitButtonItem Text="Item1" Value="1" />
<RadzenSplitButtonItem Text="Item2" Value="2" />
</ChildContent>
</RadzenSplitButton>
<RadzenSplitButton Variant="Variant.Flat" Click=@(args => OnClick(args, "Dark split button")) Text="Dark" ButtonStyle="ButtonStyle.Dark">
<ChildContent>
<RadzenSplitButtonItem Text="Item1" Value="1" />
<RadzenSplitButtonItem Text="Item2" Value="2" />
</ChildContent>
</RadzenSplitButton>
</RadzenStack>
@code {
void OnClick(RadzenSplitButtonItem item, string buttonName)
{
if (item != null)
{
NotificationService.Notify(new NotificationMessage { Severity = NotificationSeverity.Info, Summary = "SplitButton Item Clicked", Detail = $"{buttonName}, item with value {item.Value} clicked" });
}
else
{
NotificationService.Notify(new NotificationMessage { Severity = NotificationSeverity.Info, Summary = "SplitButton Clicked", Detail = $"{buttonName} clicked" });
}
}
}
Reference in New Issue View Git Blame Copy Permalink