@jimka/typescript-ui

Appearance

@jimka/typescript-ui / layout / Accordion

Class: Accordion ​

Defined in: src/typescript/lib/layout/Accordion.ts:65

A layout manager that stacks vertically collapsible sections, each with a clickable header and an animated content panel.

Sections are defined by child components added to the container via container.addComponent(content, new AccordionConstraints(...)). The layout manager owns internally-created AccordionHeader components and panel wrapper elements; these are not visible through container.getComponents().

Animation uses a CSS height transition with overflow: hidden on the panel wrapper so closing/opening animates smoothly without affecting the layout model.

Example ​

typescript
const accordion = new Accordion();
accordion.setSingleOpen(true);

const panel = new Component();
panel.setLayoutManager(new Accordion());

const content1 = new Component();
panel.addComponent(content1, new AccordionConstraints('Section 1', true));

const content2 = new Component();
panel.addComponent(content2, new AccordionConstraints('Section 2'));

panel.setLayoutManager(accordion);

Extends ​

Constructors ​

new Accordion() ​

ts
new Accordion(options?: AccordionOptions): Accordion

Defined in: src/typescript/lib/layout/Accordion.ts:75

Parameters ​

options? ​

AccordionOptions

Returns ​

Accordion

Overrides ​

LayoutManager.constructor

Methods ​

attach() ​

ts
attach(container: Component): this

Defined in: src/typescript/lib/layout/Accordion.ts:270

Attaches to a container. Section headers and panel wrappers are created lazily in doLayout on first use.

Parameters ​

container ​

Component

The container component to attach to.

Returns ​

this

Overrides ​

LayoutManager.attach

closeSection() ​

ts
closeSection(index: number): this

Defined in: src/typescript/lib/layout/Accordion.ts:229

Closes the section at the given index.

Parameters ​

index ​

number

Zero-based section index.

Returns ​

this

delLayoutConstraints() ​

ts
delLayoutConstraints(component: Component): undefined | LayoutConstraints

Defined in: src/typescript/lib/layout/LayoutManager.ts:276

Removes and returns the stored layout constraints for a component.

Parameters ​

component ​

Component

The component whose constraints should be removed.

Returns ​

undefined | LayoutConstraints

The removed constraints, or undefined if none were stored.

Inherited from ​

LayoutManager.delLayoutConstraints

detach() ​

ts
detach(): this

Defined in: src/typescript/lib/layout/Accordion.ts:280

Detaches from the container, removing all header and panel wrapper elements from the DOM and moving content elements back to the container.

Returns ​

this

Overrides ​

LayoutManager.detach

doLayout() ​

ts
doLayout(): void

Defined in: src/typescript/lib/layout/Accordion.ts:425

Creates sections for any new components, then positions all headers, panel wrappers, and content components top-to-bottom within the container.

Returns ​

void

Overrides ​

LayoutManager.doLayout

getAnimationDuration() ​

ts
getAnimationDuration(): number

Defined in: src/typescript/lib/layout/Accordion.ts:179

Returns the CSS transition duration for open/close animation in milliseconds.

Returns ​

number

Duration in milliseconds.

getClassName() ​

ts
getClassName(): string

Defined in: src/typescript/lib/core/BaseObject.ts:44

Returns the runtime class name of this object.

Returns ​

string

The name of the constructor function as a string.

Inherited from ​

LayoutManager.getClassName

getContainer() ​

ts
getContainer(): null | Component

Defined in: src/typescript/lib/layout/LayoutManager.ts:78

Returns the container component this layout manager is attached to.

Returns ​

null | Component

The attached container, or null if not attached.

Inherited from ​

LayoutManager.getContainer

getHeaderHeight() ​

ts
getHeaderHeight(): number

Defined in: src/typescript/lib/layout/Accordion.ts:159

Returns the height in pixels of each section header.

Returns ​

number

The header height.

getId() ​

ts
getId(): string

Defined in: src/typescript/lib/core/BaseObject.ts:24

Returns the unique identifier for this object.

Returns ​

string

The UUID string assigned at construction time.

Inherited from ​

LayoutManager.getId

getLayoutConstraints() ​

ts
getLayoutConstraints(component: Component): undefined | LayoutConstraints

Defined in: src/typescript/lib/layout/LayoutManager.ts:291

Returns the stored layout constraints for a component.

Parameters ​

component ​

Component

The component to look up.

Returns ​

undefined | LayoutConstraints

The stored constraints, or undefined if none are set.

Inherited from ​

LayoutManager.getLayoutConstraints

getMaxSize() ​

ts
getMaxSize(): null | Size

Defined in: src/typescript/lib/layout/LayoutManager.ts:106

Returns the maximum size this layout can produce.

Returns ​

null | Size

The maximum size.

Inherited from ​

LayoutManager.getMaxSize

getMinSize() ​

ts
getMinSize(): null | Size

Defined in: src/typescript/lib/layout/Accordion.ts:356

Returns the minimum size: sum of all header heights (headers are always visible).

Returns ​

null | Size

The minimum size, or null if not attached.

Overrides ​

LayoutManager.getMinSize

getPreferredSize() ​

ts
getPreferredSize(): null | Size

Defined in: src/typescript/lib/layout/Accordion.ts:310

Returns the preferred size: sum of all header heights plus the preferred heights of all open sections.

Returns ​

null | Size

The preferred size, or null if not attached.

Overrides ​

LayoutManager.getPreferredSize

isSectionOpen() ​

ts
isSectionOpen(index: number): boolean

Defined in: src/typescript/lib/layout/Accordion.ts:249

Returns whether the section at the given index is currently open.

Parameters ​

index ​

number

Zero-based section index.

Returns ​

boolean

True if the section is open.

isSingleOpen() ​

ts
isSingleOpen(): boolean

Defined in: src/typescript/lib/layout/Accordion.ts:115

Returns whether at most one section can be open at a time.

Returns ​

boolean

True if single-open mode is active.

openSection() ​

ts
openSection(index: number): this

Defined in: src/typescript/lib/layout/Accordion.ts:199

Opens the section at the given index.

Parameters ​

index ​

number

Zero-based section index.

Returns ​

this

placeComponent() ​

ts
placeComponent(
   component: Component, 
   x: number, 
   y: number, 
   maxWidth: number, 
   maxHeight: number, 
   fill?: null | FillType, 
   anchor?: null | AnchorType): void

Defined in: src/typescript/lib/layout/LayoutManager.ts:126

Positions and sizes a child component within the given bounds, respecting fill and anchor constraints.

Parameters ​

component ​

Component

The child component to position.

x ​

number

Left edge of the cell in the container's coordinate space.

y ​

number

Top edge of the cell in the container's coordinate space.

maxWidth ​

number

Available width for the component.

maxHeight ​

number

Available height for the component.

fill? ​

Optional. Fill strategy overriding the component's own constraints.

null | FillType

anchor? ​

Optional. Anchor point overriding the component's own constraints.

null | AnchorType

Returns ​

void

Remarks ​

The method checks the component's stored LayoutConstraints first; the fill and anchor parameters serve as fallbacks. After positioning, doLayout is called on the child so nested layouts are updated in a single pass.

Inherited from ​

LayoutManager.placeComponent

setAnimationDuration() ​

ts
setAnimationDuration(ms: number): this

Defined in: src/typescript/lib/layout/Accordion.ts:188

Sets the CSS transition duration for open/close animation.

Parameters ​

ms ​

number

Duration in milliseconds.

Returns ​

this

setHeaderHeight() ​

ts
setHeaderHeight(height: number): this

Defined in: src/typescript/lib/layout/Accordion.ts:168

Sets the height of each section header in pixels.

Parameters ​

height ​

number

Height in pixels.

Returns ​

this

setId() ​

ts
setId(id: string): this

Defined in: src/typescript/lib/core/BaseObject.ts:33

Sets the unique identifier for this object.

Parameters ​

id ​

string

The new identifier string to assign.

Returns ​

this

Inherited from ​

LayoutManager.setId

setLayoutConstraints() ​

ts
setLayoutConstraints(component: Component, constraints?: LayoutConstraints): undefined | LayoutConstraints

Defined in: src/typescript/lib/layout/LayoutManager.ts:260

Stores layout constraints for a component, or removes them if constraints is undefined.

Parameters ​

component ​

Component

The component whose constraints are being set.

constraints? ​

LayoutConstraints

Optional. The constraints to store; omit to delete existing constraints.

Returns ​

undefined | LayoutConstraints

The stored constraints, or undefined if they were deleted.

Inherited from ​

LayoutManager.setLayoutConstraints

setOnSectionToggle() ​

ts
setOnSectionToggle(callback: 
  | null
  | SectionToggleCallback): this

Defined in: src/typescript/lib/layout/Accordion.ts:258

Registers a callback invoked whenever a section is opened or closed.

Parameters ​

callback ​

The callback, or null to remove it.

null | SectionToggleCallback

Returns ​

this

setSingleOpen() ​

ts
setSingleOpen(value: boolean): this

Defined in: src/typescript/lib/layout/Accordion.ts:125

Sets whether at most one section can be open at a time. When switching to true, immediately closes all but the first open section.

Parameters ​

value ​

boolean

True to enforce single-open mode.

Returns ​

this