How to use rc-tabs - 8 common examples
To help you get started, we’ve selected a few rc-tabs examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
ximing / weditor / dist / components / insertImage / insertImage.js View on Github 
'div',
{ className: 'weditor-uploader-wrapper' },
_react2.default.createElement(
_rcTabs2.default,
{
renderTabBar: function renderTabBar() {
return _react2.default.createElement(_ScrollableInkTabBar2.default, { onTabClick: _this5.onTabClick });
},
renderTabContent: function renderTabContent() {
return _react2.default.createElement(_TabContent2.default, { animatedWithMargin: true });
},
activeKey: this.state.activeKey,
onChange: this.onChange
},
_react2.default.createElement(
_rcTabs.TabPane,
{ tab: '本地上传', key: '1' },
_react2.default.createElement(
'div',
{ className: 'weditor-uploader-file-inner' },
_react2.default.createElement(
'p',
{ className: 'weditor-image-tips',
style: { display: progress === 0 || progress === 100 ? 'block' : 'none' } },
'\u6700\u5927\u4E0A\u4F2020M\u7684\u56FE\u7247'
),
_react2.default.createElement(
_button2.default,
{ id: 'weditorUploaderPick',
style: { display: progress === 0 || progress === 100 ? 'block' : 'none' } },
'\u70B9\u51FB\u4E0A\u4F20'
),var Tab = require('rc-tabs');
Tab.Panel = Tab.TabPane;
module.exports = Tab;{ className: 'weditor-image-tips',
style: { display: progress === 0 || progress === 100 ? 'block' : 'none' } },
'\u6700\u5927\u4E0A\u4F2020M\u7684\u56FE\u7247'
),
_react2.default.createElement(
_button2.default,
{ id: 'weditorUploaderPick',
style: { display: progress === 0 || progress === 100 ? 'block' : 'none' } },
'\u70B9\u51FB\u4E0A\u4F20'
),
_react2.default.createElement(_rcProgress.Line, { percent: progress, trailWidth: '2', strokeWidth: '2', strokeColor: '#118bfb',
style: { display: progress > 0 && progress < 100 ? 'block' : 'none' } })
)
),
_react2.default.createElement(
_rcTabs.TabPane,
{ tab: '插入外链', key: '2' },
_react2.default.createElement(
'div',
{ className: 'weditor-uploader-file-inner' },
_react2.default.createElement(
'div',
null,
_react2.default.createElement(_input2.default, { onChange: this.onLinkUrlChange }),
_react2.default.createElement(
_button2.default,
{ onClick: this.insertLink },
'\u63D2\u5165'
)
)
)
)};
return _react2['default'].createElement(
_rcTabs2['default'],
(0, _extends3['default'])({}, this.props, { className: cls, tabBarPosition: tabPosition, renderTabBar: renderTabBar, renderTabContent: function renderTabContent() {
return _react2['default'].createElement(_TabContent2['default'], { animated: tabPaneAnimated, animatedWithMargin: true });
}, onChange: this.handleChange }),
childrenWithClose || children
);
}
}]);
return Tabs;
}(_react2['default'].Component);
exports['default'] = Tabs;
Tabs.TabPane = _rcTabs.TabPane;
Tabs.defaultProps = {
prefixCls: 'ant-tabs',
hideAdd: false
};
module.exports = exports['default'];activeKey: this.state.activeKey,
onChange: function onChange(key) {
_this4.handleTabChange(key);
}
}),
clonedChildren
),
showAllBtn ? this.renderAllBtn(fix) : null
);
}
}]);
return Tabs;
}(_react2.default.Component);
Tabs.TabPane = _rcTabs.TabPane;
Tabs.Item = _rcTabs.TabPane;
Tabs.propTypes = {
activeKey: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.number]),
active: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.number]),
defaultActive: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.number]),
showExpandAll: _propTypes2.default.bool,
fixedTop: _propTypes2.default.bool,
fixedBottom: _propTypes2.default.bool,
onChange: _propTypes2.default.func,
onTabClick: _propTypes2.default.func,
tabBarPosition: _propTypes2.default.oneOf(['top', 'bottom']),
animated: _propTypes2.default.bool,
swipeable: _propTypes2.default.bool,
children: _propTypes2.default.any,
className: _propTypes2.default.string,
prefixCls: _propTypes2.default.string,onChange: function onChange(key) {
_this4.handleTabChange(key);
}
}),
clonedChildren
),
showAllBtn ? this.renderAllBtn(fix) : null
);
}
}]);
return Tabs;
}(_react2.default.Component);
Tabs.TabPane = _rcTabs.TabPane;
Tabs.Item = _rcTabs.TabPane;
Tabs.propTypes = {
activeKey: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.number]),
active: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.number]),
defaultActive: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.number]),
showExpandAll: _propTypes2.default.bool,
fixedTop: _propTypes2.default.bool,
fixedBottom: _propTypes2.default.bool,
onChange: _propTypes2.default.func,
onTabClick: _propTypes2.default.func,
tabBarPosition: _propTypes2.default.oneOf(['top', 'bottom']),
animated: _propTypes2.default.bool,
swipeable: _propTypes2.default.bool,
children: _propTypes2.default.any,
className: _propTypes2.default.string,
prefixCls: _propTypes2.default.string,
destroyInactiveTabPane: _propTypes2.default.bool,import React from 'react';
import Tabs, { TabPane } from 'rc-tabs';
import TabContent from 'rc-tabs/lib/TabContent';
import ScrollableInkTabBar from 'rc-tabs/lib/ScrollableInkTabBar';
import './RCTabs.scss';
Tabs.defaultProps.renderTabBar = () => ;
Tabs.defaultProps.renderTabContent = () => (
);
export default Tabs;
export { Tabs, TabPane };import React from 'react';
import Tabs, { TabPane } from 'rc-tabs';
import TabContent from 'rc-tabs/lib/TabContent';
import ScrollableInkTabBar from 'rc-tabs/lib/ScrollableInkTabBar';
import './RCTabs.scss';
Tabs.defaultProps.renderTabBar = () => ;
Tabs.defaultProps.renderTabContent = () => (
);
export default Tabs;
export { Tabs, TabPane };
