Spoiler

用于隐藏敏感或剧透内容的组件,点击后可以显示隐藏的文字。

导入

tsx

import { Spoiler } from '@xcloud/ui-telegram'

示例

基础用法

Spoiler 组件用于隐藏敏感内容,点击后显示。默认为非受控模式,自动管理显示状态。

tsx

import { Spoiler } from '@xcloud/ui-telegram'

function Example() {
  return (
    <p>
      这是一段包含 <Spoiler>隐藏内容</Spoiler> 的文本。
    </p>
  )
}

受控模式

通过 visible 和 onClick 属性可以实现受控模式,完全控制显示/隐藏状态。

tsx

import { Spoiler } from '@xcloud/ui-telegram'
import { useState } from 'react'

function Example() {
  const [visible, setVisible] = useState(false)

  return (
    <>
      <p>
        剧透警告: <Spoiler visible={visible} onClick={() => setVisible(!visible)}>
          主角在最后一集获得了胜利!
        </Spoiler>
      </p>
      <button onClick={() => setVisible(!visible)}>
        {visible ? '隐藏' : '显示'}
      </button>
    </>
  )
}

多个隐藏内容

可以在同一段文字中使用多个 Spoiler 组件,每个都可以独立点击显示。

tsx

<p>
  这是一个 <Spoiler>秘密信息 1</Spoiler>,这是另一个{' '}
  <Spoiler>秘密信息 2</Spoiler>,还有第三个{' '}
  <Spoiler>秘密信息 3</Spoiler>。
</p>

长文本

Spoiler 组件支持任意长度的文本内容。

tsx

<Spoiler>
  这是一段很长的隐藏文本,可以包含多行内容...
  在探索过程中,主角逐渐意识到每次改变都会带来不可预见的后果。
</Spoiler>

组件 API

Spoiler Props

属性	类型	默认值	描述
`visible`	`boolean`	`false`	是否显示隐藏内容 (受控模式)
`className`	`string`	-	附加的 CSS 类名
`children`	`ReactNode`	-	隐藏的内容
`onClick`	`() => void`	-	点击回调函数

继承 HTMLAttributes<HTMLDivElement> 的所有属性。

实现细节

Spoiler 组件使用 SVG 噪点图案作为遮罩效果,与 Telegram 原生效果保持一致。遮罩会随着点击产生透明度过渡动画。

主题支持

组件完全支持 Telegram 主题系统,使用 CSS 变量 --tgui--bg_color 适配当前主题的背景色。

注意事项

非受控模式: 默认情况下组件会自动管理状态,无需手动控制
受控模式: 如果提供了 visible 属性,组件将进入受控模式,需要通过 onClick 手动更新状态
行内使用: 组件设计为 inline-block,可以在段落文字中自然嵌入
点击范围: 整个隐藏区域都可以点击,包括遮罩部分

Spoiler ​

导入 ​

示例 ​

基础用法 ​

受控模式 ​

多个隐藏内容 ​

长文本 ​

组件 API ​

Spoiler Props ​

实现细节 ​

主题支持 ​

注意事项 ​

相关链接 ​