Spoiler 剧透遮罩

遮住剧透内容，点击或者悬停后揭示。

第三卷的结局是第一卷结尾两人决定继续同行，这一段建议读完正文再看。

import { Spoiler, Text } from '@hina-ui/react'

export default function Demo() {
  return (
    <Text className="max-w-lg">
      第三卷的结局是 <Spoiler>第一卷结尾两人决定继续同行</Spoiler> ，这一段建议读完正文再看。
    </Text>
  )
}

tsx

用法

import { Spoiler } from '@hina-ui/react'

把要遮住的文字放入 children。遮住时内容被噪点覆盖，并且无法选中，点击后从指针位置向外展开。

点击揭示这段被遮住的文字，再点一次重新遮住。

import { Spoiler, Text } from '@hina-ui/react'

export default function Demo() {
  return (
    <Text className="max-w-lg">
      点击揭示 <Spoiler>这段被遮住的文字</Spoiler> ，再点一次重新遮住。
    </Text>
  )
}

tsx

示例

悬停揭示

设置 revealOn="hover" 后，指针移入即揭示，移出重新遮住。键盘聚焦与失焦同样触发。

指针移入即可看到悬停揭示的内容，移出后重新遮住。

import { Spoiler, Text } from '@hina-ui/react'

export default function Demo() {
  return (
    <Text className="max-w-lg">
      指针移入即可看到 <Spoiler revealOn="hover">悬停揭示的内容</Spoiler> ，移出后重新遮住。
    </Text>
  )
}

tsx

受控

hidden 可受控，可以由外部统一控制一段内容的显隐。

全书结局：交易在最后一刻反转

'use client'

import { useState } from 'react'
import { Button, Spoiler, Stack, Text } from '@hina-ui/react'

export default function Demo() {
  const [hidden, setHidden] = useState(true)

  return (
    <Stack className="max-w-lg">
      <Text>
        全书结局：{' '}
        <Spoiler hidden={hidden} onHiddenChange={setHidden}>
          交易在最后一刻反转
        </Spoiler>
      </Text>
      <Button variant="outline" tone="neutral" size="sm" onClick={() => setHidden(!hidden)}>
        {hidden ? '全部揭示' : '全部遮住'}
      </Button>
    </Stack>
  )
}

tsx

跨行内容

一段跨越多行的文字可以整段遮住。揭示时以指针位置为中心，逐行展开。

跨越多行的剧透同样可以整段遮住，揭示时从指针落点开始展开，逐行铺满整段文字。

import { Spoiler, Text } from '@hina-ui/react'

export default function Demo() {
  return (
    <Text className="max-w-sm">
      <Spoiler>
        跨越多行的剧透同样可以整段遮住，揭示时从指针落点开始展开，逐行铺满整段文字。
      </Spoiler>
    </Text>
  )
}

tsx

降级形态

噪点遮罩依赖浏览器的绘制工作单元。不支持时自动降级为底色加模糊，行为完全一致。设置 forceFallback 可以强制使用降级形态。

默认形态：噪点遮罩

降级形态：底色加模糊

import { Spoiler, Stack, Text } from '@hina-ui/react'

export default function Demo() {
  return (
    <Stack className="max-w-lg">
      <Text>
        默认形态： <Spoiler>噪点遮罩</Spoiler>
      </Text>
      <Text>
        降级形态： <Spoiler forceFallback>底色加模糊</Spoiler>
      </Text>
    </Stack>
  )
}

tsx

行为

遮住时文字无法选中，也无法被复制。
揭示的展开中心取自指针落点，键盘触发时取几何中心。

API

Props

属性	类型	默认值	说明
`hidden`	`boolean`	`true`	是否遮住，可受控
`revealOn`	`'click' \| 'hover'`	`'click'`	揭示方式
`forceFallback`	`boolean`	`false`	强制使用降级形态
`className`	`string`	—	追加至根元素的类名

内容属性

属性	说明
`children`	被遮住的内容

用法

示例

悬停揭示

受控

跨行内容

降级形态

行为

无障碍

API

Props

内容属性