Radix 主页
由 WorkOS 制作
Radix 主页
由 WorkOS 制作
主题主题原语原语图标图标颜色颜色
文档案例研究博客
实用程序

视觉隐藏

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

特征

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

安装

从命令行安装组件。

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

解剖

导入组件。

import * as VisuallyHidden from '@radix-ui/react-visually-hidden';



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

基本示例

使用视觉隐藏的原语。

import * as VisuallyHidden from '@radix-ui/react-visually-hidden';

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



export default () => (

  <button>

    <GearIcon />

    <VisuallyHidden.Root>Settings</VisuallyHidden.Root>

  </button>

);

API 参考

根

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

道具类型默认
asChild
布尔值
false

无障碍性

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

上一个插槽
在 GitHub 上编辑此页面。