Merge pull request #357 from Charles-1999/feat/tabs/props

feat(Tabs): 支持className 和 style 组件参数
Tencent · May 11, 2023 · fbec2b4 · fbec2b4
2 parents 82b88a1 + e0be38a
commit fbec2b4
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 3 deletions.
diff --git a/src/tabs/Tabs.tsx b/src/tabs/Tabs.tsx
@@ -1,12 +1,17 @@
-import React, { FC, useEffect, useRef, useState } from 'react';
+import React, { FC, HTMLAttributes, useEffect, useRef, useState } from 'react';
 import classnames from 'classnames';
 import useConfig from '../_util/useConfig';
 import { TdTabsProps } from './type';
 import TabPanel from './TabPanel';
 import TabContext from './context';
 
-const Tabs: FC<TdTabsProps> = (props) => {
+type TabsHTMLAttrs = Pick<HTMLAttributes<HTMLDivElement>, 'className' | 'style'>;
+export interface TabsProps extends TdTabsProps, TabsHTMLAttrs {}
+
+const Tabs: FC<TabsProps> = (props) => {
   const {
+    className = '',
+    style,
     children,
     content,
     defaultValue = '',
@@ -104,11 +109,12 @@ const Tabs: FC<TdTabsProps> = (props) => {
   return (
     <div
       className={classnames(
-        `${tabPrefix}-tabs`,
+        [`${tabPrefix}-tabs`, className],
         size === 'large' && `${tabPrefix}-size-l`,
         size === 'small' && `${tabPrefix}-size-s`,
         placement && `${tabPrefix}-is-${placement}`,
       )}
+      style={style}
     >
       <div ref={wrapRef} className={classnames(`${tabPrefix}-tabs__nav `, `${tabPrefix}-is-scrollable `)}>
         <div className={classnames(`${tabPrefix}-tabs__nav-wrap`, `${tabPrefix}-tabs__nav-container`)}>

diff --git a/src/tabs/tabs.md b/src/tabs/tabs.md
@@ -6,6 +6,8 @@
 
 名称 | 类型 | 默认值 | 说明 | 必传
 -- | -- | -- | -- | --
+className | String | - | 类名 | N
+style | Object | - | 样式，TS 类型：`React.CSSProperties` | N
 list | Array | - | 选项卡列表 | N
 animation | Object | - | 动画效果设置{transition-timing-function, transition-duration}。 | N
 placement | String | top | 选项卡位置，可选值'left'\|'right'\|'top'\|'bottom' | N