# @accessible/drawer 中文文档

规范地址：https://npmcn.com/package/%40accessible/drawer/

版本：3\.0\.2
npm 元数据更新时间：2022-04-04T11:07:07.067Z
中文译文更新时间：2026-11-06T07:31:33.676Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40accessible/drawer
原文对照：https://npmcn.com/package/%40accessible/drawer/?lang=original
项目主页：https://github.com/accessible-ui/drawer#readme
源码仓库：https://github.com/accessible-ui/drawer

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：207 kB，17 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：2 个
- peer 依赖：react \>=16\.8，react-dom \>=16\.8
- 首次发布：2019-12-17T20:24:39.461Z
- 最新版本发布：2020-08-10T23:35:59.477Z
- 近 30 天下载量：4140（2026-10-05 至 2026-11-03，npm 官方下载统计）
- 已发布版本数：19（近 12 个月 0 个）

## 中文简介

\* \* 用于反应的无障碍多功能抽屉组件

## 安装

```sh
npm install @accessible/drawer
```

也可以使用：`pnpm add @accessible/drawer`、`yarn add @accessible/drawer`、`bun add @accessible/drawer`

## README

* * *

# < 拖放器>

 [![Bundlephobia](https://img.shields.io/bundlephobia/minzip/@accessible/drawer?style=for-the-badge&labelColor=24292e)](https://bundlephobia.com/result?p=@accessible/drawer)[![Types](https://img.shields.io/npm/types/@accessible/drawer?style=for-the-badge&labelColor=24292e) ](https://www.npmjs.com/package/@accessible/drawer)[![Code coverage](https://img.shields.io/codecov/c/gh/accessible-ui/drawer?style=for-the-badge&labelColor=24292e) ](https://codecov.io/gh/accessible-ui/drawer)[![Build status](https://img.shields.io/travis/accessible-ui/drawer?style=for-the-badge&labelColor=24292e) ](https://travis-ci.org/accessible-ui/drawer)[![NPM Version](https://img.shields.io/npm/v/@accessible/drawer?style=for-the-badge&labelColor=24292e) ](https://www.npmjs.com/package/@accessible/drawer)[![MIT License](https://img.shields.io/npm/l/@accessible/drawer?style=for-the-badge&labelColor=24292e)](https://jaredlunde.mit-license.org/)

npm i @accessible/drawer

* * *

用于反应的无障碍多功能抽屉组件

## 特征

-   [x] **样式不可识别** 您可以使用您选择的样式库 。 这个 与CSS-in-JS,SASS,平原CSS,平原合作 `style` 物体,任何东西!
-   [x] **方便门户** 抽屉目标在配置时会渲染成您选择的 React ports 这样做.
-   [x] **a11y/aria达标** 此组件与框外的屏幕阅读器一起工作并管理 专注给你.

## 快速启动

[检查一下这个例子 **代码框**](https://codesandbox.io/s/accessibledrawer-example-y65oq)

```jsx
import * as React from 'react'
import * as Drawer from '@accessible/drawer'

const Component = () => (
  <Drawer.Drawer>
    <Drawer.Trigger>
      <button>Open me</button>
    </Drawer.Trigger>

    <Drawer.Target>
      <div className='my-drawer'>
        <Drawer.CloseButton>
          <button>Close me</button>
        </Drawer.CloseButton>

        <div>I've been revealed!</div>
      </div>
    </Drawer.Target>
  </Drawer.Drawer>
)
```

## API 密码

### 构成部分

| 构成部分 | 说明 |
| --- | --- |
| [`<Drawer>`](https://npmcn.com/package/%40accessible/drawer/#readme-drawer) | 此组件为您的抽屉目标创建上下文并触发并包含一些配置选项 . |
| [`<Target>`](https://npmcn.com/package/%40accessible/drawer/#readme-target) | 此组件包入任何反应元素并将其变成抽屉目标 . |
| [`<Trigger>`](https://npmcn.com/package/%40accessible/drawer/#readme-trigger) | 此组件将任意反应元素包裹起来, 并将其变成抽屉触发器 . |
| [`<CloseButton>`](https://npmcn.com/package/%40accessible/drawer/#readme-closebutton) | 这是一个方便组件,可以包入任何回放元素,并添加一个 onClick处理器来关闭抽屉. |

### 钩子

| 钩子 | 说明 |
| --- | --- |
| [`useDrawer()`](https://npmcn.com/package/%40accessible/drawer/#readme-usedrawer) | 此钩提供抽屉的值 [拖取器串联 Vale 对象](https://npmcn.com/package/%40accessible/drawer/#readme-drawercontextvalue)。 。 。 . |
| [`useA11yTarget()`](https://npmcn.com/package/%40accessible/drawer/#readme-usea11ytargettarget-options) | 创建无头抽屉目标的反向钩 [WAI-ARIA 撰写惯例](https://www.w3.org/TR/wai-aria-practices-1.1/examples/disclosure/disclosure-faq.html)。 。 。 . |
| [`useA11yTrigger()`](https://npmcn.com/package/%40accessible/drawer/#readme-usea11ytriggertarget-options) | 创建无头抽屉触发器的反向钩 [WAI-ARIA 撰写惯例](https://www.w3.org/TR/wai-aria-practices-1.1/examples/disclosure/disclosure-faq.html)。 。 。 . |
| [`useA11yCloseButton()`](https://npmcn.com/package/%40accessible/drawer/#readme-usea11yclosebuttontarget-options) | 创建无头密钥的反向钩 [WAI-ARIA 撰写惯例](https://www.w3.org/TR/wai-aria-practices-1.1/examples/disclosure/disclosure-faq.html)。 。 。 . |

### < 拖放器>

此组件为您的抽屉目标创建上下文并触发并包含一些 配置选项.

#### 道具

| Prop | 类型 | 默认 | 需要吗? | 说明 |
| --- | --- | --- | --- | --- |
| 默认打开 | `boolean` | `false` | 没有 | 此设置抽屉的默认打开状态 。 默认抽屉关了. |
| 打开 | `boolean` | `undefined` | 没有 | 这就产生了一个控制抽屉组件,其中抽屉的开口状态由这个属性控制. |
| 变化 | `(open: boolean) => void` | `undefined` | 没有 | 此调用在任何时间 `open` 抽屉的状态改变. |
| 编号 | `string` | `undefined` | 没有 | 默认情况下, 此组件会为您创建一个独特的 id, 因为某些 aria 属性需要它 。 此处提供一个ID可以取代自动ID特性. |
| 儿童 | `React.ReactNode` | `undefined` | 没有 | 你的抽屉里的东西和任何其他孩子. |

### 使用 A11Y目标( 目标, 选项 )

创建无头抽屉目标的反向钩 [WAI-ARIA 撰写惯例](https://www.w3.org/TR/wai-aria-practices-1.1/examples/disclosure/disclosure-faq.html)。 。 。 .

#### 参数

| 参数 | 类型 | 需要吗? | 说明 |
| --- | --- | --- | --- |
| 目标 | `React.RefObject<T> | T | null` | 对 | 反应 ref 或 HTML 元素 |
| 选项 | [`UseA11yTargetOptions`](https://npmcn.com/package/%40accessible/drawer/#readme-usea11ytargetoptions) | 没有 | 配置选项 |

#### 使用A11目标选项

```ts
export interface UseA11yTargetOptions {
  /**
   * Sets the placement of the drawer menu
   * @default "left"
   */
  placement?: 'top' | 'right' | 'bottom' | 'left'
  /**
   * Adds this class name to props when the drawer is open
   */
  openClass?: string
  /**
   * Adds this class name to props when the drawer is closed
   */
  closedClass?: string
  /**
   * Adds this style to props when the drawer is open
   */
  openStyle?: React.CSSProperties
  /**
   * Adds this style to props when the drawer 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
type A11yProps = {
  readonly 'aria-hidden': boolean
  readonly id: string | undefined
  readonly className: string | undefined
  readonly style: {
    readonly visibility: 'hidden' | 'visible'
  } & React.CSSProperties
} & {
  readonly style:
    | ({
        readonly visibility: 'hidden' | 'visible'
      } & React.CSSProperties & {
          readonly position: 'fixed'
          readonly top: 0
          readonly right: 0
          readonly bottom: 'auto'
          readonly left: 0
          readonly transform: 'translate3d(0, -100%, 0)'
        })
    | ({
        readonly visibility: 'hidden' | 'visible'
      } & React.CSSProperties & {
          readonly position: 'fixed'
          readonly top: 0
          readonly right: 0
          readonly bottom: 0
          readonly left: 'auto'
          readonly transform: 'translate3d(100%, 0, 0)'
        })
    | ({
        readonly visibility: 'hidden' | 'visible'
      } & React.CSSProperties & {
          readonly position: 'fixed'
          readonly top: 'auto'
          readonly right: 0
          readonly bottom: 0
          readonly left: 0
          readonly transform: 'translate3d(0, 100%, 0)'
        })
    | ({
        readonly visibility: 'hidden' | 'visible'
      } & React.CSSProperties & {
          readonly position: 'fixed'
          readonly top: 0
          readonly right: 'auto'
          readonly bottom: 0
          readonly left: 0
          readonly transform: 'translate3d(-100%, 0, 0)'
        })
}
```

#### 示例

```jsx
import * as React from 'react'
import {useA11yTarget} from '@accessible/drawer'

const MyTarget = () => {
  const ref = React.useRef(null)
  const a11yProps = useA11yTarget(ref, {preventScroll: true})

  return (
    <div ref={ref} {...a11yProps}>
      I am the drawer content
    </div>
  )
}
```

### <目标>

此组件包入任何反应元素并将其变成抽屉目标 .

#### 道具

| Prop | 类型 | 默认 | 需要吗? | 说明 |
| --- | --- | --- | --- | --- |
| 安置情况 | `"top" | "right" | "bottom" | "left"` | `false` | 没有 | 何时 `true` 这将让抽屉变成一个带有ID的反应门户 `#portals`。您可以通过在此提供其查询选择器,例如将其制入任何门户网站. `#foobar`, (中文(简体) ), `[data-portal=true]`,或 `.foobar`。 。 。 . |
| 门户 | `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
<Target>
  <div className='alert'>Alert</div>
</Target>

// <div
//   class="alert"
//   aria-hidden="true"
//   id="🅰12"
//   style="visibility: hidden;"
// >
//   Alert
// </div>
```

### 使用 A11yTrigger( 目标, 选项) 吗

创建无头抽屉触发器的反向钩 [WAI-ARIA 撰写惯例](https://www.w3.org/TR/wai-aria-practices-1.1/examples/disclosure/disclosure-faq.html)。 。 。 . 除了为您组件提供无障碍道具之外, 此钩子还会添加事件 用于实际要素与假要素之间的互操作性,例如:. 财务报告和审定财务报表

页:1 目标元素

#### 参数

| 参数 | 类型 | 需要吗? | 说明 |
| --- | --- | --- | --- |
| 目标 | `React.RefObject<T> | T | null` | 对 | 反应 ref 或 HTML 元素 |
| 选项 | [`UseA11yTriggerOptions`](https://npmcn.com/package/%40accessible/drawer/#readme-usea11ytriggeroptions) | 没有 | 配置选项 |

#### 使用A11yTrigger 选项

```ts
export interface UseA11yTriggerOptions {
  /**
   * Adds this class name to props when the drawer is open
   */
  openClass?: string
  /**
   * Adds this class name to props when the drawer is closed
   */
  closedClass?: string
  /**
   * Adds this style to props when the drawer is open
   */
  openStyle?: React.CSSProperties
  /**
   * Adds this style to props when the drawer is closed
   */
  closedStyle?: React.CSSProperties
  /**
   * Adds an onClick handler in addition to the default one that
   * toggles the drawer's open state.
   */
  onClick?: (e: MouseEvent) => any
}
```

#### 回返

```ts
interface A11yProps<E extends React.MouseEvent<any, MouseEvent>> {
  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/drawer'

const MyTrigger = () => {
  const ref = React.useRef(null)
  const a11yProps = useA11yTrigger(ref, {
    openClass: 'open',
    closedClass: 'closed',
  })

  return (
    <button ref={ref} {...a11yProps}>
      Clicking me toggles the drawer content
    </button>
  )
}
```

### 调试器( T)

此组件将任何反应元素包起来并添加一个 `onClick` 切换打开状态的处理器 抽屉目标.

#### 道具

| Prop | 类型 | 默认 | 需要吗? | 说明 |
| --- | --- | --- | --- | --- |
| 关闭分类 | `string` | `undefined` | 没有 | 当抽屉是 `closed`。 。 。 . |
| 打开分类 | `string` | `undefined` | 没有 | 当抽屉是 `open`。 。 。 . |
| 关闭样式 | `React.CSSProperties` | `undefined` | 没有 | 当抽屉是 `closed`。 。 。 . |
| 打开样式 | `React.CSSProperties` | `undefined` | 没有 | 当抽屉是 `open`。 。 。 . |
| 儿童 | `React.ReactElement` | `undefined` | 对 | 儿童被这一组成部分所克隆,其道具中以及上面所定义的事件中带有aria属性. |

```jsx
<Trigger on='click'>
  <button className='my-button'>Open me!</button>
</Trigger>

// <button
//   class="my-button"
//   aria-controls="🅰12"
//   aria-expanded="false"
// >
//   Open me!
// </button>
```

### 使用 A11y 关闭按钮( 目标, 选项 )

创建无头密钥的反向钩 [WAI-ARIA 撰写惯例](https://www.w3.org/TR/wai-aria-practices-1.1/examples/disclosure/disclosure-faq.html)。 。 。 . 除了为您组件提供无障碍道具之外, 此钩子还会添加事件 用于实际要素与假要素之间的互操作性,例如:. 财务报告和审定财务报表

页:1 目标元素

#### 参数

| 参数 | 类型 | 需要吗? | 说明 |
| --- | --- | --- | --- |
| 目标 | `React.RefObject<T> | T | null` | 对 | 反应 ref 或 HTML 元素 |
| 选项 | [`UseA11yCloseButtonOptions`](https://npmcn.com/package/%40accessible/drawer/#readme-usea11yclosebuttonoptions) | 没有 | 配置选项 |

#### 使用 A11y 关闭按钮选项

```ts
export interface UseA11yCloseButtonOptions {
  /**
   * Adds an onClick handler in addition to the default one that
   * closes the drawer.
   */
  onClick?: (e: MouseEvent) => any
}
```

#### 回返

```ts
interface A11yProps<E extends React.MouseEvent<any, MouseEvent>> {
  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/drawer'

const MyTrigger = () => {
  const ref = React.useRef(null)
  const a11yProps = useA11yCloseButton(ref, {
    onClick: () => console.log('Closing!'),
  })

  return (
    <button ref={ref} {...a11yProps}>
      Clicking me closes the drawer content
    </button>
  )
}
```

### < 关闭按钮>

这是一个方便组件,它包住任何反应元素,并添加一个Click处理器,关闭抽屉.

#### 道具

| Prop | 类型 | 默认 | 需要吗? | 说明 |
| --- | --- | --- | --- | --- |
| 儿童 | `React.ReactElement` | `undefined` | 对 | 儿童被这一组成部分所克隆,其道具中以及上面所定义的事件中带有aria属性. |

```jsx
<CloseButton>
  <button className='my-button'>Close me</button>
</CloseButton>

// <button
//   class="my-button"
//   aria-controls="drawer--12"
//   aria-expanded="false"
// >
//   Close me
// </button>
```

### 使用 Drawer () ()

此钩提供抽屉的值 [拖取器串联 Vale 对象](https://npmcn.com/package/%40accessible/drawer/#readme-drawercontextvalue)

### 绘图格式

```typescript
export interface DrawerContextValue {
  /**
   * The open state of the drawer
   */
  isOpen: boolean
  /**
   * Opens the drawer
   */
  open: () => void
  /**
   * Closes the drawer
   */
  close: () => void
  /**
   * Toggles the open state of the drawer
   */
  toggle: () => void
  /**
   * A unique ID for the drawer target
   */
  id?: string
}
```

#### 示例

```jsx
const Component = () => {
  const {open, close, toggle, isOpen} = useDrawer()
  return <button onClick={toggle}>Toggle the drawer</button>
}
```

## 自由主义

麻省理工学院

## 常见问题

### @accessible/drawer 是什么？

\* \* 用于反应的无障碍多功能抽屉组件

### 如何安装 @accessible/drawer？

在项目目录运行 npm install @accessible/drawer，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（\>=16\.8）、react-dom（\>=16\.8）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @accessible/drawer 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @accessible/drawer 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @accessible/drawer 可以商用吗？

@accessible/drawer 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @accessible/drawer 的下载量有多少？

根据 npm 官方下载统计，@accessible/drawer 在 2026/10/05 – 2026/11/03 这 30 天内被下载 4,140 次，日均约 138 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @accessible/drawer 还在维护吗？

最新版本 3\.0\.2 发布于 2020/08/11（6 年前）；至今共发布 19 个版本，其中过去 12 个月发布了 0 个；首次发布于 2019/12/18。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。