<PrimerButtonGroup>
<PrimerButton Size="ButtonSize.Small">One</PrimerButton>
<PrimerButton Size="ButtonSize.Small">Two</PrimerButton>
</PrimerButtonGroup>
<PrimerButtonGroup>
<PrimerIconButton Size="ButtonSize.Small" Icon="IconName.Copilot16">
</PrimerIconButton>
<PrimerIconButton ClassName="is-last" Icon="IconName.TriangleDown16" OnClick="ToggleMenu" OnElementReferenceCaptured="OnTargetRefCaptured" />
<PrimerAnchoredOverlay IsOpen="@IsMenuOpen"
WrapperRef="@TriggerRef" OnClose="CloseMenu">
<OverlayContent>
<PrimerActionList>
<PrimerActionListItem>
<ChildContent>Item One</ChildContent>
</PrimerActionListItem>
<PrimerActionListItem>
<ChildContent>Item Two</ChildContent>
</PrimerActionListItem>
</PrimerActionList>
</OverlayContent>
</PrimerAnchoredOverlay>
</PrimerButtonGroup>
@code{
private void CloseMenu() => IsMenuOpen = false;
private async Task ToggleMenu()
{
if (!IsMenuOpen)
{
var rect = await JSInterop.GetBoundingClientRect(TriggerRef);
MenuTop = rect.Bottom + 4;
MenuLeft = rect.Left;
}
IsMenuOpen = !IsMenuOpen;
}
}
Available options for PrimerButtonGroup component
Name | Description | Default Value | CSS Class |
---|---|---|---|
ChildContent | Button components inside the group | - | BtnGroup-item |
CascadingValue | Marks buttons inside group | true | - |
[Inject]
private Blazor.PrimerUI.PrimerBlazorJsInterop JSInterop { get; set; } = default!;
private bool IsMenuOpen;
private double MenuTop;
private double MenuLeft;
private ElementReference TriggerRef;
private void CloseMenu() => IsMenuOpen = false;
private async Task ToggleMenu()
{
if (!IsMenuOpen)
{
var rect = await JSInterop.GetBoundingClientRect(TriggerRef);
MenuTop = rect.Bottom + 4;
MenuLeft = rect.Left;
}
IsMenuOpen = !IsMenuOpen;
}
private void OnTargetRefCaptured(ElementReference element)
{
TriggerRef = element;
}