Viewer Library：Use Sidebar
Category: ExamplesThe Viewer media viewer supports full-screen viewing of multimedia files, including images, videos, audio, maps, iframes, and other embeddable platform links.
aside Parameters
The aside parameter is used to configure the sidebar content. It is an object with the following detailed properties:
| Property | Type | Default | Description |
|---|---|---|---|
| aside.enable | boolean | false | Whether to enable the sidebar |
| aside.expanded | boolean | true | Whether to display expanded by default |
| aside.title | string | '' | Sets the title of the sidebar |
| aside.placement | 'start'/'end' | 'end' | Sidebar position - 'start' for left side, 'end' for right side |
| aside.getter | function | null | Content retrieval function that supports one parameter (this refers to the current instance) |
| aside.template | string | '' | Template used for rendering content |
| aside.engine | function | renderTpl | Rendering engine (defaults to the framework's built-in renderTpl) |
getter Function
The sidebar content automatically updates whenever the slider changes. Therefore, when the sidebar is enabled, you must properly configure the getter property to correctly retrieve content matching the current slider.
- getter must be a function
- If getter returns a value, it can be text, DOM node, object or array
- If getter returns an object or array, you must enable template and engine properties to parse the data
The getter function has 3 possible scenarios:
- getter is a normal function returning a regular value
- getter is a normal function returning a Promise with resolve
- getter is an asyncFunction returning a regular value
- getter is any function with no return value (fully manual handling)
The getter function accepts one parameter - an object with these properties:
- index: Current slider index
- slider: Data of current main stage slider
- thumb: Data of current index slider
- content: Data source used to create main stage slider
Within getter, this refers to the current instance, so you can access instance member variables via this.stageIns, this.thumbIns, etc.
Basic Usage
Automatically update slider content via a simple getter function.
Using Sidebar Toggle Button
To display the sidebar toggle button, set tools.children:['more','close']. The more button controls the sidebar.
Inserting a DOM Node
The getter function can return a DOM node containing any content.
Rendering JSON
If the getter function returns JSON data, you should set the template property for automatic data rendering.
Returning Promise
The getter function can return a Promise, but it should properly resolve with the data to be populated.
Debouncing
When quickly switching between sliders, we only care about the final slider index. To avoid rendering each intermediate slider and ensure we only render the final slider's content during rapid navigation, we can use debouncing with delay parameter.
Manual Content Population
If you need to manually populate content, the getter function should not return any value. This approach is commonly used for manually requesting and populating asynchronous content.
To avoid duplicate requests, data caching is typically implemented.