Accordion

This component can be used to expand and collapse sections of content, making it easier to navigate and manage large amounts of information.

Properties

Name

Default

Description

title

The title of the accordion item.

content

The content of the accordion item. This can include HTML strings.

open

false

A bindable boolean indicating whether the accordion item is open or closed.

icon

An icon component to display alongside the title.

Example

<Accordion title="What is Accordion?" icon={IconLayers}>
   Accordion is a UI component that allows users to expand and collapse sections of content, making
   it easier to navigate and manage large amounts of information.
</Accordion>

Accordion is a UI component that allows users to expand and collapse sections of content, making it easier to navigate and manage large amounts of information.

Custom Colors

The Accordion component allows you to customize its appearance by changing various color properties such as headerColor, textColor, openedColor, borderColor, and topBorderColor.

Name

Default

Description

headerColor

none

Sets the background color of the accordion header.

textColor

var(--text)

Sets the text color of the accordion title and content.

openedColor

var(--hover)

Sets the background color of the accordion header when it is opened.

borderColor

var(--border)

Sets the border color of the accordion.

topBorderColor

var(--border)

Sets the top border color of the accordion.

Example

<Accordion
 title="Custom Colors"
 icon={IconLayers}
 headerColor="#d5d5fd"
 textColor="#fffff"
 openedColor="#cacaf1"
 borderColor="#fbf3ff"
 topBorderColor="#fbf3ff"
    >
 Set custom colors for the Accordion component.
    </Accordion>

Set custom colors for the Accordion component.