react-component-panel

Screen Shot

Install

$ npm i react-component-panel --save

Import

import{Panel,CollapsiblePanel}from'react-component-panel'

TODO

• Panel
• CollapsiblePanel

API

CollapsiblePanel

Extends PureComponent

CollapsiblePanel

Parameters

• props

Examples

classCollapsiblePanelDemoextendsComponent{render(){return(<CollapsiblePaneltitle="Collapsible Panel Demo"><p>I am collapsible panel !</p></CollapsiblePanel>);}}

propTypes

...Panel.propTypes

Properties

• contentStyleObject?
• contentClassNameString?
• expandBoolean? [ true ] - 是否展开
• renderExpandFunction? [ expand=> {return expand ? "收起" : "展开";} ] - 展开/收起的UI样式
• onChangeFunction? 当expand发生变化时调用

Panel

Extends PureComponent

Panel

Examples

Simple Panel Demo

classPanelDemoextendsComponent{render(){return(<Paneltitle="Panel Title"renderRight={()=>{return(<buttontype="button"onClick={()=>{alert('pressed');}}>press me</button>);}}><p>panel content</p></Panel>);}}

propTypes

Properties

• title(String | ReactNode | HtmlElement) 标题
• renderRightFunction? [ ()=>null ] - 右侧按钮
• styleObject? 样式
• classNameString? class style