useDisclosure
useDisclosure
是一个提供了创建披露小部件所需的所有工具的 hook。披露小部件用于显示或隐藏内容。此 hook 提供了控制内容可见性的状态和函数。
Usage
实时编辑器
function Demo() { const { isOpen, onOpen, onClose } = useDisclosure(); return ( <> <button onClick={onOpen}>Open</button> <button onClick={onClose}>Close</button> <p>{isOpen ? "Open" : "Close"}</p> </> ); }
结果
Loading...
API
UseDisclosureProps
参数名 | 描述 | 类型 | 默认值 |
---|---|---|---|
isOpen | 是否打开,传了则为受控 | boolean | - |
defaultOpen | 默认打开状态 | boolean | - |
onClose | 关闭时的回调 | () => void | - |
onOpen | 打开时的回调 | () => void | - |
onChange | 状态改变时的回调 | (isOpen: boolean | undefined) => void | - |
useDisclosure
Returns
{ isOpen: boolean; onOpen: () => void; onClose: () => void; onOpenChange: () => void; isControlled: boolean; }
Arguments
参数名 | 描述 | 类型 | 默认值 |
---|---|---|---|
props | - | UseDisclosureProps | undefined | - |