Introduction

The fs-expand-text expandable text component is used to display long text. When the text content exceeds a specified number of lines, it can be expanded or collapsed. It supports custom expand/collapse button text, max line count settings, expand/collapse animations, and other features, making it suitable for scenarios that need to optimize the display experience of long text.

Usage

Local import — configure it in the index.json of the page or component that needs it:

"usingComponents": {
  "fs-expand-text": "ava-ui/fxui/fs-expand-text/index"
}

Code demos

API

Properties

Property	Description	Type	Optional values/format	Default
text	Text content	string	—	''
type	Quick style type	string	'center'/'right'	''
maxLines	Maximum number of lines to display	number	—	2
expandText	Expand button text	string	—	'Expand'
collapseText	Collapse button text	string	—	'Collapse'
textStyle	Text style	string	—	''
buttonStyle	Button style	string	—	''
buttonPosition	Button position	string	'left'/'center'/'right'	'left'
showIcon	Whether to show the icon	boolean	true/false	true
expandIcon	Expand-state icon	string	—	'zhankai'
collapseIcon	Collapse-state icon	string	—	'shouqi'
animation	Whether to enable animation	boolean	true/false	true

Quick style notes

The component provides two quick styles, set via the type property:

1. type="center":

   • Button centered
   • Shows expand/collapse icon
   • Text uses the text-14 style class
   • Text color uses var(--color-neutrals15)

2. type="right":

   • Button right-aligned
   • No icon displayed
   • Text uses the text-13 style class
   • Text color uses var(--color-info06)

Events

Event name	Description	Callback parameters
change	Fires when the expand/collapse state changes	{expanded: boolean}

External style classes

Class name	Description
ext-class	Root node style class
text-class	Text style class
button-class	Button style class

Design notes

• Supports a custom maximum number of displayed lines; overflowing content is automatically hidden and an expand button is shown.
• Expand/collapse button text is customizable and supports style customization.
• Supports custom expand/collapse icons and whether to display them.
• The expand/collapse process has a smooth animation effect.
• Supports style customization via style classes and inline styles.
• Adapts to dark mode using CSS variables for theme switching.

打开预览