视觉隐藏
用于在视觉上隐藏内容，但保持屏幕阅读器可访问。
import { Button, VisuallyHidden } from "@chakra-ui/react"
import { LuBell } from "react-icons/lu"
const Demo = () => {
return (
<Button>
<LuBell /> 3 <VisuallyHidden>Notifications</VisuallyHidden>
</Button>
)
}
用法
¥Usage
import { VisuallyHidden } from "@chakra-ui/react"<VisuallyHidden>Hidden content</VisuallyHidden>示例
¥Examples
输入框
¥Input
使用 asChild 属性，你可以将子元素传递给 VisuallyHidden 组件。
¥Using the asChild prop, you can pass a child element to the VisuallyHidden
component.
The input is hidden
import { HStack, VisuallyHidden } from "@chakra-ui/react"
const Demo = () => {
return (
<HStack>
The input is hidden
<VisuallyHidden asChild>
<input type="text" placeholder="Search..." />
</VisuallyHidden>
</HStack>
)
}