Bootstrap 5 Dropdown component for dropdown-buttons.
For generic dropdowns use HxDropdown
.
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";
}
Set HxDropdownButtonGroup.Split="true"
and leave the HxDrodownButtonToggle.Text
empty (you can use the ChildContent
to improve accessibility).
HxDropdowns work with buttons of all sizes, including default and split dropdown buttons.
You can use all the generic HxDropdown
features such as:
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.2/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 ). |
Bootstrap Dropdown toggle button which triggers the HxDropdownButtonGroup
to open.
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. |
IconCssClass | string |
CSS class to be rendered with the button icon. |
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. Default is false . |
OnClickStopPropagation | bool |
Stop onClick-event propagation. Default 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 , overridden 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. |
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. |
Method | Returns | Description |
---|---|---|
HideAsync() | Task |
Hides the dropdown. |
ShowAsync() | Task |
Shows the dropdown. |
Property | Type | Description |
---|---|---|
Defaults | ButtonSettings |
Application-wide defaults for HxDropdownToggleButton and derived components. |