refine style

pingcap · Nov 27, 2020 · e68c6ba · e68c6ba
1 parent 18d2747
commit e68c6ba
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 14 deletions.
diff --git a/ui/lib/apps/ClusterInfo/pages/List.module.less b/ui/lib/apps/ClusterInfo/pages/List.module.less
@@ -1,7 +1,8 @@
 @import '~antd/es/style/themes/default.less';
 
-.sticky_tabs_header {
+.card_tab_navs {
   padding-left: @padding-page; // 48px
+  padding-right: @padding-page; // 48px
   height: @padding-page; // 48px
   margin-bottom: @padding-md; // 16px
   border-bottom: 1px solid @gray-4;

diff --git a/ui/lib/apps/ClusterInfo/pages/List.tsx b/ui/lib/apps/ClusterInfo/pages/List.tsx
@@ -18,7 +18,7 @@ import styles from './List.module.less'
 function renderTabBar(props, DefaultTabBar) {
   return (
     <Sticky stickyPosition={StickyPositionType.Header}>
-      <DefaultTabBar {...props} className={styles.sticky_tabs_header} />
+      <DefaultTabBar {...props} className={styles.card_tab_navs} />
     </Sticky>
   )
 }

diff --git a/ui/lib/components/CardTabs/index.module.less b/ui/lib/components/CardTabs/index.module.less
@@ -2,15 +2,8 @@
   margin-left: -@padding-page;
   margin-right: -@padding-page;
 
-  :global {
-    .ant-tabs-nav {
-      padding-left: @padding-page;
-      padding-right: @padding-page;
-    }
-
-    .ant-tabs-content > .ant-tabs-tabpane {
-      padding-left: @padding-page;
-      padding-right: @padding-page;
-    }
+  .card_tab_navs {
+    padding-left: @padding-page;
+    padding-right: @padding-page;
   }
 }
diff --git a/ui/lib/components/CardTabs/index.tsx b/ui/lib/components/CardTabs/index.tsx
@@ -15,11 +15,16 @@ export interface ICardTabsProps extends TabsProps {
   tabs: Tab[]
 }
 
+function renderCardTabBar(props, DefaultTabBar) {
+  return <DefaultTabBar {...props} className={styles.card_tab_navs} />
+}
+
 function CardTabs({
   className,
   tabs,
   defaultActiveKey,
   onChange,
+  renderTabBar,
   ...restProps
 }: ICardTabsProps) {
   const [tabKey, setTabKey] = useState(defaultActiveKey || tabs[0].key)
@@ -35,12 +40,13 @@ function CardTabs({
     <>
       <Tabs
         className={c}
-        {...restProps}
         defaultActiveKey={tabKey}
         onChange={changeTab}
+        renderTabBar={renderTabBar || renderCardTabBar}
+        {...restProps}
       >
         {tabs.map((tab) => (
-          <Tabs.TabPane tab={tab.title} key={tab.key}></Tabs.TabPane>
+          <Tabs.TabPane tab={tab.title} key={tab.key} />
         ))}
       </Tabs>
       {selectedTab?.content()}