Visually Hidden
以无障碍方式将内容从屏幕上隐藏。
- 视觉上隐藏内容，同时为辅助技术保留内容。
组件结构
导入组件。
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>设置</VisuallyHidden>
</button>
</template>API 参考
根组件
放入此组件的任何内容都将在屏幕上隐藏，但会被屏幕阅读器播报。
| Prop | Default | Type |
|---|---|---|
as | span | string | Component该组件应渲染的元素或组件。可被 |
asChild | false | boolean将默认渲染元素更改为作为子级传递的元素，
合并它们的属性和行为。
|
无障碍访问
在某些场景下，这是对传统使用 aria-label 或 aria-labelledby 进行标注的有效替代方案。