logo

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.
  • Accordion is a special kind of Collapse, 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.

expand code expand code

Accordion mode, only one panel can be expanded at a time.

expand code expand code

Collapse is nested inside the Collapse.

expand code expand code

Customize the background, border, margin and icon styles for each panel.

expand code expand code

A borderless style of Collapse.

expand code expand code

You can disable showing arrow icon by passing [ShowArrow]="false" to Panel component.

expand code expand code

You can use Extra to put extra elements in the top right corner.

expand code expand code

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
Carousel Comment
文档已更新,请点击 此处 更新。
A new version of this app is available. Click here to update.