HxDropdownButtonGroup

Bootstrap 5 Dropdown component for dropdown-buttons.
For generic dropdowns use HxDropdown.

Basic usage #

Dropdowns are usualy used in combination with a button. For such case use the HxDropdownButtonGroup and HxDropdownToggleButton.

<HxDropdownButtonGroup>
	<HxDropdownToggleButton Color="ThemeColor.Secondary">Dropdown button</HxDropdownToggleButton>
	<HxDropdownMenu>
		<HxDropdownItemNavLink Href="/components/HxDropdown">Link with Href</HxDropdownItemNavLink>
		<HxDropdownItem OnClick="HandleDropdownItemClick">Item with OnClick action</HxDropdownItem>
		<HxDropdownDivider />
		<HxDropdownItemText>Some text only</HxDropdownItemText>
	</HxDropdownMenu>
</HxDropdownButtonGroup>

@message

@code {
	private string message;
	private void HandleDropdownItemClick() => message = "Dropdown item clicked";
}

Button variants #

Split button #

Set HxDropdownButtonGroup.Split="true" and leave the HxDrodownButtonToggle.Text empty (you can use the ChildContent to improve accessibility).

Sizing #

HxDropdowns work with buttons of all sizes, including default and split dropdown buttons.

Other #

You can use all the generic HxDropdown features such as:

API

Parameters

Name Type Description
AdditionalAttributes Dictionary<string, object> Additional attributes to be splatted onto an underlying div element.
AutoClose DropdownAutoClose By default, the dropdown menu is closed when clicking inside or outside the dropdown menu (DropdownAutoClose.True). You can use the AutoClose parameter to change this behavior of the dropdown. https://getbootstrap.com/docs/5.1/components/dropdowns/#auto-close-behavior.
ChildContent RenderFragment Content of the component.
CssClass string Any additional CSS class to apply.
Direction DropdownDirection Direction in which the dropdown is opened.
Split bool Set true to create a split dropdown (using a btn-group).

HxDropdownToggleButton

Bootstrap Dropdown toggle button which triggers the HxDropdownButtonGroup to open.

API

Parameters

Name Type Description
AdditionalAttributes Dictionary<string, object> Additional attributes to be splatted onto an underlying <button> element.
ChildContent RenderFragment Button content.
Color ThemeColor? Bootstrap button style - theme color.
Default is taken from HxButton.Defaults (ThemeColor.None if not customized).
CssClass string Custom CSS class to render with the <button />.
When using Tooltip you might want to use TooltipWrapperCssClass instead of CssClass to get the desired result.
DropdownOffset ValueTuple<int, int>? Offset (skidding, distance) of the dropdown relative to its target. Default is (0, 2).
DropdownReference string Reference element of the dropdown menu. Accepts the values of toggle (default), parent, an HTMLElement reference (e.g. #id) or an object providing getBoundingClientRect. For more information refer to Popper's constructor docs and virtual element docs.
EditContext EditContext Associated EditContext.
Enabled bool? When null (default), the Enabled value is received from cascading FormState. When value is false, input is rendered as disabled. To set multiple controls as disabled use HxFormState.
FormId string Specifies the form the button belongs to.
Icon IconBase Icon to render into the button.
IconPlacement ButtonIconPlacement? Position of the icon within the button. Default is ButtonIconPlacement.Start (configurable through HxButton.Defaults).
OnClick EventCallback<MouseEventArgs> Raised after the button is clicked.
OnClickPreventDefault bool Prevents the default action for the onclick event. Deafult is false.
OnClickStopPropagation bool Stop onClick-event propagation. Deafult is true.
OnInvalidClick EventCallback<MouseEventArgs> Raised after the button is clicked and EditContext validation fails.
OnValidClick EventCallback<MouseEventArgs> Raised after the button is clicked and EditContext validation succeeds.
Outline bool? Bootstrap "outline" button style.
Settings ButtonSettings Set of settings to be applied to the component instance (overrides HxButton.Defaults, overriden by individual parameters).
SingleClickProtection bool Set false if you want to allow multiple OnClick handlers in parallel. Default is true.
Size ButtonSize? Button size. Default is ButtonSize.Regular.
Spinner bool? Set state of the embedded HxSpinner. Leave null if you want automated spinner when any of the OnClick handlers is running. You can set an explicit false constant to disable (override) the spinner automation.
Text string Text of the button.
Tooltip string Tooltip text.
If set, a span wrapper will be rendered around the <button />. For most scenarios you will then use TooltipWrapperCssClass instead of CssClass.
TooltipCssClass string Custom CSS class to render with the tooltip.
TooltipPlacement TooltipPlacement Tooltip placement.
TooltipWrapperCssClass string Custom CSS class to render with the tooltip span wrapper of the <button />.
If set, the span wrapper will be rendered no matter the Tooltip text is set or not.

Event callbacks

Name Type Description
OnHidden EventCallback Fired when the dropdown has finished being hidden from the user and CSS transitions have completed.
OnShown EventCallback Fired when the dropdown has been made visible to the user and CSS transitions have completed.

Methods

Method Returns Description
HideAsync() Task Hides the dropdown.
ShowAsync() Task Shows the dropdown.

Static properties

Property Type Description
Defaults ButtonSettings Application-wide defaults for HxDropdownToggleButton and derived components.
An unhandled error has occurred. Reload 🗙