zent

Version:

一套前端设计语言和基于React的实现

58 lines (42 loc) • 3.32 kB

Markdown

--- title: Collapse path: component/collapse group: Data Display scatter: true --- ## Collapse A panel that supports folding and expanding ### Suggestion - Group and hide more information to improve page reading efficiency and aesthetics; - When multiple groups of information structure is unified, such as multiple groups of titles + multiple lines of text/graphic structure; ### Note - The folding panel is not applicable when the number of information groups is less than 2 or the information structure is only one level. - Folding panels nested inside panels is not allowed ### Demos    ### API #### Collpase | Property | Description | Type | Required | Default | Alternative | | --------------------- | ----------------------------------------- | --------- | --------- | ----------- | ----------- | --- | | onChange | Callback when active panel changes | `func` | Yes | | | | activeKey | Active panel id | `string | string[]`(only when using Accodion mode the type is `string`，otherwise the type is `string[]`) | No | | | | accordion | Accodion mode, one active panel at a time | `bool` | No | `false` | `true` | | bordered | Bordered | `bool` | No | `true` | `false` | | panelTitleBackground | Panel background | `string` | No | `'default'` | `'none'` | | showContentBackground | Show Panel Content Background | `boolean` | No | `'false'` | `'true'` | | className | Custom class names | `string` | No | | | #### Collpase.Panel | Property | Description | Type | Required | Default | Alternative | | --------- | ------------------------------------------------------------------------- | ----------- | -------- | ------- | ----------- | | key | Panel id, [React Keys](https://reactjs.org/docs/lists-and-keys.html#keys) | `ReactText` | Yes | | | | title | Panel title | `node` | Yes | | | | extra | Title custom content | `node` | No | | | | disabled | Disable panel | `bool` | No | `false` | `true` | | showArrow | Show arrow in the title | `bool` | No | `true` | `false` | | style | Custom styles | `object` | No | | | | className | Custom class names | `string` | No | | | #### The following functions is obsolete in the new design system and is only used as a reference for the old version