以可访问的方式从屏幕隐藏内容。
在保留对辅助技术可访问性的前提下,视觉上隐藏内容。
Version: 1.2.3
Size: 1.74 kB
从命令行安装组件。
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> );
您放置在此组件内的任何内容将被从屏幕隐藏,但将被屏幕阅读器宣告。
asChild
boolean
false
在某些场景下,这是用 aria-label 或 aria-labelledby 传统标记的替代方案。
aria-label
aria-labelledby