Ant Design Blazor
Collapse
A content area which can be collapsed and expanded.
When To Use
- Can be used to group or hide complex regions to keep the page clean.
Accordionis a special kind ofCollapse, which allows only one panel to be expanded at a time.
Examples
More than one panel can be expanded at a time, the first panel is initialized to be active in this case.
Accordion mode, only one panel can be expanded at a time.
Collapse is nested inside the Collapse.
A borderless style of Collapse.
Customize the background, border, margin and icon styles for each panel.
You can disable showing arrow icon by passing [ShowArrow]="false" to Panel component.
You can use Extra to put extra elements in the top right corner.
Collapse API#
| Property | Description | Type | Default Value |
|---|---|---|---|
| Accordion | ParameterEnable/disable accordion mode. When true, only one panel can be open at once. When opening another the rest collapse. | Boolean | false |
| Bordered | ParameterEnable/disable border | Boolean | true |
| ExpandIconPosition | ParameterExpand icon position | String | CollapseExpandIconPosition.Left |
| DefaultActiveKey | ParameterDefault Panel element's AntDesign.Panel.Key |
String[] | -- |
| OnChange | ParameterCallback executed when open panels change | EventCallback<String[]> | -- |
| ExpandIcon | ParameterIcon to display in AntDesign.Collapse.ExpandIconPosition |
String | right |
| ExpandIconTemplate | ParameterExpand icon content to display in AntDesign.Collapse.ExpandIconPosition. Takes priority over AntDesign.Collapse.ExpandIcon |
RenderFragment<Boolean> | -- |
| Animation | ParameterWhether enable the expand/collapse animation | Boolean | -- |
| ChildContent | ParameterContent of the collapse. Typically contains Panel elements |
RenderFragment | -- |
| Id | ParameterID for the component's HTML | String | Uniquely Generated ID |
| Class | ParameterSpecifies one or more class names for an DOM element. | String | -- |
| Style | ParameterSpecifies an inline style for a DOM element. | String | -- |
| RefBack | ParameterA ForwardRef instance. You can get a reference to the internal DOM by using AntDesign.ForwardRef.Current. |
ForwardRef | -- |
| Method Signature | Return Type | Description |
|---|---|---|
| Activate(String[] activeKeys) | void | Activate the specified panels |
| Deactivate(String[] inactiveKeys) | void | Deactivate the specified panels |
Panel API#
| Property | Description | Type | Default Value |
|---|---|---|---|
| Active | ParameterIf the panel is active or not | Boolean | false |
| Key | ParameterUnique identifier for the panel | String | -- |
| Disabled | ParameterIf true, the panel cannot be opened or closed. | Boolean | false |
| ShowArrow | ParameterDisplay an arrow or not for the panel | Boolean | true |
| Extra | ParameterExtra string for the corner of the panel | String | -- |
| ExtraTemplate | ParameterExtra content for the corner of the panel. Takes priority over AntDesign.Panel.Extra |
RenderFragment | -- |
| Header | ParameterHeader string for the panel | String | -- |
| HeaderTemplate | ParameterHeader content for the panel. Takes priority over AntDesign.Panel.Header |
RenderFragment | -- |
| OnActiveChange | ParameterCallback executed when this panel's active status changes | EventCallback<Boolean> | -- |
| ChildContent | ParameterContent for the panel. | RenderFragment | -- |
| Id | ParameterID for the component's HTML | String | Uniquely Generated ID |
| Class | ParameterSpecifies one or more class names for an DOM element. | String | -- |
| Style | ParameterSpecifies an inline style for a DOM element. | String | -- |
| RefBack | ParameterA ForwardRef instance. You can get a reference to the internal DOM by using AntDesign.ForwardRef.Current. |
ForwardRef | -- |
| Method Signature | Return Type | Description |
|---|---|---|
| SetActive(Boolean active) | void | Set the active state of the panel |
| Toggle() | void | Toggle the active state of the panel |