ShowMore

一个 “显示更多” 组件，当内容超过设定的显示行数时，会出现展开按钮以查看更多内容。

基础用法

像普通组件一样使用它，只需将长文本作为 children prop 传递。

高级用法

可以传递不同的 Props ，实现不同业务场景需要的展示形式。

注：本包不提供与核心功能无关的 UI 组件，您可以参考示例的代码，配合您正在使用的 UI 框架组件自行实现，例如： Shadcn UI 、 Material UI 等等。

自定义按钮

如果使用自定义 React Elements 作为 more / less Props 的值，可以将 Ref 值绑定到 <ShowMore /> 组件，并通过 ref 接收 toggleLines 方法。

以弹窗展示

除了替换按钮的 UI 外，还可以改变其用途，例如：可以将 “展开查看更多” 替换为点击唤起弹窗，或者重定向到另外一个页面的能力。

配合文字提示

这是来自 #16 的优秀用法！对于原始文本并不是很长的情况，可以借助 Tooltip 等组件实现允许用户轻松查看完整内容、而无需手动点击展开按钮才能够查看全文的能力。

将鼠标悬停在这段文字上面以查看全文。

类型声明

这是组件的 Props 类型，继承自 Truncate 组件的大部分 Props 。

请注意：从 TruncateProps 上被 Omit 掉的 Props 代表被忽略，不会传递给 <Truncate /> 组件。

import type React from 'react'
import { type TruncateProps } from '../Truncate'

export interface ShowMoreProps
  extends Omit<
    TruncateProps,
    'width' | 'middle' | 'end' | 'ellipsis' | 'onToggle'
  > {
  /**
   * 初始化时的扩展状态
   *
   * @default false
   *
   * @since v0.5.0
   */
  defaultExpanded?: boolean

  /**
   * 受控属性
   *
   * 展开状态由父组件控制
   *
   * @default undefined
   *
   * @since v0.5.0
   */
  expanded?: boolean

  /**
   * 在 “展开” 对应的锚元素上显示的文本
   *
   * 如果传入一个有效的 React Element ，内置的锚元素将不会被渲染，
   * 会直接渲染为 React Element （通过 `React.isValidElement` 检查）
   *
   * @since v0.4.0 支持 React element
   */
  more?: React.ReactNode

  /**
   * 在 “收起” 对应的锚元素上显示的文本
   *
   * 如果传入一个有效的 React Element ，内置的锚元素将不会被渲染，
   * 会直接渲染为 React Element （通过 `React.isValidElement` 检查）
   *
   * @since v0.4.0 支持 React element
   */
  less?: React.ReactNode

  /**
   * 添加到锚元素的类名，仅对内置锚元素有效
   */
  anchorClass?: string

  /**
   * 当组件切换展开/折叠状态时会触发该回调函数
   *
   * @param expanded - 当前的展开状态
   *
   * @since v0.4.0
   */
  onToggle?: (expanded: boolean) => void
}

该组件支持 React 的引用转发。

/**
 * 如果使用自定义 React Element ，可以使用 `toggleLines` 切换展开和折叠
 * 这是这个方法的类型
 *
 * @since v0.4.0
 */
export type ShowMoreToggleLinesFn = (
  e: React.MouseEvent<HTMLSpanElement, MouseEvent>,
) => void

/**
 * 如果使用自定义 React Element 作为 `more` / `less` 的 Props 值
 * 可以将 Ref 值绑定到 `<ShowMore />` 组件上用于接收 `toggleLines` 方法
 *
 * @since v0.4.0
 */
export type ShowMoreRef = {
  toggleLines: ShowMoreToggleLinesFn
}

现场演示

这是一个理论上适用于任何项目的基本示例，调整滑块，控制它在不同情况下的显示变化。