实用工具

视觉隐藏

以无障碍的方式隐藏屏幕上的内容。

特性

    视觉上隐藏内容,同时为辅助技术保留它。

安装

从命令行安装组件。

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>Settings</VisuallyHidden.Root>
</button>
);

API 参考

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

属性类型默认值
asChild
布尔值
false

无障碍访问

在某些情况下,这作为使用 aria-labelaria-labelledby 进行传统标记的替代方案非常有用。

上一个Slot