feat: tabs/pane增加 contentClassName

DouyinFE · Apr 7, 2024 · 48ac305 · 48ac305
1 parent ae4502e
commit 48ac305
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 5 deletions.
diff --git a/content/navigation/tabs/index.md b/content/navigation/tabs/index.md
@@ -564,6 +564,7 @@ activeKey | 当前激活的 tab 页的 itemKey 值 | string | 无 |
 className | 类名 | string | 无 |
 collapsible | 折叠的 Tabs，**>=1.1.0** | boolean | false |
 contentStyle | 内容区域外层样式对象 | CSSProperties | 无 |
+contentClassName | 内容区域外层类名 | string | 无 |
 defaultActiveKey | 初始化选中的 tab 页的 key 值 | string | '1' |
 keepDOM | 使用 TabPane 写法时是否渲染隐藏面板的 DOM 结构，**>=1.0.0** | boolean | true |
 lazyRender | 懒渲染，仅当面板激活过才被渲染在 DOM 树中, **>=1.0.0** | boolean | false |
@@ -572,6 +573,7 @@ preventScroll | 指示浏览器是否应滚动文档以显示新聚焦的元素
 size | 大小，提供 `large`、`medium`、`small` 三种类型，**>=1.11.0，目前仅支持线性 Tabs** | string | `large` |
 style | 样式对象 | CSSProperties | 无 |
 tabBarExtraContent | 用于扩展标签栏的内容 | ReactNode | 无 |
+tabBarClassName | 标签栏类名 | CSSProperties | 无 |
 tabList | 标签页对象组成的数组，该对象支持 itemKey（对应 activeKey，tab（标签页文字）及 icon（标签页图标） | TabPane[] | 无 |
 tabPaneMotion | 是否使用动画切换 tabs | boolean | true |
 tabPosition | tab 的位置，支持`top`(水平), `left`(垂直)，**>=1.0.0** | string | `top` |
@@ -585,6 +587,7 @@ onTabClose | 关闭 tab 页时的回调函数 **>=2.1.0** |  function(tabKey: st
 属性      | 说明             | 类型               | 默认值 |
 --------- | ---------------- | ------------------ | ------ |
 className | 类名             | string             | 无     |
+contentClassName  | 内容区域外层类名 | string | 无 |
 disabled  | 标签页栏是否禁用 | boolean            | 无     |
 icon      | 标签页栏 icon    | ReactNode | 无     |
 itemKey   | 对应 `activeKey` | string             | 无     |

diff --git a/packages/semi-ui/tabs/TabPane.tsx b/packages/semi-ui/tabs/TabPane.tsx
@@ -57,7 +57,7 @@ class TabPane extends PureComponent<TabPaneProps> {
 
     render(): ReactNode {
         const { tabPaneMotion: motion, tabPosition, prevActiveKey } = this.context;
-        const { className, style, children, itemKey, tabIndex, ...restProps } = this.props;
+        const { className, style, children, itemKey, tabIndex, contentClassName, ...restProps } = this.props;
         const active = this.context.activeKey === itemKey;
         const classNames = cls(className, {
             [cssClasses.TABS_PANE_INACTIVE]: !active,
@@ -103,10 +103,10 @@ class TabPane extends PureComponent<TabPaneProps> {
                     {
                         ({ animationClassName, animationEventsNeedBind }) => {
                             return <div
-                                className={cls(cssClasses.TABS_PANE_MOTION_OVERLAY, animationClassName)}
+                                className={cls(cssClasses.TABS_PANE_MOTION_OVERLAY, animationClassName, contentClassName)}
                                 x-semi-prop="children"
                                 {...animationEventsNeedBind}
-                            > 
+                            >
                                 {shouldRender ? children : null}
                             </div>;
                         }

diff --git a/packages/semi-ui/tabs/index.tsx b/packages/semi-ui/tabs/index.tsx
@@ -242,6 +242,7 @@ class Tabs extends BaseComponent<TabsProps, TabsState> {
             className,
             collapsible,
             contentStyle,
+            contentClassName,
             keepDOM,
             lazyRender,
             renderTabBar,
@@ -264,7 +265,7 @@ class Tabs extends BaseComponent<TabsProps, TabsState> {
         const tabContentCls = cls({
             [cssClasses.TABS_CONTENT]: true,
             [`${cssClasses.TABS_CONTENT}-${tabPosition}`]: tabPosition,
-        });
+        }, contentClassName);
 
         const tabBarProps = {
             activeKey,

diff --git a/packages/semi-ui/tabs/interface.ts b/packages/semi-ui/tabs/interface.ts
@@ -21,6 +21,7 @@ export interface TabsProps {
     className?: string;
     collapsible?: boolean;
     contentStyle?: CSSProperties;
+    contentClassName?: string;
     defaultActiveKey?: string;
     keepDOM?: boolean;
     lazyRender?: boolean;
@@ -67,7 +68,8 @@ export interface TabPaneProps {
     style?: CSSProperties;
     tab?: ReactNode;
     closable?: boolean;
-    tabIndex?: number
+    tabIndex?: number;
+    contentClassName?: string
 }
 
 export interface TabPaneTransitionProps {