API reference

Inputs

multiple

Type: boolean

Default: false

Allows multiple panels to stay open simultaneously.

options

Type: { flush: boolean }

Default: { flush: false }

Configuration options. Set flush: true for borderless layout.

bindValue

Type: string

Default: undefined

Property name to bind for form control integration.

compareWith

Type: (o1: any, o2: any) => boolean

Default: (o1, o2) => o1 === o2

Custom comparison function for value equality.

Outputs

collapsedChange

Type: EventEmitter<CollapseEvent>

Emitted when panel collapse state changes. CollapseEvent contains index, collapsed, uncollapsed, and value properties.

Templates

hubAccordionPanelHeader

Marks custom header content template for rich, interactive headers

Example:

CSS variables

Colors & Backgrounds

Control the color scheme and background colors of the accordion components

`--hub-accordion-color`

Type: color

Default:#212529

Main text color for accordion content

Examples:

#333333rgb(33, 37, 41)var(--bs-body-color)

`--hub-accordion-bg`

Type: color

Default:#fff

Background color for accordion panels

Examples:

#ffffff#f8f9fatransparent

`--hub-accordion-btn-color`

Type: color

Default:#212529

Text color for accordion headers/buttons

Examples:

#495057var(--bs-dark)#333

`--hub-accordion-btn-bg`

Type: color

Default:#fff

Background color for accordion headers/buttons

Examples:

#f8f9favar(--bs-light)transparent

`--hub-accordion-active-color`

Type: color

Default:#0c63e4

Text color for active/expanded accordion headers

Examples:

#0d6efdvar(--bs-primary)#007bff

`--hub-accordion-active-bg`

Type: color

Default:#e7f1ff

Background color for active/expanded accordion headers

Examples:

rgba(13, 110, 253, 0.1)var(--bs-primary-bg-subtle)#f0f8ff

Borders & Layout

Configure borders, spacing, and overall layout appearance

`--hub-accordion-border-color`

Type: color

Default:rgba(0, 0, 0, 0.125)

Border color around accordion panels

Examples:

#dee2e6var(--bs-border-color)transparent

`--hub-accordion-border-width`

Type: length

Default:1px

Width of accordion panel borders

Examples:

02px0.5rem

`--hub-accordion-border-radius`

Type: length

Default:0.25rem

Border radius for accordion corners

Examples:

00.375rem0.5rem1rem

`--hub-accordion-inner-border-radius`

Type: length

Default:calc(0.25rem - 1px)

Inner border radius for seamless nested borders

Examples:

0calc(0.375rem - 1px)0.25rem

Spacing & Typography

Control padding, margins, and typography within accordion components

`--hub-accordion-btn-padding-x`

Type: length

Default:1.25rem

Horizontal padding inside accordion headers

Examples:

1rem1.5rem2rem

`--hub-accordion-btn-padding-y`

Type: length

Default:1rem

Vertical padding inside accordion headers

Examples:

0.75rem1.25rem1.5rem

`--hub-accordion-body-padding-x`

Type: length

Default:1.25rem

Horizontal padding inside accordion content areas

Examples:

1rem1.5rem2rem

`--hub-accordion-body-padding-y`

Type: length

Default:1rem

Vertical padding inside accordion content areas

Examples:

0.75rem1.25rem1.5rem

Icons & Visual Effects

Customize accordion icons, transitions, and visual feedback

`--hub-accordion-btn-icon-width`

Type: length

Default:1.25rem

Width and height of the accordion toggle icon

Examples:

1rem1.5rem2rem

`--hub-accordion-btn-icon-transform`

Type: string

Default:rotate(-180deg)

CSS transform applied to icon when accordion is expanded

Examples:

rotate(180deg)rotate(90deg)scaleY(-1)

`--hub-accordion-btn-focus-box-shadow`

Type: shadow

Default:0 0 0 0.25rem rgba(13, 110, 253, 0.25)

Box shadow for focused accordion headers

Examples:

0 0 0 0.2rem rgba(0, 123, 255, 0.25)none0 0 0 3px rgba(66, 153, 225, 0.5)

Transitions & Animations

Configure animation timing and transition effects

`--hub-accordion-transition`

Type: transition

Default:color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, border-radius 0.15s ease

CSS transition for accordion state changes

Examples:

all 0.3s easebackground-color 0.2s ease-in-outnone

`--hub-accordion-btn-icon-transition`

Type: transition

Default:transform 0.2s ease-in-out

CSS transition for accordion icon animations

Examples:

transform 0.3s easetransform 0.15s linearnone

Styling and theming

No styling examples are documented yet. This section will include customization recipes and theming examples.