Referencia API

Inputs

multiple

Tipo: boolean

Por defecto: false

Allows multiple panels to stay open simultaneously.

options

Tipo: { flush: boolean }

Por defecto: { flush: false }

Configuration options. Set flush: true for borderless layout.

bindValue

Tipo: string

Por defecto: undefined

Property name to bind for form control integration.

compareWith

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

Por defecto: (o1, o2) => o1 === o2

Custom comparison function for value equality.

Outputs

collapsedChange

Tipo: 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

Ejemplo:

Variables CSS

Colors & Backgrounds

Control the color scheme and background colors of the accordion components

`--hub-accordion-color`

Tipo: color

Por defecto:#212529

Main text color for accordion content

Ejemplos:

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

`--hub-accordion-bg`

Tipo: color

Por defecto:#fff

Background color for accordion panels

Ejemplos:

#ffffff#f8f9fatransparent

`--hub-accordion-btn-color`

Tipo: color

Por defecto:#212529

Text color for accordion headers/buttons

Ejemplos:

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

`--hub-accordion-btn-bg`

Tipo: color

Por defecto:#fff

Background color for accordion headers/buttons

Ejemplos:

#f8f9favar(--bs-light)transparent

`--hub-accordion-active-color`

Tipo: color

Por defecto:#0c63e4

Text color for active/expanded accordion headers

Ejemplos:

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

`--hub-accordion-active-bg`

Tipo: color

Por defecto:#e7f1ff

Background color for active/expanded accordion headers

Ejemplos:

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`

Tipo: color

Por defecto:rgba(0, 0, 0, 0.125)

Border color around accordion panels

Ejemplos:

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

`--hub-accordion-border-width`

Tipo: length

Por defecto:1px

Width of accordion panel borders

Ejemplos:

02px0.5rem

`--hub-accordion-border-radius`

Tipo: length

Por defecto:0.25rem

Border radius for accordion corners

Ejemplos:

00.375rem0.5rem1rem

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

Tipo: length

Por defecto:calc(0.25rem - 1px)

Inner border radius for seamless nested borders

Ejemplos:

0calc(0.375rem - 1px)0.25rem

Spacing & Typography

Control padding, margins, and typography within accordion components

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

Tipo: length

Por defecto:1.25rem

Horizontal padding inside accordion headers

Ejemplos:

1rem1.5rem2rem

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

Tipo: length

Por defecto:1rem

Vertical padding inside accordion headers

Ejemplos:

0.75rem1.25rem1.5rem

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

Tipo: length

Por defecto:1.25rem

Horizontal padding inside accordion content areas

Ejemplos:

1rem1.5rem2rem

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

Tipo: length

Por defecto:1rem

Vertical padding inside accordion content areas

Ejemplos:

0.75rem1.25rem1.5rem

Icons & Visual Effects

Customize accordion icons, transitions, and visual feedback

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

Tipo: length

Por defecto:1.25rem

Width and height of the accordion toggle icon

Ejemplos:

1rem1.5rem2rem

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

Tipo: string

Por defecto:rotate(-180deg)

CSS transform applied to icon when accordion is expanded

Ejemplos:

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

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

Tipo: shadow

Por defecto:0 0 0 0.25rem rgba(13, 110, 253, 0.25)

Box shadow for focused accordion headers

Ejemplos:

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`

Tipo: transition

Por defecto: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

Ejemplos:

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

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

Tipo: transition

Por defecto:transform 0.2s ease-in-out

CSS transition for accordion icon animations

Ejemplos:

transform 0.3s easetransform 0.15s linearnone

Estilos y theming

Todavía no hay ejemplos de estilos documentados. Esta sección incluirá recetas de personalización y ejemplos de theming.