简介

fs-expand-text 展开文本组件用于处理长文本的展示，当文本内容超过指定行数时可以展开/收起。支持自定义展开收起按钮文案、最大行数设置、展开收起动画等特性，适用于需要优化长文本显示体验的场景。

使用方法

局部引入，在需要引入的页面或组件的 index.json 中配置：

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

代码演示

API

属性

属性名	说明	类型	可选值/格式	默认值
text	文本内容	string	—	''
type	快捷样式类型	string	'center'/'right'	''
maxLines	最大显示行数	number	—	2
expandText	展开按钮文本	string	—	'展开'
collapseText	收起按钮文本	string	—	'收起'
textStyle	文本样式	string	—	''
buttonStyle	按钮样式	string	—	''
buttonPosition	按钮位置	string	'left'/'center'/'right'	'left'
showIcon	是否显示图标	boolean	true/false	true
expandIcon	展开状态图标	string	—	'zhankai'
collapseIcon	收起状态图标	string	—	'shouqi'
animation	是否启用动画	boolean	true/false	true

快捷样式说明

组件提供两种快捷样式，可通过 type 属性设置：

1. type="center"：

   • 按钮居中对齐
   • 显示展开/收起图标
   • 文字使用 text-14 样式类
   • 文字颜色使用 var(--color-neutrals15)

2. type="right"：

   • 按钮右对齐
   • 不显示图标
   • 文字使用 text-13 样式类
   • 文字颜色使用 var(--color-info06)

事件

事件名	说明	回调参数
change	展开/收起状态改变时触发	{expanded: boolean}

外部样式类

类名	说明
ext-class	根节点样式类
text-class	文本样式类
button-class	按钮样式类

设计说明

• 支持自定义最大显示行数，超出部分自动隐藏并显示展开按钮
• 展开/收起按钮文案可自定义，支持样式定制
• 支持自定义展开/收起图标，可控制是否显示
• 展开收起过程带有平滑动画效果
• 支持通过样式类和内联样式进行样式定制
• 适配深色模式，使用 CSS 变量实现主题切换

打开预览