bee-panel
Panel ui component for react
Last updated 5 months ago by tinper-bot .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install bee-panel 
SYNC missed versions from official npm registry.

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

Current Tags

  • 2.0.2                                ...           latest (5 months ago)

27 Versions

  • 2.0.2                                ...           5 months ago
  • 2.0.1                                ...           2 years ago
  • 2.0.0                                ...           2 years ago
  • 1.2.13                                ...           2 years ago
  • 1.2.12                                ...           2 years ago
  • 1.2.11                                ...           2 years ago
  • 1.2.10                                ...           2 years ago
  • 1.0.0                                ...           3 years ago
  • 1.2.9                                ...           3 years ago
  • 0.2.9                                ...           3 years ago
  • 0.2.8                                ...           3 years ago
  • 0.2.7                                ...           3 years ago
  • 0.2.6                                ...           3 years ago
  • 0.2.5                                ...           3 years ago
  • 0.2.4                                ...           4 years ago
  • 0.2.3                                ...           4 years ago
  • 0.2.2                                ...           4 years ago
  • 0.2.1                                ...           4 years ago
  • 0.2.0                                ...           4 years ago
  • 0.0.8                                ...           4 years ago
  • 0.0.7                                ...           4 years ago
  • 0.0.6                                ...           4 years ago
  • 0.0.5                                ...           4 years ago
  • 0.0.4                                ...           4 years ago
  • 0.0.3                                ...           4 years ago
  • 0.0.2                                ...           4 years ago
  • 0.0.1                                ...           4 years ago

Copyright 2014 - 2016 © taobao.org |