@accessible/toggle-button 中文文档教程

Question

---

<ToggleButton>

npm i @accessible/toggle-button

---

一个可访问的双态按钮，可以关闭（未按下）或打开（按下）。 常见用例 是工具栏按钮，例如粗体、斜体和下划线。 除了遵循 无障碍指南在这里，这个组件 提供真实 元素和人造

、、< 之间的互操作/代码>等。 阿尔。 纽扣。

Quick Start

查看 CodeSandbox 上的示例

```jsx 和谐 从“反应”导入*作为反应 import {ToggleButton, useA11yToggleButton}

从'@accessible/toggle-button' const Component = () => { const [静音, setMuted] = React.useState(false) 返回 （<跨度>{静音？ “取消静音”：“静音” ) }

常量 ComponentWithHook = () => { const ref = React.useRef(null) const [静音, setMuted] = React.useState(false) const a11yProps = useA11yToggleButton(ref, { 活动：静音， onChange：设置静音， })

返回 ( <跨度>{静音？ “取消静音”：“静音” ) }

## API

### useA11yToggleButton(target, options?)

A React hook for creating a headless a11y toggle button to the
[W3C accessibility standard](https://www.w3.org/TR/wai-aria-practices/#button). In addition
to providing accessibility props to your component, this hook will add events for interoperability
between actual `<button>` elements and fake ones e.g. `<a>` and `<div>` to the `target` element.

#### Arguments

| Argument | Type                                                        | Required? | Description                                                                                          |
| -------- | ----------------------------------------------------------- | --------- | ---------------------------------------------------------------------------------------------------- |
| target   | <code>React.RefObject&lt;T&gt; &#124; T &#124; null</code>  | Yes       | A React ref or HTML element                                                                          |  |
| options  | [`UseA11yToggleButtonOptions`](#usea11ytogglebuttonoptions) | Yes       | The component you want to turn into a button that handles focus and `space`, `enter` keydown events. |

#### UseA11yToggleButtonOptions

TS 导出接口 UseA11yToggleButtonOptions { /**

• Creates a controlled hook where the active value always matches this one. / active?: boolean /*
• Sets the default active state of the button for uncontrolled hooks.
• @default false / defaultActive?: boolean /*
• This callback is invoked any time the active state of the
• toggle button changes / onChange?: (active: boolean) => void /*
• Adds a click event to your button */ onClick?: (event: MouseEvent) => any }

#### Returns

TS 接口返回值{ 只读'aria-pressed'：布尔值 只读角色：“按钮” 只读标签索引：0 } ```

<ToggleButton>

该组件克隆其子组件并为按下/未按下添加可访问性角色 状态按钮。 它还创建上下文，以便其子项可以访问其活动状态。

Props

Prop	Type	Default	Required?	Description
active	string		No	Creates a controlled component where the active value always matches this one.
defaultActive	string	false	No	Sets the default active state of the button.
activeClass	string		No	Adds this class name to its child component when the button is in a active state.
inactiveClass	string		No	Adds this class name to its child component when the button is in an inactive state.
activeStyle	React.CSSProperties		No	Adds this style object to its child component when the button is in a active state.
inactiveStyle	React.CSSProperties		No	Adds this style object to its child component when the button is in an inactive state.
onChange	(active: boolean) => void		No	This callback is invoked any time the active state changes.
children	React.ReactElement		Yes	This is the element you want to turn into a ToggleButton.

LICENSE

麻省理工学院