react-panels

Demo/examples   Features   Playground   Install   Usage

A multipurpose tabbed panel component with many features. Using React v0.13.1 with addons.

NPM

Features

  • No dependencies, single JS file with React inline styles.
    • Written to be browser first from the start so our browser build is a simple javascript file instead of a webpack/browserify bundle like in other react components. Nevertheless, this doesn't mean that react-panels is not suited for other kind of projects since a CommonJS build is also provided.
  • Support for themes and skins.
    • Available themes: chemical demo, flexbox demo, flexbox2 No demo yet.
    • Wanna share one of your own? Open an issue or make a pull request.
  • Fixed or as a draggable floating panel.
  • Multi-content components and toggleable footer and toolbars in tabs.
  • Auto-collapsible tab header buttons when don't fit in a single row.
  • Custom panel buttons.
  • Easily extensible by mixins. Not documented yet
  • Animations demo
  • Drag&drop tabs demo Warning: In development, subject to change.

Roadmap

  • Optional className in props to allow CSS styling.
  • Restore collapsed tab headers when there's available space. (not needed in flex based themes)
  • Allow prebuilt styles to increase performance.
  • More...

Install

Using bower

bower install react-panels

Include bower_components/react-panels/dist/react-panels[.min].js after react-with-addons[.min].js

Using npm

npm install react-panels
var ReactPanels = require('react-panels')
// or
var ReactPanels = require('react-panels/addons')

Usage

Example usage:

var Panel = ReactPanels.Panel;
var Tab = ReactPanels.Tab;
var Toolbar = ReactPanels.Toolbar;
var Content = ReactPanels.Content;
var Footer = ReactPanels.Footer;

var MyPanel = React.createClass({
  render: function () {
    return (
      <Panel theme="chemical">
        <Tab title="One" icon="fa fa-plane">
          <Toolbar>Toolbar content of One</Toolbar>
          <Content>Content of One</Content>
          <Footer>Footer content of One</Footer>
        </Tab>
        <Tab title="Two" icon="fa fa-fire">
          <Content>Content of Two</Content>
        </Tab>
      </Panel>
    );
  }
});

Documentation for react-panels v2 is not available yet but you can take a look at the working examples for easy usages of almost all its features.

Contributing

Feel free to fork this repo and make a PR. Any help is welcome, even fixing typos. I created react-panels to use it myself and I'm mostly adding new features or bug fixes on a need basis. So, if you need something specific, you can add/fix it yourself or open a new issue and I'll provide feedback as soon as possible.

Thanks to

Compatibility

License

The MIT License (MIT)



react-panels

演示/示例 功能 游乐场 安装 用法

具有许多功能的多用途标签面板组件。使用反应 v0.13.1 与插件。

NPM

功能

  • 无依赖关系,具有React内联样式的单个JS文件。
    • 从头开始写入浏览器,所以我们的浏览器构建是一个简单的javascript文件,而不是像其他反应组件一样的 webpack / browserify 包。然而,这并不意味着由于还提供了一个CommonJS构建 ,因此反应面板不适用于其他类型的项目。
  • 支持主题和外观。
    • 可用的主题:化学 demo flexbox demo flexbox2 没有演示 。 想分享你自己的一个?打开问题或提出请求。
  • 固定或作为可拖动的浮动面板。
  • 选项卡中的多内容组件和可切换页脚和工具栏。
  • 当不适合单行时,自动折叠标签页按钮。
  • 自定义面板按钮。
  • mixins 轻松扩展。 尚未记录
  • 动画 演示
  • 拖放标签 demo 警告:在开发中,可能会更改。

路线图

  • 可选 className 在道具中以允许CSS样式。
  • 当有可用空间时,还原已折叠的标签页。 (基于flex的主题不需要)
  • 允许预置样式提高性能。
  • 更多…

安装

使用bower

bower install react-panels

与…之后加入 bower_components / react-panels / dist / react-panel [.min] .js [.min] .js

使用npm

npm install react-panels
var ReactPanels = require('react-panels')
// or
var ReactPanels = require('react-panels/addons')

用法

使用示例:

var Panel = ReactPanels.Panel;
var Tab = ReactPanels.Tab;
var Toolbar = ReactPanels.Toolbar;
var Content = ReactPanels.Content;
var Footer = ReactPanels.Footer;

var MyPanel = React.createClass({ render: function () { return ( <Panel theme="chemical"> <Tab title="One" icon="fa fa-plane"> <Toolbar>Toolbar content of One</Toolbar> <Content>Content of One</Content> <Footer>Footer content of One</Footer> </Tab> <Tab title="Two" icon="fa fa-fire"> <Content>Content of Two</Content> </Tab> </Panel> ); } });

反应面板v2 的文档尚不可用,但您可以查看工作实例,方便用户使用几乎所有功能。

贡献

随意分拣这个repo并做一个 PR 。欢迎任何帮助,甚至修复打字错误。我创建了反应面板以使用它,我主要是在需要的基础上添加新功能或错误修复。所以,如果你需要特定的东西,你可以自己添加/修复或打开一个新的问题,我会尽快提供反馈。

感谢

兼容性

许可证

麻省理工学院许可证(MIT)




相关问题推荐