Accordion Library: Styling with Examples

Last updated: 5 months ago

Category: Examples

The Accordion library can create nested collapsible panels and supports multiple data formats.

Change Arrow Indicators

The arrow option configures styles related to the arrow indicator. This option is an object with the following properties:

• show: icon class name or image URL for expanded state
• hide: icon class name or image URL for collapsed state
• anim: animation class for toggling when show and hide are the same; defaults to _rotate180
• type: type of indicator arrow, defaults to icon (class names for show/hide), set to image to use image URLs
• trigger: event to expand sub-items, defaults to click, can be hover to expand on mouse hover

Note: trigger is not style-related and is not demonstrated on this page.

Image-based Arrows

To use image assets as arrow indicators, set arrow.type to image, and provide image URLs for arrow.show and arrow.hide.

Decorator Icons

Three properties are supported in data: icon, disk, and cube to define custom icons, circular images, and square images. All three can be used together, but this may cause visual clutter—typically only one is used at a time.

Borders

The appear parameter controls border-related styles. It supports the following properties:

Status Lamp

Set lamp: true or lamp.enable: true to enable the indicator lamp. By default, it appears below the label. Recommended to use with border styles.

Custom Head Layout

The head section of the panel has a default node layout rule, which can be customized via the layout parameter. The layout supports three types of syntax: