神刀安全网

react-tabtab – an api based react tab

react-tabtab

react-tabtab is an api based react tab.

Demo

Features

react-tabtab - an api based react tab

  • Add tab
  • Delete tab
  • Drag and Drop tab

Usage

Now only available the commonjs module.

Install it with npm.

npm install react-tabtab --save

Simple example:

var Tabs = require('react-tabtab').Tabs; var Panel = require('react-tabtab').Panel;  var App = React.createClass({   render: function() {     return (       <Tabs>         <Panel title="hi">           Hi!         </Panel>         <Panel title="yo" lazy={true}>           yo yo         </Panel>       </Tabs>     )   } })  React.render(<App/>, document.getElementById('container'));

Advanced Usage

Add tab

react-tabtab - an api based react tab

Trigger event on the add tab. Check theexample code.

props

  • addBackTab (boolean)
    • true : show add tab
    • false: hide add tab
  • handleAddBackClick (function): trigger the event when user click the tab.

Delete tab

react-tabtab - an api based react tab

Trigger event on the delete button. Check theexample code.

props

  • tabDeleteButton (boolean)
    • true : show delete button
    • false: hide delete button
  • handleTabDeleteButton (function): trigger the event when user click delete button.

Drag and Drop:

react-tabtab - an api based react tab

The drag and drop feature is based onreact-dnd. You can drag the tab to change the sequence.

Because react-dnd can’t have two HTML5 backends at the same time (this issue), react-tabtab doesn’t wrap the HTML5 in the library.

React-tabtab only wrap the DragSource and DropTarget on the tab, so if you want to use drag and drop, you need to wrap the DragDropContext on your top compoennt. (in case in your project you already have another html5 backend)

In this way, the drag and drop feature in react-tabtab can fit with other dnd library.

Check out theexample code and thetop component.

props

  • draggable (boolean)
    • true : tab can drag
    • false: tab can’t drag
  • beginDrag (function): do something when start to drag
  • setMoveData (function)
    • return value {dragIndex, hoverIndex}
      • dragIndex: current drag tab index
      • hoverIndex: current hove tab index

Advanced example

Check theadvanced.jsx.

This example show how to add tab, delete tab, and drag and drop.

All API

property type default required description
activeKey int 0 no set the active key of the tab
addBackTab boolean false no whether show a add tab at the end
handleAddBackClick function n/a no callback function when user click the add tab
deleteButton boolean false no whether show a delete button at each panel
handleDeleteButton function false no callback function when user click the delete button
handleTabClick function n/a no return the key which user clicks
tabDeleteButton boolean false no whether each tab show delete button
handleTabDeleteButton function n/a no callback function when click tabDeleteButton
style string tabtab__default__ no the class prefix
deleteAllClassname string n/a no
draggable boolean false no whether tab can drag and drop
beginDrag function n/a no callback function when start drag
setMoveData function n/a no callback function to get current index and hover index

Style

now only use css as style.

if you want to use the same style as teh demo , just clone the dist/tab.css and inlcude in you project.

License

MIT@ctxhou

转载本站任何文章请注明:转载至神刀安全网,谢谢神刀安全网 » react-tabtab – an api based react tab

分享到:更多 ()

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址