Reka UI 标志Reka
backdrop
示例
实用工具

视觉隐藏

以无障碍的方式在屏幕上隐藏内容。
  • 视觉上隐藏内容，但保留其供辅助技术使用。

结构

导入组件。

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

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

基本示例

使用视觉隐藏原生组件。

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

<template>
  <button>
    <GearIcon />
    <VisuallyHidden>Settings</VisuallyHidden>
  </button>
</template>

API 参考

根

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

属性默认类型
as
span
string | Component

此组件应渲染为的元素或组件。可以通过 asChild 覆盖。

asChild
false
布尔值

更改默认渲染元素为作为子项传递的元素，合并它们的属性和行为。

阅读我们的组合指南了解更多详情。

无障碍性

在某些情况下，这可作为使用 aria-label 或 aria-labelledby 进行传统标签的替代方案，非常有用。