Introduction

The collapsible card component is used to display a collapsible content area. It supports expanding and collapsing content by clicking the title bar. It is suitable for scenarios that need to save space or display information in layers, such as FAQs, settings, and detail information.

Usage

Import it locally by configuring it in the index.json of the page or component where it is needed.

"usingComponents": {
  "fs-collapse-card": "ava-ui/fxui/fs-collapse-card"
}

Code Demo

Basic Usage

The simplest usage of a collapsible card. Click the title bar to expand or collapse the content:

API

Parameters

Parameter	Description	Type	Options	Default
title	Card title	String	-	''
defaultExpanded	Whether expanded by default	Boolean	-	false
disabled	Whether to disable collapsing	Boolean	-	false
extStyle	External custom style passed through to the fs-card component	String	-	''

Events

Name	Parameters	Description
change		Triggered when the expanded state changes

Slots

Name	Description
default	Card content

Notes

1. Collapsing is not available in the disabled state
2. External styles passed through the extStyle property are passed to the internal fs-card component

打开预览