# 视觉隐藏

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

## Features

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

## [构成](#构成)

导入组件。

```jsx
import { VisuallyHidden } from "radix-ui";

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

## [基本示例](#基本示例)

使用视觉隐藏原语。

```jsx
import { VisuallyHidden } from "radix-ui";

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

export default () => (
  <button>
    <GearIcon />

    <VisuallyHidden.Root>设置</VisuallyHidden.Root>
  </button>
);
```

## [API 参考](#api-参考)

### [Root](#root)

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

| Prop      | Type      | Default |
| --------- | --------- | ------- |
| `asChild` | `boolean` | `false` |

## [可访问性](#可访问性)

在某些场景下，这是使用 `aria-label` 或 `aria-labelledby` 进行传统标记的替代方案。

<!--$-->

<!--/$-->