Radix Vue

外观

视觉隐藏 ​

以无障碍的方式将内容从屏幕上隐藏。
  • 视觉上隐藏内容，同时为辅助技术保留内容。

解剖 ​

导入组件。

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

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

基本示例 ​

使用视觉隐藏的原始。

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

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

API 参考 ​

根 ​

您在此组件内放置的任何内容都将从屏幕上隐藏，但会由屏幕阅读器宣布。

道具默认类型
as
span
string | Component
此组件应渲染为的元素或组件。 可以被 asChild 覆盖
asChild
false
boolean
更改默认渲染的元素，以作为子元素传递的元素，合并它们的道具和行为。

阅读我们的 组合 指南以了解更多详细信息。

无障碍性 ​

这在某些情况下很有用，作为使用 aria-label 或 aria-labelledby 的传统标签的替代方法。