rc-collapse

2020-01-15

rc-collapse

rc-collapse ui component for react

rc-collapse


rc-collapse ui component for react

NPM versionbuild statusTest coveragenpm downloadDependenciesDevDependencies

Development

npm install
npm start

Example

http://localhost:8000/examples/

online example: http://react-component.github.io/collapse/

Features

  • support ie8,ie8+,chrome,firefox,safari

Install

rc-collapse

Usage

var Collapse = require('rc-collapse');
var Panel = Collapse.Panel;
var React = require('react');
var ReactDOM = require('react-dom');
require('rc-collapse/assets/index.css');

var collapse = (
  <Collapse accordion={true}>
    <Panel header="hello" headerClass="my-header-class">this is panel content</Panel>
    <Panel header="title2">this is panel content2 or other</Panel>
  </Collapse>
);
ReactDOM.render(collapse, container);

API

Collapse

props:

nametypedefaultdescription
activeKeyStringArrayThe first panel key
classNameString or objectcustom className to apply
defaultActiveKeyStringArraynull
destroyInactivePanelBooleanfalseIf destroy the panel which not active, default false.
accordionBooleanfalseaccordion mode, default is null, is collapse mode
onChangeFunction(key)noopcalled when collapse Panel is changed
expandIcon(props: PanelProps) => ReactNodespecific the custom expand icon.

If accordionis null or false, every panel can open. Opening another panel will not close any of the other panels. activeKeyshould be an string, if passing an array (the first item in the array will be used).

If accordionis true, only one panel can be open. Opening another panel will cause the previously opened panel to close. activeKeyshould be an string, if passing an array (the first item in the array will be used).

Collapse.Panel

props

nametypedefaultdescription
headerString or nodeheader content of Panel
headerClassString' 'custom className to apply to header
showArrowbooleantrueshow arrow beside header
classNameString or objectcustom className to apply
styleobjectcustom style
openAnimationobjectset the animation of open behavior, more
disabledbooleanfalsewhether the panel is collapsible
forceRenderbooleanfalseforced render of content in panel, not lazy render after clicking on header
extraStringReactNode

key

If keyis not provided, the panel's index will be used instead.

Test Case

npm test
npm run chrome-test

Coverage

npm run coverage

open coverage/ dir

License

rc-collapse is released under the MIT license.

以上是 rc-collapse 的使用教程帮助文档。


上一篇:rc-drawer
下一篇:rc-checkbox
相关教程
关注微信

扫码加入 JavaScript 社区

相关文章

首次访问,需要验证
微信扫码,关注即可
(仅需验证一次)

欢迎加入 JavaScript 社区

号内回复关键字:

回到顶部