rc-collapse

rc-collapse ui component for react

rc-collapse

rc-collapse ui component for react

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

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
activeKeyString|ArrayThe first panel keycurrent active Panel key
classNameString or objectcustom className to apply
defaultActiveKeyString|Arraynulldefault active key
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](https://github.com/react-component/animate#animation-format)
disabledbooleanfalsewhether the panel is collapsible
forceRenderbooleanfalseforced render of content in panel, not lazy render after clicking on header
extraString | ReactNodeContent to render in the right of the panel header

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.

HomePage

http://github.com/react-component/collapse

Repository

https@github.com:react-component/collapse


上一篇:rc-drawer
下一篇:rc-checkbox

相关推荐

官方社区

扫码加入 JavaScript 社区