Utilities

视觉隐藏

以可访问的方式从屏幕隐藏内容。

Features

    在保留对辅助技术可访问性的前提下,视觉上隐藏内容。

安装

从命令行安装组件。

npm install @radix-ui/react-visually-hidden

结构

导入组件。

import { VisuallyHidden } from "radix-ui";
export default () => <VisuallyHidden.Root />;

基本示例

使用视觉隐藏的原语。

import { VisuallyHidden } from "radix-ui";
import { GearIcon } from "@radix-ui/react-icons";
export default () => (
<button>
<GearIcon />
<VisuallyHidden.Root>设置</VisuallyHidden.Root>
</button>
);

API 参考

Root

您放置在此组件内的任何内容将被从屏幕隐藏,但将被屏幕阅读器宣告。

PropTypeDefault
asChild
boolean
false

可访问性

在某些场景下,这是用 aria-labelaria-labelledby 传统标记的替代方案。

上一篇插槽 Slot