Collapse

import { AXCollapseModule } from '@acorex/components/collapse';

Collapse component is a UI element that allows the creation of collapsible content sections. It enables users to toggle the visibility of content with a collapsible header, offering an intuitive and space-efficient way to organize information. With customizable features like a custom header template, accordion behavior, and event callbacks, it enhances flexibility and user interaction.

Overview

In this section, you can test different options of this component and see the output in real time

Google LLC is an American multinational technology company focusing on artificial intelligence, online advertising, search engine technology, cloud computing, computer software, quantum computing, e-commerce, and consumer electronics.

Microsoft Corporation is an American multinational technology corporation headquartered in Redmond, Washington. Microsoft's best-known software products are the Windows line of operating systems, the Microsoft 365 suite of productivity applications, and the Edge web browser.

Apple Inc. is an American multinational technology company headquartered in Cupertino, California, in Silicon Valley. It designs, develops, and sells consumer electronics, computer software, and online services.

Look

Solid

Accordion Mode

Usage

A simple example of using collapse.

Preview

Code

Custom header template

Allows users to define a personalized header content by providing a custom template, enabling unique and flexible styling options for the collapsible panel's header section.

Preview

Code

Accordion mode

With accordion, you can only have one collapse open at a time

Preview

Code

Header Icon

With icon property, you can show icon in collapse header.

Preview

Code

Loading

With icon property, you can show icon in collapse header.

Preview

Code

Design Tokens

Design tokens are variables that define the visual style of ACoreX components. You can use them to change colors, typography, spacing, and other visual aspects.

Default component colors use system surface colors.

--ax-comp-collapse-margin	0.5rem	Margin around the collapse component.
--ax-comp-collapse-bg-color	var(--ax-sys-color-lightest-surface) (solid)	Background color of the collapse component. Uses the system's lightest surface color.
--ax-comp-collapse-border-color	var(--ax-sys-color-border-lightest-surface) (solid)	Border color of the collapse component. Uses the system's lightest border color.
--ax-comp-collapse-border-width	1px (solid)	Border width of the collapse component.

Props

disabled	boolean	-	Specifies the size of the circular progress indicator.
look	AXStyleLookType	solid	Specifies the color of the circular progress indicator.
isCollapsed	boolean	false	Determines the stroke width of the circular progress indicator.
showHeader	boolean	true	Specifies the progress value of the circular progress indicator.
icon	-	-	Specifies the progress value of the circular progress indicator.
caption	-	-	Specifies the progress value of the circular progress indicator.
headerTemplate	TemplateRef<any>	-	Specifies the progress value of the circular progress indicator.
isLoading	boolean	false	Specifies the progress value of the circular progress indicator.
color	string	primary	Specifies the progress value of the circular progress indicator.
isAccordiong	boolean	false	Specifies the progress value of the circular progress indicator.

Methods

onClick	AXCollapseClickEvent	Specifies the function to be called when the collapse item is clicked.
lookChange	AXStyleLookType	Specifies the function to be called when the appearance of the collapse item changes.
isCollapsedChange	any	Specifies the function to be called when the collapse state changes.
disabledChange	boolean	Specifies the function to be called when the disabled state of the collapse item changes.
onFocus	AXFocusEvent	Specifies the function to be called when the collapse item gains focus.
onBlur	AXFocusEvent	Specifies the function to be called when the collapse item loses focus.
onOptionChanged	AXOptionChangedEvent	Specifies the function to be called when an option related to the collapse item changes.