@accessible/tabs 中文文档教程

Question

---

@accessible/tabs

？？？ 用于 React 的可访问且通用的选项卡组件，具有 w3.org 的 WAI-ARIA 选项卡示例中教授的键盘导航和标签功能

npm i @accessible/tabs

---

React 的可访问且通用的选项卡组件，仿照 此处教授的 WAI-ARIA 示例。

Quick Start

查看 CodeSandbox 上的示例

```jsx 和谐 import {Tabs, TabList, Tab, Panel}

从'@accessible/tabs' const Component = () => (<表格列表>

AbstractReferences

<Panel>
  <div>Abstract body</div>
</Panel>
<Panel>
  <div>References body</div>
</Panel>

)

## API

### Components

| Component               | Description                                                                                                                                                                                                                                                                               |
| ----------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| [`<Tabs>`](#tabs)       | This component creates the context for your tabs and contains some configuration options. You'll need to add [`<Tab>`](#tab) and [`<Panel>`](#panel) as children in order to actually create tabs.                                                                                        |
| [`<TabList>`](#tablist) | The component adds `role='tablist'` to its child component.                                                                                                                                                                                                                               |
| [`<Tab>`](#tab)         | This component clones any React element and turns it into a tab that controls the visible state of a [`<Panel>`](#panel). It must be a child of [`<Tabs>`](#tabs) and all tabs must be adjacent in the tree. Each tab has a corresponding [`<Panel>`](#panel) that shares the same index. |
| [`<Panel>`](#panel)     | This component clones its child and turns it into a panel that corresponds to a [`<Tab>`](#tab) with the same index. All panels must be adjacent in the tree unless an `index` prop is defined.                                                                                           |

### Hooks

| Hook                              | Description                                                                 |
| --------------------------------- | --------------------------------------------------------------------------- |
| [`useTabs()`](#usetabs)           | This hook returns the value of the [TabsContext object](#tabscontextvalue). |
| [`useTab()`](#usetabindex-number) | This hook returns the value of the [TabContext object](#tabcontextvalue).   |

### &lt;Tabs&gt;

This component creates the context for your tabs and contains some configuration options. You'll need to add
[`<Tab>`](#tab) and [`<Panel>`](#panel) as children in order to actually create tabs.

#### Props

| Prop             | Type                       | Default     | Required? | Description                                                                                                                                                                                                                             |
| ---------------- | -------------------------- | ----------- | --------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| defaultActive    | `number`                   | `0`         | No        | The [`<Tab>`](#tab) index you want active by default.                                                                                                                                                                                   |
| active           | `number`                   | `undefined` | No        | Makes this a controlled component where the `activate` control has no effect. The tab index defined here is always the one that is active.                                                                                              |
| manualActivation | `boolean`                  | `false`     | No        | By default this component opens tabs automatically when using keyboard navigation to switch between tabs. By setting this to `true`, the user will have to use the `space` or `enter` key to activate the tab after the tab is focused. |
| preventScroll    | `boolean`                  | `false`     | No        | When `true` this will prevent your browser from scrolling the document to bring the newly-focused tab into view.                                                                                                                        |
| onChange         | `(active: number) => void` | `undefined` | No        | Called each time the active tab changes. It provides the active tab `index` as its only argument.                                                                                                                                       |
| children         | `React.ReactNode[]`        | `undefined` | Yes       | You can define any children here with some caveats listed elsewhere.                                                                                                                                                                    |

### &lt;TabList&gt;

#### Props

| Prop     | Type                 | Default     | Required? | Description                                                                      |
| -------- | -------------------- | ----------- | --------- | -------------------------------------------------------------------------------- |
| children | `React.ReactElement` | `undefined` | Yes       | The child is cloned by this component and given a property for `role='tablist'`. |

### &lt;Tab&gt;

This component clones any React element and turns it into a tab that controls the visible state of a [`<Panel>`](#panel). It must be a child of [`<Tabs>`](#tabs) and all
tabs must be adjacent in the tree. Each tab has a corresponding [`<Panel>`](#panel) that shares the same index.

jsx和谐 // 是的 常量 MyTabs = () => ( <制表符> <表格列表> {/* 索引：0 /} <标签>

{/ index: 1 /}

{/ index: 0 /}

{/ index: 1 */}

)

// 绝对不 常量 MyTabs = () => ( <制表符> <表格列表> {/* 这里的 Tab 组件在树中是不相邻的。 */}

)

#### Props

| Prop          | Type                             | Default     | Required? | Description                                                                                                                                                                                                                                                   |
| ------------- | -------------------------------- | ----------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| activeClass   | `string`                         | `undefined` | No        | Adds this class to the child component when the tab is in an active state.                                                                                                                                                                                    |
| inactiveClass | `string`                         | `undefined` | No        | Adds this class to the child component when the tab is in an inactive state.                                                                                                                                                                                  |
| activeStyle   | `React.CSSProperties`            | `undefined` | No        | Adds these styles to the child component when the tab is in an active state.                                                                                                                                                                                  |
| inactiveStyle | `React.CSSProperties`            | `undefined` | No        | Adds these styles to the child component when the tab is in an inactive state.                                                                                                                                                                                |
| id            | `string`                         | `undefined` | No        | Defining an ID here overrides the auto id generated for aria attributes.                                                                                                                                                                                      |
| disabled      | `boolean`                        | `false`     | No        | Setting this to `true` will prevent the tab from activating if it isn't already active.                                                                                                                                                                       |
| index         | `number`                         | `undefined` | No        | Setting an index here overrides the default index created when this component mounts. Indexes are used to match tabs to their corresponding [`<Panel>`](#panel). I would recommend not setting this property and letting the library handle it automatically. |
| onDelete      | `(event: KeyboardEvent) => void` | `undefined` | No        | This callback will fire if a user presses the `Delete` key on their keyboard when this tab (not the panel) is focused.                                                                                                                                        |
| children      | `React.ReactElement`             | `undefined` | Yes       | The child is cloned by this component and has aria attributes injected into its props as well as keyboard event handlers for navigating between tabs.                                                                                                         |

### &lt;Panel&gt;

This component clones its child and turns it into a panel that corresponds to a [`<Tab>`](#tab) with the same
index. All panels must be adjacent in the tree unless an `index` prop is defined. For example:

<制表符> <表格列表> [0] <选项卡> [1] <选项卡>

[0] <面板> [1] <面板>

#### Props

| Prop          | Type                  | Default     | Required? | Description                                                                                                                                                                                                                                                 |
| ------------- | --------------------- | ----------- | --------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| activeClass   | `string`              | `undefined` | No        | Adds this class to the child component when the panel's [`<Tab>`](#tab) is in an active state.                                                                                                                                                              |
| inactiveClass | `string`              | `undefined` | No        | Adds this class to the child component when the panel's [`<Tab>`](#tab) is in an inactive state.                                                                                                                                                            |
| activeStyle   | `React.CSSProperties` | `undefined` | No        | Adds these styles to the child component when the panel's [`<Tab>`](#tab) is in an active state.                                                                                                                                                            |
| inactiveStyle | `React.CSSProperties` | `undefined` | No        | Adds these styles to the child component when the panel's [`<Tab>`](#tab) is in an inactive state.                                                                                                                                                          |
| index         | `number`              | `undefined` | No        | Setting an index here overrides the default index created when this component mounts. Indexes are used to match panels to their corresponding [`<Tab>`](#tab). I would recommend not setting this property and letting the library handle it automatically. |
| children      | `React.ReactElement`  | `undefined` | Yes       | The child is cloned by this component and has aria attributes injected into its props and will have its visible state controlled by the [`<Tab>`](#tab) component with the same index.                                                                      |

### useTab(index: number)

Returns [`TabContext object`](#tabcontextvalue) for the [`<Tab>`](#tab) corresponding to the provided `index`.
It must be used within a child of [`<Tabs>`](#tabs).

### TabContextValue

打字稿 接口 TabContextValue { // 用于 aria 属性的 ID 编号？：字符串 // 选项卡底层元素的引用 tabRef?: HTMLElement //标签的索引 索引号 // 激活此选项卡，除非 disabled 为 true 激活：() => 空白 // 此选项卡是否处于活动状态？ isActive：布尔值 // 这个选项卡是否被禁用？ 禁用：布尔值 }

### useTabs()

This hook returns the value of the [TabsContext object](#tabscontextvalue). This hook must be within a child of [`<Tabs>`](#tabs).

### TabsContextValue

打字稿 接口 TabsContextValue { // 已注册的标签数组 选项卡：TabState[] // 注册一个新标签 注册标签: ( 索引号， 元素：HTML元素， 编号？：字符串， 禁用？：布尔值 ) => () => 空白 // 当前活动的选项卡 活动：数量 | 不明确的 // 激活位于 index 的选项卡 激活：（索引：数字 | 未定义）=> 空白 // 是否配置了手动激活？ 手动激活：布尔值 }

输入 TabState = | { 元素?: HTMLElement 编号？：字符串 禁用？：布尔值 } | 不明确的 ```

LICENSE

麻省理工学院