视觉隐藏

¥Visually Hidden

以易于访问的方式隐藏屏幕内容。

安装

¥Installation

从命令行安装组件。

¥Install the component from your command line.

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

结构

¥Anatomy

导入组件。

¥Import the component.

import { VisuallyHidden } from "radix-ui";

export default () => <VisuallyHidden.Root />;

基本示例

¥Basic example

使用视觉隐藏的基础组件。

¥Use the visually hidden primitive.

import { VisuallyHidden } from "radix-ui";
import { GearIcon } from "@radix-ui/react-icons";

export default () => (
	<button>
		<GearIcon />
		<VisuallyHidden.Root>Settings</VisuallyHidden.Root>
	</button>
);

API 参考

¥API Reference

根

¥Root

你放入此组件中的任何内容都将在屏幕上隐藏，但屏幕阅读器会读出。

¥Anything you put inside this component will be hidden from the screen but will be announced by screen readers.

可访问性

¥Accessibility

这在某些情况下非常有用，可以替代传统的 aria-label 或 aria-labelledby 标签。

¥This is useful in certain scenarios as an alternative to traditional labelling with aria-label or aria-labelledby.