Lzh on GitHub

视觉隐藏

以可访问的方式隐藏内容。
  • 视觉上隐藏内容，同时保留其供辅助技术使用。

结构

导入组件。

<script setup lang="ts">
import { VisuallyHidden } from 'reka-ui'
</script>

<template>
  <VisuallyHidden>
    <slot />
  </VisuallyHidden>
</template>

基本示例

使用视觉隐藏原语。

<script setup lang="ts">
import { GearIcon } from '@radix-icons/vue'
import { VisuallyHidden } from 'reka-ui'
</script>

<template>
  <button>
    <GearIcon />
    <VisuallyHidden>设置</VisuallyHidden>
  </button>
</template>

API 参考

根 (Root)

您放入此组件的任何内容都将从屏幕上隐藏，但会被屏幕阅读器朗读。

Prop默认值类型说明
asspanstring | Component此组件应渲染为的元素或组件。可以通过 asChild 覆盖。
asChildfalseboolean将默认渲染的元素更改为作为子元素传递的元素，合并它们的 props 和行为。阅读我们的 组合 指南了解更多详情。

可访问性

这在某些场景中很有用，作为使用 aria-label 或 aria-labelledby 进行传统标签的替代方法。