Skip to main content

Renderer

A component that manages Panel and its elements

Constructor​

constructor(options: RendererOptions);

Constructs a new instance of the Renderer class

Parameters​

options (RendererOptions) - RendererOptions

Properties​

_align​

Type: NonNullable<RendererOptions["align"]>

_flicking​

Type: Flicking | null

_panels​

Type: Panel[]

_rendering​

Type: boolean

_strategy​

Type: RendererOptions["strategy"]

align​

Type: NonNullable<RendererOptions["align"]>

A Panel's align value that applied to all panels

panelCount​

Type: number

Count of panels

This property is read-only.

panels​

Type: Panel[]

Array of panels

See Also:

  • Panel

This property is read-only.

Methods​

batchInsert​

batchInsert(...items: BatchInsertParams[]): Panel[]

Insert new panels at given index

Parameters:

  • items (BatchInsertParams[]) - An array of BatchInsertParams

Returns: An array of inserted panels

Remarks: This will increase index of panels after by the number of panels added.

Throws:

batchRemove​

batchRemove(...items: BatchRemoveParams[]): Panel[]

Remove the panel at the given index

Parameters:

  • items (BatchRemoveParams[]) - An array of BatchRemoveParams

Returns: An array of removed panels

Remarks: This will decrease index of panels after by the number of panels removed.

Throws:

destroy​

destroy(): void

Destroy Renderer and return to initial state

Remarks: This method clears all panel references and resets the internal state.

forceRenderAllPanels​

forceRenderAllPanels(): Promise<void>

getPanel​

getPanel(index: number): Panel | null

Return the Panel at the given index. null if it doesn't exist.

Parameters:

  • index (number) - Index of the panel to get

Returns: Panel at the given index

Remarks: This is equivalent to accessing Flicking.panels[index].

getRenderedPanels​

getRenderedPanels(): Panel[]

Return Rendered Panels

Returns: Rendered Panels

init​

init(flicking: Flicking): this

Initialize Renderer

Parameters:

  • flicking (Flicking) - An instance of Flicking

Returns: The current instance for method chaining

Remarks: This method is called automatically during init. It collects existing panel elements.

render​

abstract render(): Promise<void>

Render panel elements inside the camera element

Returns: A Promise that resolves when rendering is complete

Remarks: This method updates the DOM to reflect the current panel state.

updatePanelSize​

updatePanelSize(): this

Update all panel sizes

Returns: The current instance for method chaining