为您甄选

ExpandableText 组件使用示例

示例1: 基础用法(3行限制,默认动画)

这是一段很长的文本内容,用来演示文本展开收起组件的功能。这个组件支持通过 prop 传递行数限制,超出部分会被隐藏并显示省略号。当用户点击"查看更多"按钮时,会展示完整内容。如果启用了收起功能,用户还可以点击"收起"按钮来重新折叠内容。这个组件还支持通过 slot 插槽传入复杂的内容结构,包括 HTML 标签、列表、图片等各种元素。组件会智能地检测内容是否超出指定行数,只有在需要时才显示展开按钮。对于不足指定行数的短文本,不会显示任何按钮,保持界面的简洁性。这个组件还考虑了响应式设计和无障碍访问,在不同设备和屏幕尺寸下都能正常工作。

示例2: 支持收起功能(带动画)

这是一段很长的文本内容,用来演示文本展开收起组件的功能。这个组件支持通过 prop 传递行数限制,超出部分会被隐藏并显示省略号。当用户点击"查看更多"按钮时,会展示完整内容。如果启用了收起功能,用户还可以点击"收起"按钮来重新折叠内容。这个组件还支持通过 slot 插槽传入复杂的内容结构,包括 HTML 标签、列表、图片等各种元素。组件会智能地检测内容是否超出指定行数,只有在需要时才显示展开按钮。对于不足指定行数的短文本,不会显示任何按钮,保持界面的简洁性。这个组件还考虑了响应式设计和无障碍访问,在不同设备和屏幕尺寸下都能正常工作。

示例2.5: 无动画模式

这是一段很长的文本内容,用来演示文本展开收起组件的功能。这个组件支持通过 prop 传递行数限制,超出部分会被隐藏并显示省略号。当用户点击"查看更多"按钮时,会展示完整内容。如果启用了收起功能,用户还可以点击"收起"按钮来重新折叠内容。这个组件还支持通过 slot 插槽传入复杂的内容结构,包括 HTML 标签、列表、图片等各种元素。组件会智能地检测内容是否超出指定行数,只有在需要时才显示展开按钮。对于不足指定行数的短文本,不会显示任何按钮,保持界面的简洁性。这个组件还考虑了响应式设计和无障碍访问,在不同设备和屏幕尺寸下都能正常工作。

示例3: 使用 slot 插槽

这是通过 slot 传入的内容。

支持 HTML 标签 和复杂的内容结构。

这是一段很长的文本内容,用来演示文本展开收起组件的功能。这个组件支持通过 prop 传递行数限制,超出部分会被隐藏并显示省略号。当用户点击"查看更多"按钮时,会展示完整内容。如果启用了收起功能,用户还可以点击"收起"按钮来重新折叠内容。这个组件还支持通过 slot 插槽传入复杂的内容结构,包括 HTML 标签、列表、图片等各种元素。组件会智能地检测内容是否超出指定行数,只有在需要时才显示展开按钮。对于不足指定行数的短文本,不会显示任何按钮,保持界面的简洁性。这个组件还考虑了响应式设计和无障碍访问,在不同设备和屏幕尺寸下都能正常工作。

  • 列表项目 1
  • 列表项目 2
  • 列表项目 3

示例4: 短文本示例

这是一段短文本,不会超过5行,所以不会显示展开按钮。

示例5: 限制1行

这是一段很长的文本内容,用来演示文本展开收起组件的功能。这个组件支持通过 prop 传递行数限制,超出部分会被隐藏并显示省略号。当用户点击"查看更多"按钮时,会展示完整内容。如果启用了收起功能,用户还可以点击"收起"按钮来重新折叠内容。这个组件还支持通过 slot 插槽传入复杂的内容结构,包括 HTML 标签、列表、图片等各种元素。组件会智能地检测内容是否超出指定行数,只有在需要时才显示展开按钮。对于不足指定行数的短文本,不会显示任何按钮,保持界面的简洁性。这个组件还考虑了响应式设计和无障碍访问,在不同设备和屏幕尺寸下都能正常工作。