Atom like draggable tab react component
Atom like draggable tab react component.
npm install --save react-draggable-tab
React v0.14 is supported from react-draggable-tab v0.4.0. For React v0.13.x, please use react-draggable-tab v0.3.3.
Tab
Tabis just a case class to check props.
props.childrenwill rendered into content area.
key: unique key in
TabList.
PropTypes.string.isRequired
beforeTitle: element to show in tab. eg icon.
PropTypes.element
title: string or element to show in tab.
PropTypes.oneOfType([PropTypes.string, PropTypes.element]).isRequired
afterTitle: element to show in tab. eg: notification badge
PropTypes.element
uncloseable: If
true, closeButton will not be appeared in tab.
PropTypes.bool(Default
false)
tabClassNames: classNames which will be added to rendered elements.
tab: base
lielement of tab (defult:
rdTab)
tabBefore: before element of
liwhich emulate
:Beforeselector (defult:
rdTabBefore)
tabAfter: after element of
liwhich emulate
:Afterselector (defult:
rdTabAfter)
tabTitle:
spanelement of tab title (defult:
rdTabTitle)
tabBeforeTitle:
spanelement of tab before title (defult:
tabBeforeTitle)
tabAfterTitle:
spanelement of tab after title (defult:
tabAfterTitle)
tabCloseIcon: base
spanelement of close icon (defult:
rdCloseIcon)
tabActive: selected tab's
li, before, after (defult:
rdTabActive)
tabHover: selected tab's
li, before, after (defult:
rdTabHover)
tabStyles: Inline styles which will be overwritten default and common-tabs inline styles.
tab: base
lielement of tab
tabBefore: before element of
liwhich emulate
:Beforeselector.
tabAfter: after element of
liwhich emulate
:Afterselector.
tabTitle:
spanelement of tab title
tabActive: selected tab's
li
tabBeforeActive: selected tab's
libefore
tabAfterActive: selected tab's
liafter
tabTitleActive: selected tab's title
tabOnHover: hovered tab's
li
tabBeforeOnHover: hovered tab's
libefore
tabAfterOnHover: hovered tab's
liafter
tabTitleOnHover: hovered tab's title
tabCloseIcon: base
spanelement of close icon
tabCloseIconOnHover: base
spanelement of close icon when hover
containerStyle: style object which will be apply to container of rendered tab.
hiddenContainerStyle: style object which will be apply to container of hidden tab.
All other props like
onXXhandler set to
Tabwill be passed to rendered element except
onClickYou can use any
onXXfor Supported events for tab element.
Tabs
Tabsis container for tab. it will render tabBar and content of selected element.
tabs: Array of
Tabelements.
PropTypes.arrayOf(PropTypes.element)
selectedTab: key for selectedTab.
PropTypes.stringdefault to first tab.
disableDrag: disables the ability to drag the tabs.
React.PropTypes.booldefault is false.
tabAddButton: element for add button.
PropTypes.element
keepSelectedTab: Prevent tab select on drag/move behind tab.
PropTypes.booldefault
false.
unclosable: Disable tab to close.
PropTypes.booldefault
false.
shouldTabClose(e, key): will be called before tab close event, return false if you want to stop tab close process, default
true;
shortCutKeys: Short cut key bindings as Mousetrap style.
close: key binding to close current tab (
onTabClosewill be called)
create: key binding to create tab (
onTabAddButtonClickwill be called)
moveRight: key binding to move right (
onTabSelectwill be called)
moveLeft: key binding to move left (
onTabSelectwill be called)
tabsClassNames: classNames which will be added to rendered elements.
tabWrapper: root wrapper
divelement (defult:
rdTabWrapper)
tabBar: base
ulelement of tab bar (defult:
rdTabBar)
tabBarAfter: after
spanelement of tab bar which emulate
:Afterselector (defult:
rdTabBarAfter)
tab: base
lielement of tab (defult:
rdTab)
tabBefore: before element of
liwhich emulate
:Beforeselector (defult:
rdTabBefore)
tabAfter: after element of
liwhich emulate
:Afterselector (defult:
rdTabAfter)
tabTitle:
spanelement of tab title (defult:
rdTabTitle)
tabBeforeTitle:
spanelement of tab before title (defult:
rdTabBeforeTitle)
tabBeforeTitle:
spanelement of tab after title (defult:
rdTabAfterTitle)
tabCloseIcon: base
spanelement of close icon (defult:
rdCloseIcon)
tabActive: selected tab's
li, before, after (defult:
rdTabActive)
tabsStyles: Inline styles which will be overwritten default inline styles.
tabWrapper: root wrapper
divelement
tabBar: base
ulelement of tab bar
tabBarAfter: after
spanelement of tab bar which emulate
:Afterselector
tab: base
lielement of tab
tabBefore: before element of
liwhich emulate
:Beforeselector.
tabAfter: after element of
liwhich emulate
:Afterselector.
tabTitle:
spanelement of tab title
tabActive: selected tab's
li
tabBeforeActive: selected tab's
libefore
tabAfterActive: selected tab's
liafter
tabTitleActive: selected tab's title
tabCloseIcon: base
spanelement of close icon
tabCloseIconOnHover: base
spanelement of close icon when hover
onTabSelect(e, key, currentTabs): Called when tab of key was selected.
currentTabsis array of tabs elements sorted with current order.
onTabClose(e, key, currentTabs): Called when tab of key was closed.
currentTabsis array of tabs elements sorted with current order.
onTabPositionChange(e, key, currentTabs): Called when tab of key was moved.
currentTabsis array of tabs elements sorted with current order.
onTabAddButtonClick(e, currentTabs): Called when
tab add buttonwas clicked.
currentTabsis array of tabs elements sorted with current order. Basically you will concat
currentTabswith new empty tab.
let newTabs = currentTabs.concat([newTab]);
~~*
onTabDoubleClick(e, key): Called when
titlewas double clicked.~~ Removed from v0.5.0
~~*
onTabMouseEnter(e, key): Called when mouse enter to
tab.~~ Removed from v0.5.0
~~*
onTabMouseLeave(e, key): Called when mouse leave from
tab.~~ Removed from v0.5.0
class App extends React.Component { constructor(props) { super(props); let icon = (); let fonticon = (); let badge = ();
this.state = { tabs:[ (<tab key="{'tab0'}" title="{'unclosable" tab unclosable="{true}"> <div> <h1>This tab cannot close</h1> </div> </tab>), (<tab key="{'tab1'}" title="{'1stTab'}" beforetitle="{icon}"> <div> <h1>This is tab1</h1> </div> </tab>), (<tab key="{'tab2'}" title="{'2ndTab" too long toooooooooooooooooo beforetitle="{fonticon}"> <div> <pre>Lorem ipsum dolor sit amet, consectetur adipisicing elit, </pre> </div> </tab>), (<tab key="{'tab3'}" title="{'Dynamic" tab aftertitle="{badge}"> <dynamictabcontent></dynamictabcontent> </tab>) ], badgeCount: 0 };
}
handleTabSelect(e, key, currentTabs) { console.log('handleTabSelect key:', key); this.setState({selectedTab: key, tabs: currentTabs}); }
handleTabClose(e, key, currentTabs) { console.log('tabClosed key:', key); this.setState({tabs: currentTabs}); }
handleTabPositionChange(e, key, currentTabs) { console.log('tabPositionChanged key:', key); this.setState({tabs: currentTabs}); }
handleTabAddButtonClick(e, currentTabs) { // key must be unique const key = 'newTab_' + Date.now(); let newTab = (
); let newTabs = currentTabs.concat([newTab]);New Empty Tab
this.setState({ tabs: newTabs, selectedTab: key });
}
render() {
return ( <tabs tabsclassnames="{tabsClassNames}" tabsstyles="{tabsStyles}" selectedtab="{this.state.selectedTab" this.state.selectedtab : ontabselect="{this.handleTabSelect.bind(this)}" ontabclose="{this.handleTabClose.bind(this)}" ontabaddbuttonclick="{this.handleTabAddButtonClick.bind(this)}" ontabpositionchange="{this.handleTabPositionChange.bind(this)}" tabs="{this.state.tabs}" shortcutkeys="{"></tabs> )
} };
See also example
npm install npm run start:example
npm test
See list
Tabsdo not care any change in
Tabcontent. content needs update by your application side. See
3rdTabin example.
flexstyle should be define in CSS for safari. See https://github.com/facebook/react/issues/2020
In application, class
rdTabBaror your custom class of
TabBarneeds
display: -webkit-flexin CSS like below. ```css .myTabBar { display: -webkit-flex; }