HxCollapse #
Bootstrap 5 Collapse component.
Basic usage #
Some placeholder content for the collapse component.
This panel is hidden by default but revealed when the user activates the relevant trigger.
<HxCollapseToggleButton Text="Toggle" CollapseTarget="#myCollapse" Color="ThemeColor.Primary" CssClass="mb-3" />
<HxCollapse Id="myCollapse">
<HxCard>
<BodyTemplate>
Some placeholder content for the collapse component.
This panel is hidden by default but revealed when the user activates the relevant trigger.
</BodyTemplate>
</HxCard>
</HxCollapse>Horizontal #
You can change the animation direction using the CollapseDirection parameter.
This is some placeholder content for a horizontal collapse. It's hidden by default and shown when triggered.
Multiple targets #
You can use the CollapseTarget selector to toggle multiple targets.
Some placeholder content for the first collapse component of this multi-collapse example.
This panel is hidden by default but revealed when the user activates the relevant trigger.
Some placeholder content for the second collapse component of this multi-collapse example.
This panel is hidden by default but revealed when the user activates the relevant trigger.
Custom toggle element #
Use HxCollapseToggleElement (with ElementName="...") instead of HxCollapseToggleButton to create a custom toggler (usually you will add role="button" to apply a pointer cursor type).
Custom toggle element
Some placeholder content for the collapse component.
This panel is hidden by default but revealed when the user activates the relevant trigger.
Start as expanded #
The HxCollapse starts in a collapsed state by default. If you want it to be expanded, set the InitiallyExpanded parameter:
Some placeholder content for the collapse component.
This panel is hidden by default but revealed when the user activates the relevant trigger.
Programming #
You can use the ShowAsync() and HideAsync() methods to expand/collapse the component from your code.
Some placeholder content for the collapse component.
This panel is hidden by default but revealed when the user activates the relevant trigger.
API #
Parameters #
| Name | Type | Description |
|---|---|---|
| AdditionalAttributes | Dictionary<string, object> |
Additional attributes to be splatted onto an underlying div element. |
| ChildContent | RenderFragment |
Content of the collapse. |
| CollapseDirection | CollapseDirection |
Direction of the animation.
Default is CollapseDirection.Vertical. |
| CssClass | string |
Additional CSS class. |
| Id | string |
Element ID. To be referenced by HxCollapseToggleButton.CollapseTarget.
(Autogenerated GUID if not set explicitly.) |
| InitiallyExpanded | bool |
Determines whether the collapse will be open or closed (expanded or collapsed) when first rendered. |
| Parent | string |
If a parent is provided, then all collapsible elements under the specified parent will be closed when this collapsible item is shown. (Similar to traditional accordion behavior.) |
Event callbacks #
| Name | Type | Description |
|---|---|---|
| OnHidden | EventCallback<string> |
This event is fired when a collapse element has been hidden from the user (will wait for CSS transitions to complete). |
| OnShown | EventCallback<string> |
This event is fired when a collapse element has become visible to the user (will wait for CSS transitions to complete). |
Methods #
| Method | Returns | Description |
|---|---|---|
| HideAsync() | Task |
Collapses the item. |
| ShowAsync() | Task |
Expands the item. |
HxCollapseToggleButton #
Bootstrap Collapse toggle (in the form of a button) which triggers the HxCollapse to toggle.
Derived from HxButton (including HxButton.Defaults inheritance).
API #
Parameters #
| Name | Type | Description |
|---|---|---|
| AdditionalAttributes | Dictionary<string, object> |
Additional attributes to be splatted onto an underlying <button> element. |
| ChildContent | RenderFragment |
Button content. |
| CollapseTarget | string |
Target selector of the toggle.
Use #id to reference a single HxCollapse or .class for multiple HxCollapses. |
| Color | ThemeColor? |
Bootstrap button style - theme color. The default is taken from 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. |
| 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. The default is ButtonIconPlacement.Start (configurable through Defaults). |
| OnClickPreventDefault | bool |
Prevents the default action for the onclick event. Default is false. |
| OnClickStopPropagation | bool |
Stops onClick-event propagation. Default is true. |
| Outline | bool? |
Bootstrap "outline" button style. |
| Settings | ButtonSettings |
Set of settings to be applied to the component instance (overrides Defaults, overridden by individual parameters). |
| SingleClickProtection | bool |
Sets false if you want to allow multiple OnClick handlers in parallel. Default is true. |
| Size | ButtonSize? |
Button size. The default is ButtonSize.Regular. |
| Spinner | bool? |
Sets the 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. |
| TooltipContainer | string |
Appends the tooltip to a specific element. Default is body. |
| 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 whether the Tooltip text is set or not. |
Event callbacks #
| Name | Type | Description |
|---|---|---|
| OnClick | EventCallback<MouseEventArgs> |
Raised after the button is clicked. |
| 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. |
Static properties #
| Property | Type | Description |
|---|---|---|
| Defaults | ButtonSettings |
Application-wide defaults for HxButton and derived components. |
HxCollapseToggleElement #
Bootstrap Collapse toggle triggering the HxCollapse to toggle.
API #
Parameters #
| Name | Type | Description |
|---|---|---|
| AdditionalAttributes | IDictionary<string, object> |
A collection of additional attributes that will be applied to the created element. |
| ChildContent | RenderFragment |
Content of the component. |
| CollapseTarget | string |
Target selector of the toggle.
Use #id to reference a single HxCollapse or .class for multiple HxCollapses. |
| CssClass | string |
Custom CSS class to render with the toggle element. |
| ElementName | string |
Gets or sets the name of the element to render. Default is span. |