| T | null` | 对 | 反应 ref 或 HTML 元素 |
| 选项 | [`UseA11yTargetOptions`](https://npmcn.com/package/%40accessible/disclosure/#readme-usea11ytargetoptions) | 没有 | 配置选项 |
#### 使用A11目标选项
```ts
export interface UseA11yTargetOptions {
/**
* Adds this class name to props when the disclosure is open
*/
openClass?: string
/**
* Adds this class name to props when the disclosure is closed
*/
closedClass?: string
/**
* Adds this style to props when the disclosure is open
*/
openStyle?: React.CSSProperties
/**
* Adds this style to props when the disclosure is closed
*/
closedStyle?: React.CSSProperties
/**
* Prevents the `window` from scrolling when the target is
* focused after opening.
*/
preventScroll?: boolean
/**
* When `true`, this closes the target element when the `Escape`
* key is pressed.
* @default true
*/
closeOnEscape?: boolean
}
```
#### 回返
```ts
interface A11yProps {
readonly 'aria-hidden': boolean
readonly id: string | undefined
readonly className: string | undefined
readonly style: {
visibility: 'visible' | 'hidden'
} & React.CSSProperties
}
```
#### 示例
```jsx
import * as React from 'react'
import {useA11yTarget} from '@accessible/disclosure'
const MyTarget = () => {
const ref = React.useRef(null)
const a11yProps = useA11yTarget(ref, {preventScroll: true})
return (
I am the disclosure content
)
}
```
### <目标>
此组件包装任何反应元素并将其变成披露目标.
#### 道具
| Prop | 类型 | 默认 | 需要吗? | 说明 |
| --- | --- | --- | --- | --- |
| 门户 | `boolean | string | PortalizeProps` | `false` | 没有 | 何时 `true` 这将让该信息被披露为带有ID的反应门户 `#portals`。您可以通过在此提供其查询选择器,例如将其制入任何门户网站. `#foobar`, (中文(简体) ), `[data-portal=true]`,或 `.foobar`。 。 。 . |
| 关闭 | `boolean` | `true` | 没有 | 默认情况下,当 `Escape` 键已按下。 你可以通过提供 `false` 在这里. |
| 关闭分类 | `string` | `undefined` | 没有 | 当披露时,该类名将适用于儿童要素 `closed`。 。 。 . |
| 打开分类 | `string` | `undefined` | 没有 | 当披露时,该类名将适用于儿童要素 `open`。 。 。 . |
| 关闭样式 | `React.CSSProperties` | `undefined` | 没有 | 这些样式将适用于披露时的儿童要素 `closed` 除设定目标能见度的默认样式外. |
| 打开样式 | `React.CSSProperties` | `undefined` | 没有 | 这些样式名称将适用于披露时的儿童元素 `open` 除设定目标能见度的默认样式外. |
| 防止滚动 | `boolean` | `false` | 没有 | 何时 `true` 这将防止您的浏览器滚动文档,将新聚焦的标签带入视图. |
| 儿童 | `React.ReactElement` | `undefined` | 对 | 儿童被这一组成部分所克隆,其道具中以及上面所定义的事件中带有aria属性. |
#### 示例
```jsx
Alert
//
// Alert
//
```
### 使用 A11yTrigger( 目标, 选项) 吗
创建无头披露触发器的反应钩 [WAI-ARIA 撰写惯例](https://www.w3.org/TR/wai-aria-practices-1.1/examples/disclosure/disclosure-faq.html)。 。 。 . 除了为您组件提供无障碍道具之外, 此钩子还会添加事件 用于实际要素与假要素之间的互操作性,例如:. 财务报告和审定财务报表
页:1 目标元素
#### 参数
| 参数 | 类型 | 需要吗? | 说明 |
| --- | --- | --- | --- |
| 目标 | `React.RefObject | T | null` | 对 | 反应 ref 或 HTML 元素 |
| 选项 | [`UseA11yTriggerOptions`](https://npmcn.com/package/%40accessible/disclosure/#readme-usea11ytriggeroptions) | 没有 | 配置选项 |
#### 使用A11yTrigger 选项
```ts
export interface UseA11yTriggerOptions {
/**
* Adds this class name to props when the disclosure is open
*/
openClass?: string
/**
* Adds this class name to props when the disclosure is closed
*/
closedClass?: string
/**
* Adds this style to props when the disclosure is open
*/
openStyle?: React.CSSProperties
/**
* Adds this style to props when the disclosure is closed
*/
closedStyle?: React.CSSProperties
/**
* Adds an onClick handler in addition to the default one that
* toggles the disclosure's open state.
*/
onClick?: (e: MouseEvent) => any
}
```
#### 回返
```ts
interface A11yProps {
readonly 'aria-controls': string | undefined
readonly 'aria-expanded': boolean
readonly role: 'button'
readonly tabIndex: 0
readonly className: string | undefined
readonly style: React.CSSProperties | undefined
}
```
#### 示例
```jsx
import * as React from 'react'
import {useA11yTrigger} from '@accessible/disclosure'
const MyTrigger = () => {
const ref = React.useRef(null)
const a11yProps = useA11yTrigger(ref, {
openClass: 'open',
closedClass: 'closed',
})
return (
)
}
```
### 调试器( T)
此组件将任何反应元素包起来并添加一个 `onClick` 切换打开状态的处理器 披露目标.
#### 道具
| Prop | 类型 | 默认 | 需要吗? | 说明 |
| --- | --- | --- | --- | --- |
| 关闭分类 | `string` | `undefined` | 没有 | 当披露时,该类名将适用于儿童要素 `closed`。 。 。 . |
| 打开分类 | `string` | `undefined` | 没有 | 当披露时,该类名将适用于儿童要素 `open`。 。 。 . |
| 关闭样式 | `React.CSSProperties` | `undefined` | 没有 | 这些样式将适用于披露时的儿童要素 `closed`。 。 。 . |
| 打开样式 | `React.CSSProperties` | `undefined` | 没有 | 这些样式名称将适用于披露时的儿童元素 `open`。 。 。 . |
| 儿童 | `React.ReactElement` | `undefined` | 对 | 儿童被这一组成部分所克隆,其道具中以及上面所定义的事件中带有aria属性. |
```jsx
//
```
### 使用 A11y 关闭按钮( 目标, 选项 )
创建无头密钥的反向钩 [WAI-ARIA 撰写惯例](https://www.w3.org/TR/wai-aria-practices-1.1/examples/disclosure/disclosure-faq.html)。 。 。 . 除了为您组件提供无障碍道具之外, 此钩子还会添加事件 用于实际要素与假要素之间的互操作性,例如:. 财务报告和审定财务报表
页:1 目标元素
#### 参数
| 参数 | 类型 | 需要吗? | 说明 |
| --- | --- | --- | --- |
| 目标 | `React.RefObject | T | null` | 对 | 反应 ref 或 HTML 元素 |
| 选项 | [`UseA11yCloseButtonOptions`](https://npmcn.com/package/%40accessible/disclosure/#readme-usea11yclosebuttonoptions) | 没有 | 配置选项 |
#### 使用 A11y 关闭按钮选项
```ts
export interface UseA11yCloseButtonOptions {
/**
* Adds an onClick handler in addition to the default one that
* closes the disclosure.
*/
onClick?: (e: MouseEvent) => any
}
```
#### 回返
```ts
interface A11yProps {
readonly 'aria-controls': string | undefined
readonly 'aria-expanded': boolean
readonly 'aria-label': 'Close'
readonly role: 'button'
readonly tabIndex: 0
}
```
#### 示例
```jsx
import * as React from 'react'
import {useA11yCloseButton} from '@accessible/disclosure'
const MyTrigger = () => {
const ref = React.useRef(null)
const a11yProps = useA11yCloseButton(ref, {
onClick: () => console.log('Closing!'),
})
return (
)
}
```
### < 关闭按钮>
这是一个方便组件,将任何反应元素包裹起来,并添加一个Click处理器来关闭披露.
#### 道具
| Prop | 类型 | 默认 | 需要吗? | 说明 |
| --- | --- | --- | --- | --- |
| 儿童 | `React.ReactElement` | `undefined` | 对 | 儿童被这一组成部分所克隆,其道具中以及上面所定义的事件中带有aria属性. |
```jsx
//
```
### 使用解析 ()
这个钩子提供了披露的价值 [披露内容](https://npmcn.com/package/%40accessible/disclosure/#readme-disclosurecontextvalue)
### 披露内容值
```typescript
export interface DisclosureContextValue {
/**
* The open state of the disclosure
*/
isOpen: boolean
/**
* Opens the disclosure
*/
open: () => void
/**
* Closes the disclosure
*/
close: () => void
/**
* Toggles the open state of the disclosure
*/
toggle: () => void
/**
* A unique ID for the disclosure target
*/
id?: string
}
```
#### 示例
```jsx
const Component = () => {
const {open, close, toggle, isOpen} = useDisclosure()
return
}
```
## 自由主义
麻省理工学院
## 常见问题
### @accessible/disclosure 是什么？
\* 反应的可获取和多功能披露部分
### 如何安装 @accessible/disclosure？
在项目目录运行 npm install @accessible/disclosure，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（\>=16\.8）、react-dom（\>=16\.8）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。
### @accessible/disclosure 支持 TypeScript 吗？
支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。
### @accessible/disclosure 支持 ESM 还是 CommonJS？
同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。
### @accessible/disclosure 可以商用吗？
@accessible/disclosure 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。
### @accessible/disclosure 的下载量有多少？
根据 npm 官方下载统计，@accessible/disclosure 在 2026/10/05 – 2026/11/03 这 30 天内被下载 4,453 次，日均约 148 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。
### @accessible/disclosure 还在维护吗？
最新版本 3\.0\.2 发布于 2020/08/11（6 年前）；至今共发布 17 个版本，其中过去 12 个月发布了 0 个；首次发布于 2020/01/17。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。