panel component for tinper-bee
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
build publish 1.2.13 Nov 13, 2018
demo publish 1.2.13 Nov 13, 2018
dist publish 1.2.13 Nov 13, 2018
docs docs Sep 4, 2018
src publish 1.2.13 Nov 13, 2018
test add test Dec 13, 2016
.gitignore dist Nov 16, 2017
.npmignore down demo Dec 20, 2016
.travis.yml add test Dec 13, 2016
CHANGELOG.md publish 1.2.14 Feb 16, 2019
HISTORY.md
README.md 增加copyable属性 & 增加示例 Aug 28, 2018
index.html 跟新prop-types引用 Sep 29, 2017
package.json publish 1.2.14 Feb 16, 2019

README.md

bee-panel

npm version Build Status Coverage Status

Browser Support

IE Chrome Firefox Opera Safari
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