Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

improve(design): 优化 tabs 页签宽度 #180

Closed
wants to merge 2 commits into from
Closed

improve(design): 优化 tabs 页签宽度 #180

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
010aac8
feat(): 优化 tabs 页签宽度 feat #101110862
TianWuwt Oct 13, 2023
a0fecdb
feat(): 更新 antd 依赖，升至 5.1.0
TianWuwt Oct 13, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions packages/design/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@
"@oceanbase/icons": "workspace:^",
"@oceanbase/util": "workspace:^",
"ahooks": "^2.10.14",
"antd": "^5.8.0",
"antd": "^5.10.0",
"classnames": "^2.3.2",
"lodash": "^4.17.21",
"lottie-web": "^5.12.2",
Expand All @@ -56,4 +56,4 @@
"react": "^16.9.0",
"react-dom": "^16.9.0"
}
}
}
19 changes: 7 additions & 12 deletions packages/design/src/tabs/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,13 @@
import { isNullValue } from '@oceanbase/util';
import React, { useState, useRef, useContext, } from 'react';
import { Space, Tabs as AntTabs, Tag } from 'antd';
import React, { useState, useRef, useContext } from 'react';
import type { TabsProps as AntTabsProps, TabsPosition as AntTabsPosition } from 'antd/es/tabs';
import type { Tab as AntTab } from 'rc-tabs/es/interface';
import { isNullValue } from '@oceanbase/util';
import { useUpdateEffect } from 'ahooks';
import classNames from 'classnames';
import ConfigProvider from '../config-provider';
import useInkBar from './hooks/useInkBar';
import useLegacyItems from './hooks/useLegacyItems';
import useStyle from './style';
import { useUpdateEffect } from 'ahooks';
import TabPane from './TabPane';

export * from 'antd/es/tabs';
Expand Down Expand Up @@ -36,6 +35,7 @@ const Tabs = ({
tabPosition,
prefixCls: customizePrefixCls,
className,
indicatorSize,
...restProps
}: TabsProps) => {
const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
Expand Down Expand Up @@ -77,14 +77,6 @@ const Tabs = ({
}
}, [activeKeyProp]);

useInkBar({
prefixCls,
activeKey,
size,
type,
tabPosition,
containerRef: ref,
});

return wrapSSR(
<AntTabs
Expand All @@ -98,6 +90,9 @@ const Tabs = ({
}}
size={size}
type={type}
// 水平布局，宽度 >= 24，则两侧各减去 8px，并保持水平居中
// 垂直布局，高度始终与 Tab btn 相同，并保持垂直居中
indicatorSize={isHorizontal ? (origin) => (origin >= 24 ? origin - 16 : origin) : 16}
tabPosition={tabPosition}
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

上周为了解决 OCP Express 的问题，已经把 inkbar 的宽度改为了 indicatorSize #178 ，可以对比下改动的差异，当前 PR 先关闭了。

tabBarGutter={!type || type === 'line' ? (isHorizontal ? 24 : 0) : undefined}
prefixCls={customizePrefixCls}
Expand Down
Loading
Loading