bee-panel

Browser Support

IE 9+ ✔	Chrome 31.0+ ✔	Firefox 31.0+ ✔	Opera 30.0+ ✔	Safari 7.0+ ✔

react bee-panel component for tinper-bee

展示板组件

使用方法

import {Panel} from 'bee-panel';

const title = (
  <h3>Panel title</h3>
)

ReactDOM.render(
    <Panel header={title} footer='Panel footer'>
      Panel content
    </Panel>
        , document.getElementById('target'));

import { Panel, PanelGroup } from 'bee-panel';

class Demo extends React.Component {
  constructor(...args) {
    super(...args);
    this.state = {
      activeKey: '1'
    };
    this.handleSelect = this.handleSelect.bind(this);
  }
  handleSelect(activeKey) {
    this.setState({ activeKey });
  }

  render() {
    return (
        <PanelGroup activeKey={this.state.activeKey} onSelect={this.handleSelect} accordion>
          <Panel header="Panel 1" eventKey="1">Panel 1 content</Panel>
          <Panel header="Panel 2" eventKey="2">Panel 2 content</Panel>
        </PanelGroup>
    );
  }
}

样式引入

• 可以使用link引入build目录下Panel.css

<link rel="stylesheet" href="./node_modules/bee-panel/build/Panel.css">

• 可以在js中import样式

import "./node_modules/bee-panel/src/Panel.scss"
//或是
import "./node_modules/bee-panel/build/Panel.css"

API

Panel

参数	说明	类型	默认值
copyable	是否可复制内容	boolean	-
collapsible	是否添加折叠	boolean	-
onSelect	有折叠效果时选中的效果	function	-
defaultExpanded	默认是否打开	boolean	false
expanded	折叠是否展开	object	-
onEnter	开始显示时的钩子函数	function	-
onEntering	显示时的钩子函数	function	-
onEntered	显示完成后的钩子函数	function	-
onExit	隐藏开始时的钩子函数	function	-
onExiting	隐藏进行时的钩子函数	function	-
onExited	隐藏结束时的钩子函数	function	-
header	头部	node	-
headerStyle	传递给头部的style	object	-
footer	尾部	node	-
footerStyle	传递给尾部的style	object	-
eventKey	当多个panel存在时,每个panel的标记	any	-
colors	panel的颜色	primary\accent\success\info\warning\danger\default\bordered	default

PanelGroup

参数	说明	类型	默认值
accordion	是否是手风琴效果	boolean	false
activeKey	当前展开的项	any	-
defaultActiveKey	默认展开的项	any	-
onSelect	选中的钩子函数	function	-
className	传入的class	any	-
style	传入的style	pbject	-

开发调试

$ npm install -g bee-tools
$ git clone https://github.com/tinper-bee/bee-panel
$ cd bee-panel
$ npm install
$ npm run dev