@accessible/accordion 中文文档教程

发布于 4年前 浏览 18 项目主页 更新于 3年前


<Accordion>

捆绑恐惧症 Types 代码覆盖率 构建状态 NPM 版本 麻省理工学院许可证

npm i @accessible/accordion

用于 React 的可访问且多功能的手风琴,具有键盘导航和标签功能 w3.org 的 WAI-ARIA 手风琴最佳实践示例

Features

  • Style-agnostic You can use this component with the styling library of your choice. It works with CSS-in-JS, SASS, plain CSS, plain style objects, anything!
  • a11y/aria-compliant This component works with screen readers out of the box and manages focus for you.

Quick Start

查看 CodeSandbox 上的示例

```jsx 和谐 import {Accordion, Section, Trigger, Panel}

从'@accessible/accordion' const Component = () => (

Section 1 content

<Section>
  <h3>
    <Trigger>
      <button>Section 2</button>
    </Trigger>
  </h3>
  <Panel>
    <div className="panel">Section 2 content</div>
  </Panel>
</Section>

)

## API

### Components

| Component                   | Description                                                                                                                                                      |
| --------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| [`<Accordion>`](#accordion) | This component creates the context for your accordion section and contains some configuration options.                                                           |
| [`<Section>`](#section)     | This component creates the context for the accordion panel and trigger contained in this section. It must be a direct descendent of [`<Accordion>`](#accordion). |
| [`<Trigger>`](#trigger)     | This component clones any React element and turns it into a accordion trigger that controls the visible state of the panel.                                      |
| [`<Panel>`](#panel)         | This component clones any React element and turns it into a accordion panel.                                                                                     |
| [`<Close>`](#close)         | This is a convenience component that clones any React element and adds an onClick handler to close its parent panel.                                             |  |

### Hooks

| Hook                              | Description                                                                                                           |
| --------------------------------- | --------------------------------------------------------------------------------------------------------------------- |
| [`useAccordion()`](#useaccordion) | This hook returns the value of the accordion's [AccordionContext object](#accordioncontextvalue).                     |
| [`useSection()`](#usesection)     | This hook returns the value of the accordion [`<Section>`'s](#section) [SectionContext object](#sectioncontextvalue). |
| [`useControls()`](#usecontrols)   | This hook returns the accordion [`<Section>`'s](#section) `open`, `close`, and `toggle` functions.                    |
| [`useDisabled()`](#usedisabled)   | This hook returns the accordion [`<Section>`'s](#section) `disabled` value.                                           |
| [`useIsOpen()`](#useisopen)       | This hook returns the accordion [`<Section>`'s](#section) `isOpen` value.                                             |

### `<Accordion>`

This component creates the context for your accordion section and contains some configuration options.
[`<Section>`s](#section) are the only type of children allowed.

#### Props

| Prop              | Type                                                  | Default     | Required? | Description                                                                                                                                                                      |
| ----------------- | ----------------------------------------------------- | ----------- | --------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| defaultOpen       | <code>number &#124; number[]</code>                   | `undefined` | No        | The section by index (or sections if `allowMultipleOpen`) you want opened by default.                                                                                            |
| open              | <code>number &#124; number[]</code>                   | `undefined` | No        | Makes this a controlled component where `open`, `close`, `toggle`, controls have no effect. The sections defined here are always the ones that are open.                         |
| allowMultipleOpen | `boolean`                                             | `false`     | No        | Allows multiple sections to be opened at one time.                                                                                                                               |
| allowAllClosed    | `boolean`                                             | `false`     | No        | Allows all of the sections to be closed. If `false`, you must define either the `open` or `defaultOpen` property.                                                                |
| onChange          | <code>(opened: number &#124; number[]) => void</code> | `undefined` | No        | Called each time the open sections change. If `allowMultipleOpen`, the argument will be an array, otherwise a single number. The number corresponds to the open section's index. |
| children          | `React.ReactElement<SectionProps>[]`                  | `undefined` | Yes       | The only children allowed by this component are [`<Section>`s](#section).                                                                                                        |

### `<Section>`

This component creates the context for the accordion panel and trigger contained in this section. It must be a direct
descendent of [`<Accordion>`](#accordion).

#### Props

| Prop     | Type                                                                                    | Default     | Required? | Description                                                                                                      |
| -------- | --------------------------------------------------------------------------------------- | ----------- | --------- | ---------------------------------------------------------------------------------------------------------------- |
| id       | `string`                                                                                | `undefined` | No        | Overrides the ID that is auto-generated by this component.                                                       |
| disabled | `boolean`                                                                               | `false`     | No        | `true` if the section should not be allowed to have its `open` state changed.                                    |
| children | <code>React.ReactNode &#124; ((context: SectionContextValue) => React.ReactNode)</code> | `undefined` | Yes       | Sections must include a [`<Trigger>`](#trigger) and a [`Panel`](#panel) in addition to anything else you'd like. |

### `<Trigger>`

This component clones any React element and turns it into a accordion trigger that controls the visible state of
the [`<Panel>`](#panel). It must be a child of [`<Section>`](#section).

#### Props

| Prop        | Type                  | Default     | Required? | Description                                                                                                                                                                                             |
| ----------- | --------------------- | ----------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| openClass   | `string`              | `undefined` | No        | This class name will be applied to the child element when the section is `open`.                                                                                                                        |
| closedClass | `string`              | `undefined` | No        | This class name will be applied to the child element when the section is `closed`.                                                                                                                      |
| openStyle   | `React.CSSProperties` | `undefined` | No        | These styles will be applied to the child element when the section is `open`.                                                                                                                           |
| closedStyle | `React.CSSProperties` | `undefined` | No        | These styles will be applied to the child element when the section is `closed`.                                                                                                                         |
| children    | `React.ReactElement`  | `undefined` | Yes       | The child is cloned by this component and has aria attributes injected into its props as well as keyboard events for opening the section with `space` and `enter` keys and navigating between sections. |

### `<Panel>`

This component clones any React element and turns it into a accordion section panel. It must be
a child of [`<Section>`](#section).

#### Props

| Prop        | Type                  | Default     | Required? | Description                                                                                                                                                     |
| ----------- | --------------------- | ----------- | --------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| openClass   | `string`              | `undefined` | No        | This class name will be applied to the child element when the section is `open`.                                                                                |
| closedClass | `string`              | `undefined` | No        | This class name will be applied to the child element when the section is `closed`.                                                                              |
| openStyle   | `React.CSSProperties` | `undefined` | No        | These styles will be applied to the child element when the section is `open`.                                                                                   |
| closedStyle | `React.CSSProperties` | `undefined` | No        | These styles will be applied to the child element when the section is `closed`.                                                                                 |
| children    | `React.ReactElement`  | `undefined` | Yes       | The child is cloned by this component and has aria attributes injected into its props as well as keyboard events for closing the section with the `escape` key. |

### `<Close>`

This is a convenience component that clones any React element and adds an onClick handler to close its parent panel. It
must be a child of [`<Section>`](#section).

#### Props

| Prop     | Type                 | Default     | Required? | Description                                                                                                                                                                    |
| -------- | -------------------- | ----------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| children | `React.ReactElement` | `undefined` | Yes       | The child is cloned by this component and has aria attributes injected into its props as keyboard events to ensure it acts like a button even if it isn't a native `<button>`. |

### `useAccordion()`

This hook returns the value of the accordion's [AccordionContext object](#accordioncontextvalue). This hook
must be within a child of [`<Accordion>`](#accordion).

### `AccordionContextValue`

打字稿 jsx 接口 AccordionContextValue { // 手风琴部分的 DOM 引用 部分:(HTMLElement | undefined)[] // 注册一个新的手风琴部分 registerSection: (index: number, trigger: HTMLElement) => () => 空白 // 开放部分的索引 打开:数字[] // 打开一个部分 打开:(部分:数字|未定义)=> 空白 // 关闭一个部分 关闭:(部分:数字|未定义)=> 空白 // 如果某个部分是打开的,则返回 true isOpen: (section: number | undefined) => 布尔值 // 手风琴是否允许关闭其所有部分? allowAllClosed: 布尔值 打字稿

### `useSection()`

This hook returns the value of the accordion sections's [SectionContextValue object](#sectioncontextvalue). This hook
must be within a child of [`<Section>`](#section).

### `SectionContextValue`

jsx 接口 SectionContextValue { // 这个部分是否打开? isOpen:布尔值 // 如果未禁用则打开此部分 打开:()=> 空白 // 如果可能,关闭此部分 关闭:()=> 空白 // 如果可能,切换此部分的可见状态 切换:()=>; 空白 // 本节的id 编号?:字符串 // 本节的索引 索引号 // 该部分是否被禁用? 禁用:布尔值 // 对该部分的的 DOM 引用 triggerRef:React.MutableRefObject} ```

useControls()

这个钩子返回手风琴部分的openclosetoggle 函数。 这个钩子 必须在

的子项中。

useDisabled()

此挂钩返回手风琴部分的 disabled 值。 这个钩子 必须在

的子项中。

useIsOpen()

此挂钩返回手风琴部分的 isOpen 值。 这个钩子 必须在

的子项中。

LICENSE

麻省理工学院


<Accordion>

Bundlephobia Types Code coverage Build status NPM Version MIT License

npm i @accessible/accordion

An accessible and versatile accordion for React with keyboard navigation and labeling features taught in w3.org's WAI-ARIA accordion best practices example.

Features

  • Style-agnostic You can use this component with the styling library of your choice. It works with CSS-in-JS, SASS, plain CSS, plain style objects, anything!
  • a11y/aria-compliant This component works with screen readers out of the box and manages focus for you.

Quick Start

Check out the example on CodeSandbox

```jsx harmony import {Accordion, Section, Trigger, Panel} from '@accessible/accordion'

const Component = () => (

Section 1 content

<Section>
  <h3>
    <Trigger>
      <button>Section 2</button>
    </Trigger>
  </h3>
  <Panel>
    <div className="panel">Section 2 content</div>
  </Panel>
</Section>

)

## API

### Components

| Component                   | Description                                                                                                                                                      |
| --------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| [`<Accordion>`](#accordion) | This component creates the context for your accordion section and contains some configuration options.                                                           |
| [`<Section>`](#section)     | This component creates the context for the accordion panel and trigger contained in this section. It must be a direct descendent of [`<Accordion>`](#accordion). |
| [`<Trigger>`](#trigger)     | This component clones any React element and turns it into a accordion trigger that controls the visible state of the panel.                                      |
| [`<Panel>`](#panel)         | This component clones any React element and turns it into a accordion panel.                                                                                     |
| [`<Close>`](#close)         | This is a convenience component that clones any React element and adds an onClick handler to close its parent panel.                                             |  |

### Hooks

| Hook                              | Description                                                                                                           |
| --------------------------------- | --------------------------------------------------------------------------------------------------------------------- |
| [`useAccordion()`](#useaccordion) | This hook returns the value of the accordion's [AccordionContext object](#accordioncontextvalue).                     |
| [`useSection()`](#usesection)     | This hook returns the value of the accordion [`<Section>`'s](#section) [SectionContext object](#sectioncontextvalue). |
| [`useControls()`](#usecontrols)   | This hook returns the accordion [`<Section>`'s](#section) `open`, `close`, and `toggle` functions.                    |
| [`useDisabled()`](#usedisabled)   | This hook returns the accordion [`<Section>`'s](#section) `disabled` value.                                           |
| [`useIsOpen()`](#useisopen)       | This hook returns the accordion [`<Section>`'s](#section) `isOpen` value.                                             |

### `<Accordion>`

This component creates the context for your accordion section and contains some configuration options.
[`<Section>`s](#section) are the only type of children allowed.

#### Props

| Prop              | Type                                                  | Default     | Required? | Description                                                                                                                                                                      |
| ----------------- | ----------------------------------------------------- | ----------- | --------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| defaultOpen       | <code>number &#124; number[]</code>                   | `undefined` | No        | The section by index (or sections if `allowMultipleOpen`) you want opened by default.                                                                                            |
| open              | <code>number &#124; number[]</code>                   | `undefined` | No        | Makes this a controlled component where `open`, `close`, `toggle`, controls have no effect. The sections defined here are always the ones that are open.                         |
| allowMultipleOpen | `boolean`                                             | `false`     | No        | Allows multiple sections to be opened at one time.                                                                                                                               |
| allowAllClosed    | `boolean`                                             | `false`     | No        | Allows all of the sections to be closed. If `false`, you must define either the `open` or `defaultOpen` property.                                                                |
| onChange          | <code>(opened: number &#124; number[]) => void</code> | `undefined` | No        | Called each time the open sections change. If `allowMultipleOpen`, the argument will be an array, otherwise a single number. The number corresponds to the open section's index. |
| children          | `React.ReactElement<SectionProps>[]`                  | `undefined` | Yes       | The only children allowed by this component are [`<Section>`s](#section).                                                                                                        |

### `<Section>`

This component creates the context for the accordion panel and trigger contained in this section. It must be a direct
descendent of [`<Accordion>`](#accordion).

#### Props

| Prop     | Type                                                                                    | Default     | Required? | Description                                                                                                      |
| -------- | --------------------------------------------------------------------------------------- | ----------- | --------- | ---------------------------------------------------------------------------------------------------------------- |
| id       | `string`                                                                                | `undefined` | No        | Overrides the ID that is auto-generated by this component.                                                       |
| disabled | `boolean`                                                                               | `false`     | No        | `true` if the section should not be allowed to have its `open` state changed.                                    |
| children | <code>React.ReactNode &#124; ((context: SectionContextValue) => React.ReactNode)</code> | `undefined` | Yes       | Sections must include a [`<Trigger>`](#trigger) and a [`Panel`](#panel) in addition to anything else you'd like. |

### `<Trigger>`

This component clones any React element and turns it into a accordion trigger that controls the visible state of
the [`<Panel>`](#panel). It must be a child of [`<Section>`](#section).

#### Props

| Prop        | Type                  | Default     | Required? | Description                                                                                                                                                                                             |
| ----------- | --------------------- | ----------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| openClass   | `string`              | `undefined` | No        | This class name will be applied to the child element when the section is `open`.                                                                                                                        |
| closedClass | `string`              | `undefined` | No        | This class name will be applied to the child element when the section is `closed`.                                                                                                                      |
| openStyle   | `React.CSSProperties` | `undefined` | No        | These styles will be applied to the child element when the section is `open`.                                                                                                                           |
| closedStyle | `React.CSSProperties` | `undefined` | No        | These styles will be applied to the child element when the section is `closed`.                                                                                                                         |
| children    | `React.ReactElement`  | `undefined` | Yes       | The child is cloned by this component and has aria attributes injected into its props as well as keyboard events for opening the section with `space` and `enter` keys and navigating between sections. |

### `<Panel>`

This component clones any React element and turns it into a accordion section panel. It must be
a child of [`<Section>`](#section).

#### Props

| Prop        | Type                  | Default     | Required? | Description                                                                                                                                                     |
| ----------- | --------------------- | ----------- | --------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| openClass   | `string`              | `undefined` | No        | This class name will be applied to the child element when the section is `open`.                                                                                |
| closedClass | `string`              | `undefined` | No        | This class name will be applied to the child element when the section is `closed`.                                                                              |
| openStyle   | `React.CSSProperties` | `undefined` | No        | These styles will be applied to the child element when the section is `open`.                                                                                   |
| closedStyle | `React.CSSProperties` | `undefined` | No        | These styles will be applied to the child element when the section is `closed`.                                                                                 |
| children    | `React.ReactElement`  | `undefined` | Yes       | The child is cloned by this component and has aria attributes injected into its props as well as keyboard events for closing the section with the `escape` key. |

### `<Close>`

This is a convenience component that clones any React element and adds an onClick handler to close its parent panel. It
must be a child of [`<Section>`](#section).

#### Props

| Prop     | Type                 | Default     | Required? | Description                                                                                                                                                                    |
| -------- | -------------------- | ----------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| children | `React.ReactElement` | `undefined` | Yes       | The child is cloned by this component and has aria attributes injected into its props as keyboard events to ensure it acts like a button even if it isn't a native `<button>`. |

### `useAccordion()`

This hook returns the value of the accordion's [AccordionContext object](#accordioncontextvalue). This hook
must be within a child of [`<Accordion>`](#accordion).

### `AccordionContextValue`

typescript jsx interface AccordionContextValue { // DOM references to the accordion sections sections: (HTMLElement | undefined)[] // Registers a new accordion section registerSection: (index: number, trigger: HTMLElement) => () => void // The indexes of the open sections opened: number[] // Opens a section open: (section: number | undefined) => void // Closes a section close: (section: number | undefined) => void // Returns true if a section is open isOpen: (section: number | undefined) => boolean // Does the accordion allow all of its sections to be closed? allowAllClosed: boolean }

### `useSection()`

This hook returns the value of the accordion sections's [SectionContextValue object](#sectioncontextvalue). This hook
must be within a child of [`<Section>`](#section).

### `SectionContextValue`

typescript jsx interface SectionContextValue { // Is this section open? isOpen: boolean // Opens this section if not disabled open: () => void // Closes this section if possible close: () => void // Toggles the visible state of this section if possible toggle: () => void // The id of this section id?: string // The index of this section index: number // Is the section disabled? disabled: boolean // The DOM reference to the section'striggerRef: React.MutableRefObject} ```

useControls()

This hook returns the accordion sections's open, close, and toggle functions. This hook must be within a child of <Section>.

useDisabled()

This hook returns the accordion sections's disabled value. This hook must be within a child of <Section>.

useIsOpen()

This hook returns the accordion sections's isOpen value. This hook must be within a child of <Section>.

LICENSE

MIT

    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文