视觉隐藏
用于视觉上隐藏内容，但仍可供屏幕阅读器访问。
import { Button, VisuallyHidden } from "@chakra-ui/react"
import { LuBell } from "react-icons/lu"
const Demo = () => {
return (
<Button>
<LuBell /> 3 <VisuallyHidden>Notifications</VisuallyHidden>
</Button>
)
}
用法
import { VisuallyHidden } from "@chakra-ui/react"<VisuallyHidden>Hidden content</VisuallyHidden>示例
输入
使用 asChild 属性，你可以将子元素传递给 VisuallyHidden 组件。
输入框已隐藏
import { HStack, VisuallyHidden } from "@chakra-ui/react"
const Demo = () => {
return (
<HStack>
The input is hidden
<VisuallyHidden asChild>
<input type="text" placeholder="Search..." />
</VisuallyHidden>
</HStack>
)
}