rc-tabs - npm Package Compare versions

Comparing version 12.15.0 to 13.0.0

es/hooks/useIndicator.d.ts

@@ -8,4 +8,6 @@ import React from 'react';
     rtl: boolean;
-    indicatorSize: GetIndicatorSize;
-    indicatorAlign: 'start' | 'center' | 'end';
+    indicator?: {
+        size?: GetIndicatorSize;
+        align?: 'start' | 'center' | 'end';
+    };
 }
@@ -12,0 +14,0 @@ declare const useIndicator: (options: UseIndicatorOptions) => {

es/hooks/useIndicator.js

@@ -8,4 +8,3 @@ import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
     rtl = options.rtl,
-    indicatorSize = options.indicatorSize,
-    indicatorAlign = options.indicatorAlign;
+    indicator = options.indicator;
   var _useState = useState(),
@@ -17,10 +16,10 @@ _useState2 = _slicedToArray(_useState, 2),
   var getLength = React.useCallback(function (origin) {
-    if (typeof indicatorSize === 'function') {
-      return indicatorSize(origin);
+    if (typeof (indicator === null || indicator === void 0 ? void 0 : indicator.size) === 'function') {
+      return indicator === null || indicator === void 0 ? void 0 : indicator.size(origin);
     }
-    if (typeof indicatorSize === 'number') {
-      return indicatorSize;
+    if (typeof (indicator === null || indicator === void 0 ? void 0 : indicator.size) === 'number') {
+      return indicator === null || indicator === void 0 ? void 0 : indicator.size;
     }
     return origin;
-  }, [indicatorSize]);
+  }, [indicator]);
 
@@ -37,10 +36,10 @@ // Delay set ink style to avoid remove tab blink
         var key = rtl ? 'right' : 'left';
-        if (indicatorAlign === 'start') {
+        if ((indicator === null || indicator === void 0 ? void 0 : indicator.align) === 'start') {
           newInkStyle[key] = activeTabOffset[key];
         }
-        if (indicatorAlign === 'center') {
+        if ((indicator === null || indicator === void 0 ? void 0 : indicator.align) === 'center') {
           newInkStyle[key] = activeTabOffset[key] + activeTabOffset.width / 2;
           newInkStyle.transform = rtl ? 'translateX(50%)' : 'translateX(-50%)';
         }
-        if (indicatorAlign === 'end') {
+        if ((indicator === null || indicator === void 0 ? void 0 : indicator.align) === 'end') {
           newInkStyle[key] = activeTabOffset[key] + activeTabOffset.width;
@@ -51,10 +50,10 @@ newInkStyle.transform = 'translateX(-100%)';
         newInkStyle.height = getLength(activeTabOffset.height);
-        if (indicatorAlign === 'start') {
+        if ((indicator === null || indicator === void 0 ? void 0 : indicator.align) === 'start') {
           newInkStyle.top = activeTabOffset.top;
         }
-        if (indicatorAlign === 'center') {
+        if ((indicator === null || indicator === void 0 ? void 0 : indicator.align) === 'center') {
           newInkStyle.top = activeTabOffset.top + activeTabOffset.height / 2;
           newInkStyle.transform = 'translateY(-50%)';
         }
-        if (indicatorAlign === 'end') {
+        if ((indicator === null || indicator === void 0 ? void 0 : indicator.align) === 'end') {
           newInkStyle.top = activeTabOffset.top + activeTabOffset.height;
@@ -70,3 +69,3 @@ newInkStyle.transform = 'translateY(-100%)';
     return cleanInkBarRaf;
-  }, [activeTabOffset, horizontal, rtl, indicatorSize, indicatorAlign, getLength]);
+  }, [activeTabOffset, horizontal, rtl, indicator === null || indicator === void 0 ? void 0 : indicator.align, getLength]);
   return {
@@ -73,0 +72,0 @@ style: inkStyle

es/TabNavList/index.d.ts

@@ -25,6 +25,10 @@ import * as React from 'react';
     popupClassName?: string;
+    /** @deprecated Use `indicator={ size: ... }` instead */
     indicatorSize?: GetIndicatorSize;
-    indicatorAlign?: 'start' | 'center' | 'end';
+    indicator?: {
+        size?: GetIndicatorSize;
+        align?: 'start' | 'center' | 'end';
+    };
 }
 declare const TabNavList: React.ForwardRefExoticComponent<TabNavListProps & React.RefAttributes<HTMLDivElement>>;
 export default TabNavList;

es/TabNavList/index.js

@@ -69,3 +69,2 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 var TabNavList = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  var _classNames;
   var className = props.className,
@@ -86,3 +85,5 @@ style = props.style,
     indicatorSize = props.indicatorSize,
-    indicatorAlign = props.indicatorAlign;
+    indicator = props.indicator;
+  var mergedIndicatorSize = (indicator === null || indicator === void 0 ? void 0 : indicator.size) || indicatorSize;
+  var mergedIndicatorAlign = (indicator === null || indicator === void 0 ? void 0 : indicator.align) || 'center';
   var _React$useContext = React.useContext(TabContext),
@@ -382,4 +383,6 @@ prefixCls = _React$useContext.prefixCls,
       rtl: rtl,
-      indicatorSize: indicatorSize,
-      indicatorAlign: indicatorAlign
+      indicator: {
+        size: mergedIndicatorSize,
+        align: mergedIndicatorAlign
+      }
     }),
@@ -437,3 +440,3 @@ indicatorStyle = _useIndicator.style;
   }, /*#__PURE__*/React.createElement("div", {
-    className: classNames(wrapPrefix, (_classNames = {}, _defineProperty(_classNames, "".concat(wrapPrefix, "-ping-left"), pingLeft), _defineProperty(_classNames, "".concat(wrapPrefix, "-ping-right"), pingRight), _defineProperty(_classNames, "".concat(wrapPrefix, "-ping-top"), pingTop), _defineProperty(_classNames, "".concat(wrapPrefix, "-ping-bottom"), pingBottom), _classNames)),
+    className: classNames(wrapPrefix, _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(wrapPrefix, "-ping-left"), pingLeft), "".concat(wrapPrefix, "-ping-right"), pingRight), "".concat(wrapPrefix, "-ping-top"), pingTop), "".concat(wrapPrefix, "-ping-bottom"), pingBottom)),
     ref: tabsWrapperRef
@@ -475,3 +478,2 @@ }, /*#__PURE__*/React.createElement(ResizeObserver, {
 });
-
 export default TabNavList;

es/TabNavList/TabNode.js

@@ -7,3 +7,2 @@ import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 var TabNode = function TabNode(props) {
-  var _classNames;
   var prefixCls = props.prefixCls,
@@ -49,3 +48,3 @@ id = props.id,
     "data-node-key": genDataNodeKey(key),
-    className: classNames(tabPrefix, (_classNames = {}, _defineProperty(_classNames, "".concat(tabPrefix, "-with-remove"), removable), _defineProperty(_classNames, "".concat(tabPrefix, "-active"), active), _defineProperty(_classNames, "".concat(tabPrefix, "-disabled"), disabled), _classNames)),
+    className: classNames(tabPrefix, _defineProperty(_defineProperty(_defineProperty({}, "".concat(tabPrefix, "-with-remove"), removable), "".concat(tabPrefix, "-active"), active), "".concat(tabPrefix, "-disabled"), disabled)),
     style: style,
@@ -52,0 +51,0 @@ onClick: onInternalClick

es/Tabs.d.ts

@@ -30,6 +30,10 @@ import * as React from 'react';
     popupClassName?: string;
+    /** @deprecated Use `indicator={ size: ... }` instead */
     indicatorSize?: GetIndicatorSize;
-    indicatorAlign?: 'start' | 'center' | 'end';
+    indicator?: {
+        size?: GetIndicatorSize;
+        align?: 'start' | 'center' | 'end';
+    };
 }
 declare const Tabs: React.ForwardRefExoticComponent<TabsProps & React.RefAttributes<HTMLDivElement>>;
 export default Tabs;

es/Tabs.js

@@ -7,3 +7,3 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["id", "prefixCls", "className", "items", "direction", "activeKey", "defaultActiveKey", "editable", "animated", "tabPosition", "tabBarGutter", "tabBarStyle", "tabBarExtraContent", "locale", "moreIcon", "moreTransitionName", "destroyInactiveTabPane", "renderTabBar", "onChange", "onTabClick", "onTabScroll", "getPopupContainer", "popupClassName", "indicatorSize", "indicatorAlign"];
+var _excluded = ["id", "prefixCls", "className", "items", "direction", "activeKey", "defaultActiveKey", "editable", "animated", "tabPosition", "tabBarGutter", "tabBarStyle", "tabBarExtraContent", "locale", "moreIcon", "moreTransitionName", "destroyInactiveTabPane", "renderTabBar", "onChange", "onTabClick", "onTabScroll", "getPopupContainer", "popupClassName", "indicatorSize", "indicator"];
 // Accessibility https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Tab_Role
@@ -27,6 +27,7 @@ import classNames from 'classnames';
  * - keyboard
- */ // Used for accessibility
+ */
+
+// Used for accessibility
 var uuid = 0;
 var Tabs = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  var _classNames;
   var id = props.id,
@@ -58,4 +59,3 @@ _props$prefixCls = props.prefixCls,
     indicatorSize = props.indicatorSize,
-    _props$indicatorAlign = props.indicatorAlign,
-    indicatorAlign = _props$indicatorAlign === void 0 ? 'center' : _props$indicatorAlign,
+    indicator = props.indicator,
     restProps = _objectWithoutProperties(props, _excluded);
@@ -164,3 +164,3 @@ var tabs = React.useMemo(function () {
     indicatorSize: indicatorSize,
-    indicatorAlign: indicatorAlign
+    indicator: indicator
   });
@@ -175,3 +175,3 @@ return /*#__PURE__*/React.createElement(TabContext.Provider, {
     id: id,
-    className: classNames(prefixCls, "".concat(prefixCls, "-").concat(tabPosition), (_classNames = {}, _defineProperty(_classNames, "".concat(prefixCls, "-mobile"), mobile), _defineProperty(_classNames, "".concat(prefixCls, "-editable"), editable), _defineProperty(_classNames, "".concat(prefixCls, "-rtl"), rtl), _classNames), className)
+    className: classNames(prefixCls, "".concat(prefixCls, "-").concat(tabPosition), _defineProperty(_defineProperty(_defineProperty({}, "".concat(prefixCls, "-mobile"), mobile), "".concat(prefixCls, "-editable"), editable), "".concat(prefixCls, "-rtl"), rtl), className)
   }, restProps), /*#__PURE__*/React.createElement(TabNavListWrapper, _extends({}, tabNavBarProps, {
@@ -178,0 +178,0 @@ renderTabBar: renderTabBar

lib/hooks/useIndicator.d.ts

@@ -8,4 +8,6 @@ import React from 'react';
     rtl: boolean;
-    indicatorSize: GetIndicatorSize;
-    indicatorAlign: 'start' | 'center' | 'end';
+    indicator?: {
+        size?: GetIndicatorSize;
+        align?: 'start' | 'center' | 'end';
+    };
 }
@@ -12,0 +14,0 @@ declare const useIndicator: (options: UseIndicatorOptions) => {

lib/hooks/useIndicator.js

@@ -18,4 +18,3 @@ "use strict";
     rtl = options.rtl,
-    indicatorSize = options.indicatorSize,
-    indicatorAlign = options.indicatorAlign;
+    indicator = options.indicator;
   var _useState = (0, _react.useState)(),
@@ -27,10 +26,10 @@ _useState2 = (0, _slicedToArray2.default)(_useState, 2),
   var getLength = _react.default.useCallback(function (origin) {
-    if (typeof indicatorSize === 'function') {
-      return indicatorSize(origin);
+    if (typeof (indicator === null || indicator === void 0 ? void 0 : indicator.size) === 'function') {
+      return indicator === null || indicator === void 0 ? void 0 : indicator.size(origin);
     }
-    if (typeof indicatorSize === 'number') {
-      return indicatorSize;
+    if (typeof (indicator === null || indicator === void 0 ? void 0 : indicator.size) === 'number') {
+      return indicator === null || indicator === void 0 ? void 0 : indicator.size;
     }
     return origin;
-  }, [indicatorSize]);
+  }, [indicator]);
 
@@ -47,10 +46,10 @@ // Delay set ink style to avoid remove tab blink
         var key = rtl ? 'right' : 'left';
-        if (indicatorAlign === 'start') {
+        if ((indicator === null || indicator === void 0 ? void 0 : indicator.align) === 'start') {
           newInkStyle[key] = activeTabOffset[key];
         }
-        if (indicatorAlign === 'center') {
+        if ((indicator === null || indicator === void 0 ? void 0 : indicator.align) === 'center') {
           newInkStyle[key] = activeTabOffset[key] + activeTabOffset.width / 2;
           newInkStyle.transform = rtl ? 'translateX(50%)' : 'translateX(-50%)';
         }
-        if (indicatorAlign === 'end') {
+        if ((indicator === null || indicator === void 0 ? void 0 : indicator.align) === 'end') {
           newInkStyle[key] = activeTabOffset[key] + activeTabOffset.width;
@@ -61,10 +60,10 @@ newInkStyle.transform = 'translateX(-100%)';
         newInkStyle.height = getLength(activeTabOffset.height);
-        if (indicatorAlign === 'start') {
+        if ((indicator === null || indicator === void 0 ? void 0 : indicator.align) === 'start') {
           newInkStyle.top = activeTabOffset.top;
         }
-        if (indicatorAlign === 'center') {
+        if ((indicator === null || indicator === void 0 ? void 0 : indicator.align) === 'center') {
           newInkStyle.top = activeTabOffset.top + activeTabOffset.height / 2;
           newInkStyle.transform = 'translateY(-50%)';
         }
-        if (indicatorAlign === 'end') {
+        if ((indicator === null || indicator === void 0 ? void 0 : indicator.align) === 'end') {
           newInkStyle.top = activeTabOffset.top + activeTabOffset.height;
@@ -80,3 +79,3 @@ newInkStyle.transform = 'translateY(-100%)';
     return cleanInkBarRaf;
-  }, [activeTabOffset, horizontal, rtl, indicatorSize, indicatorAlign, getLength]);
+  }, [activeTabOffset, horizontal, rtl, indicator === null || indicator === void 0 ? void 0 : indicator.align, getLength]);
   return {
@@ -83,0 +82,0 @@ style: inkStyle

lib/TabNavList/index.d.ts

@@ -25,6 +25,10 @@ import * as React from 'react';
     popupClassName?: string;
+    /** @deprecated Use `indicator={ size: ... }` instead */
     indicatorSize?: GetIndicatorSize;
-    indicatorAlign?: 'start' | 'center' | 'end';
+    indicator?: {
+        size?: GetIndicatorSize;
+        align?: 'start' | 'center' | 'end';
+    };
 }
 declare const TabNavList: React.ForwardRefExoticComponent<TabNavListProps & React.RefAttributes<HTMLDivElement>>;
 export default TabNavList;

lib/TabNavList/index.js

@@ -80,3 +80,2 @@ "use strict";
 var TabNavList = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  var _classNames;
   var className = props.className,
@@ -97,3 +96,5 @@ style = props.style,
     indicatorSize = props.indicatorSize,
-    indicatorAlign = props.indicatorAlign;
+    indicator = props.indicator;
+  var mergedIndicatorSize = (indicator === null || indicator === void 0 ? void 0 : indicator.size) || indicatorSize;
+  var mergedIndicatorAlign = (indicator === null || indicator === void 0 ? void 0 : indicator.align) || 'center';
   var _React$useContext = React.useContext(_TabContext.default),
@@ -393,4 +394,6 @@ prefixCls = _React$useContext.prefixCls,
       rtl: rtl,
-      indicatorSize: indicatorSize,
-      indicatorAlign: indicatorAlign
+      indicator: {
+        size: mergedIndicatorSize,
+        align: mergedIndicatorAlign
+      }
     }),
@@ -448,3 +451,3 @@ indicatorStyle = _useIndicator.style;
   }, /*#__PURE__*/React.createElement("div", {
-    className: (0, _classnames.default)(wrapPrefix, (_classNames = {}, (0, _defineProperty2.default)(_classNames, "".concat(wrapPrefix, "-ping-left"), pingLeft), (0, _defineProperty2.default)(_classNames, "".concat(wrapPrefix, "-ping-right"), pingRight), (0, _defineProperty2.default)(_classNames, "".concat(wrapPrefix, "-ping-top"), pingTop), (0, _defineProperty2.default)(_classNames, "".concat(wrapPrefix, "-ping-bottom"), pingBottom), _classNames)),
+    className: (0, _classnames.default)(wrapPrefix, (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, "".concat(wrapPrefix, "-ping-left"), pingLeft), "".concat(wrapPrefix, "-ping-right"), pingRight), "".concat(wrapPrefix, "-ping-top"), pingTop), "".concat(wrapPrefix, "-ping-bottom"), pingBottom)),
     ref: tabsWrapperRef
@@ -451,0 +454,0 @@ }, /*#__PURE__*/React.createElement(_rcResizeObserver.default, {

lib/TabNavList/TabNode.js

@@ -17,3 +17,2 @@ "use strict";
 var TabNode = function TabNode(props) {
-  var _classNames;
   var prefixCls = props.prefixCls,
@@ -59,3 +58,3 @@ id = props.id,
     "data-node-key": (0, _util.genDataNodeKey)(key),
-    className: (0, _classnames.default)(tabPrefix, (_classNames = {}, (0, _defineProperty2.default)(_classNames, "".concat(tabPrefix, "-with-remove"), removable), (0, _defineProperty2.default)(_classNames, "".concat(tabPrefix, "-active"), active), (0, _defineProperty2.default)(_classNames, "".concat(tabPrefix, "-disabled"), disabled), _classNames)),
+    className: (0, _classnames.default)(tabPrefix, (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, "".concat(tabPrefix, "-with-remove"), removable), "".concat(tabPrefix, "-active"), active), "".concat(tabPrefix, "-disabled"), disabled)),
     style: style,
@@ -62,0 +61,0 @@ onClick: onInternalClick

lib/Tabs.d.ts

@@ -30,6 +30,10 @@ import * as React from 'react';
     popupClassName?: string;
+    /** @deprecated Use `indicator={ size: ... }` instead */
     indicatorSize?: GetIndicatorSize;
-    indicatorAlign?: 'start' | 'center' | 'end';
+    indicator?: {
+        size?: GetIndicatorSize;
+        align?: 'start' | 'center' | 'end';
+    };
 }
 declare const Tabs: React.ForwardRefExoticComponent<TabsProps & React.RefAttributes<HTMLDivElement>>;
 export default Tabs;

lib/Tabs.js

@@ -24,3 +24,3 @@ "use strict";
 var _useAnimateConfig = _interopRequireDefault(require("./hooks/useAnimateConfig"));
-var _excluded = ["id", "prefixCls", "className", "items", "direction", "activeKey", "defaultActiveKey", "editable", "animated", "tabPosition", "tabBarGutter", "tabBarStyle", "tabBarExtraContent", "locale", "moreIcon", "moreTransitionName", "destroyInactiveTabPane", "renderTabBar", "onChange", "onTabClick", "onTabScroll", "getPopupContainer", "popupClassName", "indicatorSize", "indicatorAlign"]; // Accessibility https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Tab_Role
+var _excluded = ["id", "prefixCls", "className", "items", "direction", "activeKey", "defaultActiveKey", "editable", "animated", "tabPosition", "tabBarGutter", "tabBarStyle", "tabBarExtraContent", "locale", "moreIcon", "moreTransitionName", "destroyInactiveTabPane", "renderTabBar", "onChange", "onTabClick", "onTabScroll", "getPopupContainer", "popupClassName", "indicatorSize", "indicator"]; // Accessibility https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Tab_Role
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
@@ -36,6 +36,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof3(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
  * - keyboard
- */ // Used for accessibility
+ */
+
+// Used for accessibility
 var uuid = 0;
 var Tabs = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  var _classNames;
   var id = props.id,
@@ -67,4 +68,3 @@ _props$prefixCls = props.prefixCls,
     indicatorSize = props.indicatorSize,
-    _props$indicatorAlign = props.indicatorAlign,
-    indicatorAlign = _props$indicatorAlign === void 0 ? 'center' : _props$indicatorAlign,
+    indicator = props.indicator,
     restProps = (0, _objectWithoutProperties2.default)(props, _excluded);
@@ -173,3 +173,3 @@ var tabs = React.useMemo(function () {
     indicatorSize: indicatorSize,
-    indicatorAlign: indicatorAlign
+    indicator: indicator
   });
@@ -184,3 +184,3 @@ return /*#__PURE__*/React.createElement(_TabContext.default.Provider, {
     id: id,
-    className: (0, _classnames.default)(prefixCls, "".concat(prefixCls, "-").concat(tabPosition), (_classNames = {}, (0, _defineProperty2.default)(_classNames, "".concat(prefixCls, "-mobile"), mobile), (0, _defineProperty2.default)(_classNames, "".concat(prefixCls, "-editable"), editable), (0, _defineProperty2.default)(_classNames, "".concat(prefixCls, "-rtl"), rtl), _classNames), className)
+    className: (0, _classnames.default)(prefixCls, "".concat(prefixCls, "-").concat(tabPosition), (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, "".concat(prefixCls, "-mobile"), mobile), "".concat(prefixCls, "-editable"), editable), "".concat(prefixCls, "-rtl"), rtl), className)
   }, restProps), /*#__PURE__*/React.createElement(_Wrapper.default, (0, _extends2.default)({}, tabNavBarProps, {
@@ -187,0 +187,0 @@ renderTabBar: renderTabBar

package.json

 {
   "name": "rc-tabs",
-  "version": "12.15.0",
+  "version": "13.0.0",
   "description": "tabs ui component for react",
@@ -65,3 +65,3 @@ "keywords": [
     "eslint-plugin-jest": "^27.6.0",
-    "eslint-plugin-unicorn": "^49.0.0",
+    "eslint-plugin-unicorn": "^50.0.1",
     "fastclick": "~1.0.6",
@@ -68,0 +68,0 @@ "father": "^4.0.0",

README.md

@@ -44,20 +44,49 @@ # rc-tabs
 
-```js
-import Tabs, { TabPane } from 'rc-tabs';
+```tsx
+import Tabs from 'rc-tabs';
+import ReactDom from 'react-dom';
 
-var callback = function(key) {};
+const callback = (key) => {
+  console.log(key);
+};
 
-React.render(
-  <Tabs defaultActiveKey="2" onChange={callback}>
-    <TabPane tab="tab 1" key="1">
-      first
-    </TabPane>
-    <TabPane tab="tab 2" key="2">
-      second
-    </TabPane>
-    <TabPane tab="tab 3" key="3">
-      third
-    </TabPane>
-  </Tabs>,
-  document.getElementById('t2'),
+const items = [
+  {
+    key: '1',
+    label: 'Google',
+    children: (
+      <div className="text-xl">
+        <p>Lorem Ipsum is simply dummy text of the printing and typesetting</p>
+      </div>
+    ),
+  },
+  {
+    key: '2',
+    label: <p>Amazon</p>,
+    children:
+      'Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...',
+    disabled: true,
+  },
+  {
+    key: '3',
+    label: <p>Twitter</p>,
+    children: (
+      <div>
+        "There is no one who loves pain itself, who seeks after it and wants to have it, simply
+        because it is pain..."
+      </div>
+    ),
+  },
+];
+
+ReactDom.render(
+  <Tabs
+    tabPosition="bottom"
+    items={items}
+    defaultActiveKey="1"
+    className="md:w-[70%] w-full mx-auto p-2 border-0"
+    onChange={callback}
+    style={{ color: 'yellow' }}
+  />,
+  root,
 );
@@ -72,25 +101,52 @@ ```
 | --- | --- | --- | --- |
+| prefixCls | string | `'rc-tabs'` | prefix class name, use to custom style |
+| className | string | - | to define a class name for an element |
+| style | CSS properties | - | object with css properties for styling |
+| items | TabItem[] | [] | configure tab content |
+| id | string | - | unique identifier |
+| defaultActiveKey | string | - | initial active tabPanel's key if activeKey is absent |
 | activeKey | string | - | current active tabPanel's key |
+| direction | `'ltr' or 'rtl'` | `'ltr'` | Layout direction of tabs component |
 | animated | boolean \| { inkBar: boolean, tabPane: boolean } | `{ inkBar: true, tabPane: false }` | config animation |
-| defaultActiveKey | string | - | initial active tabPanel's key if activeKey is absent |
-| destroyInactiveTabPane | boolean | false | whether destroy inactive TabPane when change tab |
-| direction | `'ltr' | 'rlt'` | `'ltr'` | Layout direction of tabs component |
-| editable | { onEdit(type: 'add' | 'remove', info: { key, event }), showAdd: boolean, removeIcon: ReactNode, addIcon: ReactNode } | - | config tab editable |
-| locale | { dropdownAriaLabel: string, removeAriaLabel: string, addAriaLabel: string } | - | Accessibility locale help text |
-| moreIcon | ReactNode | - | collapse icon |
+| renderTabBar | (props, TabBarComponent) => ReactElement | - | How to render tab bar |
+| tabBarExtraContent | ReactNode \| `{ left: ReactNode, right: ReactNode }` | - | config extra content |
 | tabBarGutter | number | 0 | config tab bar gutter |
 | tabBarPosition | `'left' \| 'right' \| 'top' \| 'bottom'` | `'top'` | tab nav 's position |
 | tabBarStyle | style | - | tab nav style |
-| tabBarExtraContent | ReactNode \| `{ left: ReactNode, right: ReactNode }` | - | config extra content |
-| renderTabBar | (props, TabBarComponent) => ReactElement | - | How to render tab bar |
-| prefixCls | string | `'rc-tabs'` | prefix class name, use to custom style |
+| tabPosition | `'left' or 'right' or 'top' or 'bottom'` | `'top'` | tab nav 's position |
+| destroyInactiveTabPane | boolean | false | whether destroy inactive TabPane when change tab |
 | onChange | (key) => void | - | called when tabPanel is changed |
 | onTabClick | (key) => void | - | called when tab click |
 | onTabScroll | ({ direction }) => void | - | called when tab scroll |
+| editable | { onEdit(type: 'add' | 'remove', info: { key, event }), showAdd: boolean, removeIcon: ReactNode, addIcon: ReactNode } | - | config tab editable |
+| locale | { dropdownAriaLabel: string, removeAriaLabel: string, addAriaLabel: string } | - | Accessibility locale help text |
+| moreIcon | ReactNode | - | collapse icon |
 
-### TabPane
+### TabItem
 
 | name | type | default | description |
 | --- | --- | --- | --- |
+| key | string | - | corresponding to activeKey, should be unique |
+| label | string | - | TabPane's head display text |
+| tab | ReactNode | - | current tab's title corresponding to current tabPane |
+| className | string | - | to define a class name for an element |
+| style | CSS properties | - | object with css properties for styling |
+| disabled | boolean | false | set TabPane disabled |
+| children | ReactNode | - | TabPane's head display content |
+| forceRender | boolean | false | forced render of content in tabs, not lazy render after clicking on tabs |
+| closable | boolean | false | closable feature of tab item |
+| closeIcon | ReactNode | - | Config close icon |
+| prefixCls | string | `'rc-tabs-tab'` | prefix class name, use to custom style |
+| id | string | - | unique identifier |
+| animated | boolean \| { inkBar: boolean, tabPane: boolean } | `{ inkBar: true, tabPane: false }` | config animation |
 | destroyInactiveTabPane | boolean | false | whether destroy inactive TabPane when change tab |
+| active | boolean | false | active feature of tab item |
+| tabKey | string | - | key linked to tab |
+
+
+### TabPane(support in older versions)
+
+| name | type | default | description |
+| --- | --- | --- | --- |
+| destroyInactiveTabPane | boolean | false | whether destroy inactive TabPane when change tab |
 | key | string | - | corresponding to activeKey, should be unique |
@@ -97,0 +153,0 @@ | forceRender | boolean | false | forced render of content in tabs, not lazy render after clicking on tabs |

No alert changes

Improved metrics

Total package byte prevSize

167742

increased by2.08%

Lines of code

3983

increased by0.45%

Number of lines in readme file

192

increased by41.18%

No dependency changes