@accessible/collapse 中文文档教程
This package has moved to @accessible/disclosure
<Collapse>
npm i @accessible/collapse
React 的可访问且通用的可折叠组件
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
styleobjects, anything! - Portal-friendly The collapse target will render into React portals of your choice when configured to do so.
- a11y/aria-compliant This component works with screen readers out of the box and manages focus for you.
Quick Start
```jsx 和谐 import {Collapse, Target, Trigger, Close}
从'@accessible/collapse' const Component = () => ( <折叠> <触发器>
<Target>
<div className="my-collapse">
<Close>
<button>Close me</button>
</Close>
</div>
</Target>
)
## API
### Components
| Component | Description |
| ------------------------- | ---------------------------------------------------------------------------------------------------------------- |
| [`<Collapse>`](#collapse) | This component creates the context for your collapse target and trigger and contains some configuration options. |
| [`<Target>`](#target) | This component wraps any React element and turns it into a collapse target. |
| [`<Trigger>`](#trigger) | This component wraps any React element and turns it into a collapse trigger. |
| [`<Close>`](#close) | This is a convenience component that wraps any React element and adds an onClick handler to close the collapse. | |
### Hooks
| Hook | Description |
| ------------------------------- | ---------------------------------------------------------------------------------------------------- |
| [`useCollapse()`](#usecollapse) | This hook provides the value of the collapse's [CollapseContextValue object](#collapsecontextvalue). |
| [`useControls()`](#usecontrols) | This hook provides access to the collapse's `open`, `close`, and `toggle` functions. |
| [`useIsOpen()`](#useisopen) | This hook provides access to the collapse's `isOpen` value. |
### `<Collapse>`
This component creates the context for your collapse target and trigger and contains some
configuration options.
#### Props
| Prop | Type | Default | Required? | Description |
| ----------- | ------------------------------------------------------------------------------------------------------------------------------------ | ----------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| defaultOpen | `boolean` | `false` | No | This sets the default open state of the collapse. By default the collapse is closed. |
| open | `boolean` | `undefined` | No | You can control the open/closed state of the collapse with this prop. When it isn't undefined, this value will take precedence over any calls to `open()`, `close()`, or `toggle()`. |
| onChange | `(open: boolean) => void` | `undefined` | No | This callback is invoked any time the `open` state of the collapse changes. |
| id | `string` | `undefined` | No | By default this component creates a unique id for you, as it is required for certain aria attributes. Supplying an id here overrides the auto id feature. |
| children | <code>React.ReactNode | React.ReactNode[] | JSX.Element | ((context: CollapseContextValue) => React.ReactNode)</code> | `undefined` | No | Your collapse contents and any other children. |
### `<Target>`
This component wraps any React element and turns it into a collapse target.
#### Props
| Prop | Type | Default | Required? | Description |
| ------------- | ----------------------------------- | ------------------ | --------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| portal | <code>boolean | string </code> | `false` | No | When `true` this will render the collapse into a React portal with the id `#portals`. You can render it into any portal by providing its query selector here, e.g. `#foobar`, `[data-portal=true]`, or `.foobar`. |
| closeOnEscape | `boolean` | `true` | No | By default the collapse will close when the `Escape` key is pressed. You can turn this off by providing `false` here. |
| closedClass | `string` | `undefined` | No | This class name will be applied to the child element when the collapse is `closed`. |
| openClass | `string` | `"collapse--open"` | No | This class name will be applied to the child element when the collapse is `open`. |
| closedStyle | `React.CSSProperties` | `undefined` | No | These styles will be applied to the child element when the collapse is `closed` in addition to the default styles that set the target's visibility. |
| openStyle | `React.CSSProperties` | `undefined` | No | These styles name will be applied to the child element when the collapse is `open` in addition to the default styles that set the target's visibility. |
| children | `React.ReactElement` | `undefined` | Yes | The child is cloned by this component and has aria attributes injected into its props as well as the events defined above. |
#### Example
jsx和谐 <目标>
Alert
//
// Alert
//
### `<Trigger>`
This component wraps any React element and adds an `onClick` handler which toggles the open state
of the collapse target.
#### Props
| Prop | Type | Default | Required? | Description |
| ----------- | --------------------- | ----------- | --------- | -------------------------------------------------------------------------------------------------------------------------- |
| closedClass | `string` | `undefined` | No | This class name will be applied to the child element when the collapse is `closed`. |
| openClass | `string` | `undefined` | No | This class name will be applied to the child element when the collapse is `open`. |
| closedStyle | `React.CSSProperties` | `undefined` | No | These styles will be applied to the child element when the collapse is `closed`. |
| openStyle | `React.CSSProperties` | `undefined` | No | These styles name will be applied to the child element when the collapse is `open`. |
| children | `React.ReactElement` | `undefined` | Yes | The child is cloned by this component and has aria attributes injected into its props as well as the events defined above. |
jsx和谐 <触发=“点击”>
//
### `<Close>`
This is a convenience component that wraps any React element and adds an onClick handler which closes the collapse.
#### 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 well as the events defined above. |
jsx和谐 <关闭>
//
### `useCollapse()`
This hook provides the value of the collapse's [CollapseContextValue object](#collapsecontextvalue)
#### Example
jsx和谐 const 组件 = () => { const {open, close, toggle, isOpen} = useCollapse() return }
### `CollapseContextValue`
打字稿 接口 CollapseContextValue { isOpen：布尔值 打开：（）=> 空白 关闭：（）=> 空白 切换：（）=>； 空白 编号：字符串 }
### `useControls()`
This hook provides access to the collapse's `open`, `close`, and `toggle` functions
#### Example
jsx 和谐 const 组件 = () => { const {打开、关闭、切换} = useControls() 返回 （ <目标>
### `useIsOpen()`
This hook provides access to the collapse's `isOpen` value
#### Example
jsx和谐 const 组件 = () => { 常量 isOpen = useIsOpen() 返回 （ <目标>
Am I open? {isOpen ? 'Yes' : 'No'}
)
}
```
LICENSE
麻省理工学院
更多
你可能也喜欢
- 2chhk-to-telegram-images-bot 中文文档教程
- 3dworld 中文文档教程
- @0xsequence/collectible-lists 中文文档教程
- @128keaton/ts-serializer 中文文档教程
- @2600hz/sds-core 中文文档教程
- @36node/http-status 中文文档教程
- @8pattern/jmiddleware 中文文档教程
- @abcnews/aunty-helper 中文文档教程
- @abdulkabir/lotide 中文文档教程
- @abstractapi/javascript-exchange-rates 中文文档教程
