"use strict";

var _react = _interopRequireDefault(require("react"));

var _reactDom = _interopRequireDefault(require("react-dom"));

var _ = _interopRequireDefault(require(".."));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

var panes = [{
  tab: 'Todo Tasks',
  key: 0
}, {
  tab: 'Finished Tasks',
  key: 1
}, {
  tab: 'Unread Messages',
  key: 2
}, {
  tab: 'Past Messages',
  key: 3
}, {
  tab: 'All Messages',
  key: 4
}];
var detachedContentStyle = {
  border: '1px solid #DCDEE3',
  padding: '20px'
};

_reactDom["default"].render( /*#__PURE__*/_react["default"].createElement("div", {
  className: "fusion-demo"
}, /*#__PURE__*/_react["default"].createElement("div", {
  className: "demo-item-title"
}, "Customize with contentStyle or contentClassName"), /*#__PURE__*/_react["default"].createElement(_["default"], {
  shape: "wrapped",
  contentStyle: detachedContentStyle
}, panes.map(function (pane) {
  return /*#__PURE__*/_react["default"].createElement(_["default"].Item, {
    title: pane.tab,
    key: pane.key
  }, pane.tab);
})), /*#__PURE__*/_react["default"].createElement("div", {
  className: "demo-item-title"
}, "Setting className and style in Tab.Item"), /*#__PURE__*/_react["default"].createElement(_["default"], {
  shape: "wrapped",
  navStyle: {
    background: '#DEE8FF'
  }
}, panes.map(function (pane) {
  return /*#__PURE__*/_react["default"].createElement(_["default"].Item, {
    title: pane.tab,
    key: pane.key,
    className: "custom-tab-item",
    style: {
      background: '#FFF'
    }
  }, pane.tab);
})), /*#__PURE__*/_react["default"].createElement("div", {
  className: "demo-item-title"
}, "Tabs with same width"), /*#__PURE__*/_react["default"].createElement(_["default"], null, panes.map(function (pane) {
  return /*#__PURE__*/_react["default"].createElement(_["default"].Item, {
    title: pane.tab,
    key: pane.key,
    className: "justify-tabs-tab"
  }, pane.tab);
}))), document.getElementById('tab-demo-10'));