react-component-panel

Screen Shot

Install

$ npm i react-component-panel --save

Import

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

TODO

• [x] Panel
• [x] CollapsiblePanel

API

CollapsiblePanel

Extends PureComponent

CollapsiblePanel

Parameters

• props

Examples

class CollapsiblePanelDemo extends Component {
render() {
	return (
		<CollapsiblePanel title="Collapsible Panel Demo">
			<p>I am collapsible panel !</p>
		</CollapsiblePanel>
	);
}
}

propTypes

...Panel.propTypes

Properties

• contentStyle Object?
• contentClassName String?
• expand Boolean? [ true ] - 是否展开
• renderExpand Function? [ expand=> {return expand ? "收起" : "展开";} ] - 展开/收起的UI样式
• onChange Function? 当expand发生变化时调用

Panel

Extends PureComponent

Panel

Examples

Simple Panel Demo

class PanelDemo extends Component{
render(){
	return (
		<Panel title="Panel Title" renderRight={()=>{
			return (
				<button type="button" onClick={()=>{
					alert('pressed');
				}}>press me</button>
			);
		}}>
			<p>panel content</p>
		</Panel>
	);
}
}

propTypes

Properties

• title (String | ReactNode | HtmlElement) 标题
• renderRight Function? [ ()=>null ] - 右侧按钮
• style Object? 样式
• className String? class style