feat(comp:tabs): add size props, default value is md (#1361)

IDuxFE · Dec 15, 2022 · 41eb8d9 · 41eb8d9
1 parent 8aeb214
commit 41eb8d9
Show file tree

Hide file tree

Showing 14 changed files with 119 additions and 7 deletions.
diff --git a/packages/components/config/src/defaultConfig.ts b/packages/components/config/src/defaultConfig.ts
@@ -285,6 +285,9 @@ export const defaultConfig: GlobalConfig = {
   switch: {
     size: 'md',
   },
+  tabs: {
+    size: 'md',
+  },
   table: {
     autoHeight: false,
     borderless: true,

diff --git a/packages/components/config/src/types.ts b/packages/components/config/src/types.ts
@@ -39,6 +39,7 @@ import type {
   TablePaginationPosition,
   TableSize,
 } from '@idux/components/table'
+import type { TabsSize } from '@idux/components/tabs'
 import type { TagShape } from '@idux/components/tag'
 import type { TextareaAutoRows, TextareaResize } from '@idux/components/textarea'
 import type { TreeNode } from '@idux/components/tree'
@@ -93,6 +94,7 @@ export interface GlobalConfig {
   statistic: StatisticConfig
   stepper: StepperConfig
   switch: SwitchConfig
+  tabs: TabsConfig
   table: TableConfig
   tag: TagConfig
   tagGroup: TagGroupConfig
@@ -444,6 +446,10 @@ export interface SwitchConfig {
   size: FormSize
 }
 
+export interface TabsConfig {
+  size: TabsSize
+}
+
 export interface TableConfig {
   autoHeight: boolean
   borderless: boolean

diff --git a/packages/components/tabs/__tests__/__snapshots__/tabs.spec.ts.snap b/packages/components/tabs/__tests__/__snapshots__/tabs.spec.ts.snap
@@ -1,7 +1,7 @@
 // Vitest Snapshot v1
 
 exports[`Tabs > render work 1`] = `
-"<div class=\\"ix-tabs ix-tabs-card ix-tabs-nav-top\\">
+"<div class=\\"ix-tabs ix-tabs-md ix-tabs-card ix-tabs-nav-top\\">
   <div class=\\"ix-tabs-nav-wrapper\\">
     <!---->
     <div class=\\"ix-tabs-nav\\"></div>

diff --git a/packages/components/tabs/__tests__/tabs.spec.ts b/packages/components/tabs/__tests__/tabs.spec.ts
@@ -146,6 +146,18 @@ describe('Tabs', () => {
     expect(wrapper.findAll('.ix-tabs-pane').length).toBe(1)
   })
 
+  test('size work', async () => {
+    const wrapper = TabsMount()
+
+    expect(wrapper.classes()).toContain('ix-tabs-md')
+
+    await wrapper.setProps({
+      size: 'lg',
+    })
+
+    expect(wrapper.classes()).toContain('ix-tabs-lg')
+  })
+
   describe('Tab', () => {
     test('no key work', async () => {
       const wrapper = TabsMount({

diff --git a/packages/components/tabs/demo/Size.md b/packages/components/tabs/demo/Size.md
@@ -0,0 +1,12 @@
+---
+title:
+  zh: 尺寸
+  en: Size
+order: 7
+---
+
+## zh
+
+提供了`lg` 和 `md` 两种尺寸
+
+## en
diff --git a/packages/components/tabs/demo/Size.vue b/packages/components/tabs/demo/Size.vue
@@ -0,0 +1,37 @@
+<template>
+  <IxSpace :size="20" vertical>
+    <IxRadioGroup v-model:value="size">
+      <IxRadio value="lg">大</IxRadio>
+      <IxRadio value="md">中</IxRadio>
+    </IxRadioGroup>
+    <IxTabs v-model:selectedKey="selectedKey" :size="size">
+      <IxTab key="tab1" title="标签1" />
+      <IxTab key="tab2" title="标签2" />
+      <IxTab key="tab3" title="标签3" />
+    </IxTabs>
+    <IxTabs v-model:selectedKey="selectedKey" type="line" :size="size">
+      <IxTab key="tab1" title="标签1" />
+      <IxTab key="tab2" title="标签2" />
+      <IxTab key="tab3" title="标签3" />
+    </IxTabs>
+    <IxTabs v-model:selectedKey="selectedKey" type="segment" :size="size">
+      <IxTab key="tab1" title="标签1" />
+      <IxTab key="tab2" title="标签2" />
+      <IxTab key="tab3" title="标签3" />
+    </IxTabs>
+    <IxTabs v-model:selectedKey="selectedKey" type="segment" mode="primary" :size="size">
+      <IxTab key="tab1" title="标签1" />
+      <IxTab key="tab2" title="标签2" />
+      <IxTab key="tab3" title="标签3" />
+    </IxTabs>
+  </IxSpace>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+import { type TabsSize } from '@idux/components/tabs'
+
+const size = ref<TabsSize>('md')
+const selectedKey = ref('tab1')
+</script>
diff --git a/packages/components/tabs/docs/Api.zh.md b/packages/components/tabs/docs/Api.zh.md
@@ -10,6 +10,7 @@
 | `mode` | 当`type`为`segment`时按钮的样式 | `'default' \| 'primary'` | `'default'` | - | - |
 | `placement` | 标签的方位 | `'top' \| 'start' \| 'end' \| 'bottom'` | `'top'` | - | 其他类型仅在type为`line`生效 |
 | `type` | 标签的类型 | `'card' \| 'line' \| 'segment'` | `'card'`| - | - |
+| `size` | 标签页的尺寸 | `'lg' \| 'md'` | `'md'` | ✅ | - |
 | `onTabClick` | 标签被点击的回调 | `(key: VKey, evt: Event) => void`| - | - | - |
 | `onPreClick` | 滚动状态下，Pre按钮被点击的回调 | `(evt: Event) => void`| - | - | - |
 | `onNextClick` | 滚动状态下，Next按钮被点击的回调 | `(evt: Event) => void`| - | - | - |

diff --git a/packages/components/tabs/docs/Theme.zh.md b/packages/components/tabs/docs/Theme.zh.md
@@ -4,12 +4,12 @@
 | `@tabs-hover-color` | `@color-primary-l10` | - | - |
 | `@tabs-active-color` | `@color-primary-d10` | - | - |
 | `@tabs-disabled-color` | `@color-graphite-l10` | - | - |
-| `@tabs-nav-font-size` | `@font-size-sm` | - | - |
+| `@tabs-nav-font-size-md` | `var(--ix-font-size-md)` | `var(--ix-font-size-sm)` | - |
+| `@tabs-nav-font-size-lg` | `var(--ix-font-size-lg)` | `var(--ix-font-size-md)` | - |
 | `@tabs-nav-background-color` | `@color-white` | - | - |
 | `@tabs-nav-border-color` | `@color-graphite-l30` | - | - |
 | `@tabs-nav-bottom-color` | `@color-graphite-l30` | - | - |
 | `@tabs-card-nav-font-size` | `@font-size-md` | - | - |
-| `@tabs-segment-nav-font-size` | `@font-size-sm` | - | - |
 | `@tabs-segment-nav-disabled-background-color` | `@color-graphite-l40` | - | - |
 | `@tabs-segment-nav-primary-active-background-color` | `@color-primary` | - | - |
 | `@tabs-segment-nav-primary-active-text-color` | `@color-white` | - | - |

diff --git a/packages/components/tabs/index.ts b/packages/components/tabs/index.ts
@@ -23,4 +23,5 @@ export type {
   TabsPublicProps as TabsProps,
   TabPublicProps as TabProps,
   TabsPlacement,
+  TabsSize,
 } from './src/types'
diff --git a/packages/components/tabs/src/InternalTabs.tsx b/packages/components/tabs/src/InternalTabs.tsx
@@ -72,6 +72,7 @@ export default defineComponent({
   setup(props) {
     const common = useGlobalConfig('common')
     const mergedPrefixCls = computed(() => `${common.prefixCls}-tabs`)
+    const config = useGlobalConfig('tabs')
 
     const navWrapperElRef = ref<HTMLElement | null>(null)
     const navElRef = ref<HTMLElement | null>(null)
@@ -87,6 +88,8 @@ export default defineComponent({
     const horizontalPlacement = ['top', 'bottom']
     const isHorizontal = computed(() => horizontalPlacement.includes(props.placement))
 
+    const mergedSize = computed(() => props.size ?? config.size)
+
     const [navOffset, setNavOffset] = useState(0)
     const [barStyle, setBarStyle] = useState<CSSProperties>({})
     const {
@@ -146,8 +149,10 @@ export default defineComponent({
     const classes = computed(() => {
       const { type, placement, mode } = props
       const prefixCls = mergedPrefixCls.value
+      const size = mergedSize.value
       return normalizeClass({
         [prefixCls]: true,
+        [`${prefixCls}-${size}`]: true,
         [`${prefixCls}-${type}`]: true,
         [`${prefixCls}-nav-${placement}`]: placement === 'top' || type === 'line',
         [`${prefixCls}-nav-${mode}`]: type === 'segment',

diff --git a/packages/components/tabs/src/types.ts b/packages/components/tabs/src/types.ts
@@ -13,13 +13,15 @@ import type { DefineComponent, HTMLAttributes, PropType } from 'vue'
 export type TabsType = 'card' | 'line' | 'segment'
 export type TabsPlacement = 'top' | 'bottom' | 'start' | 'end'
 export type TabsMode = 'default' | 'primary'
+export type TabsSize = 'lg' | 'md'
 
 export const tabsProps = {
   selectedKey: { type: [Number, String, Symbol] as PropType<VKey>, default: undefined },
   type: { type: String as PropType<TabsType>, default: 'card' },
   forceRender: { type: Boolean, default: false },
   placement: { type: String as PropType<TabsPlacement>, default: 'top' },
   mode: { type: String as PropType<TabsMode>, default: 'default' },
+  size: String as PropType<TabsSize>,
 
   'onUpdate:selectedKey': [Function, Array] as PropType<MaybeArray<(key: any) => void>>,
   onTabClick: [Function, Array] as PropType<MaybeArray<(key: any, evt: Event) => void>>,

diff --git a/packages/components/tabs/style/index.less b/packages/components/tabs/style/index.less
@@ -18,11 +18,42 @@
     }
   }
 
+  &-md {
+    & > .@{tabs-prefix}-nav-wrapper {
+      font-size: @tabs-nav-font-size-md;
+    }
+  }
+
+  &-lg {
+    & > .@{tabs-prefix}-nav-wrapper {
+      font-size: @tabs-nav-font-size-lg;
+    }
+
+    &.@{tabs-prefix}-line {
+      & > .@{tabs-prefix}-nav-wrapper {
+        & > .@{tabs-prefix}-nav {
+          & > .@{tabs-prefix}-nav-tab {
+            height: 48px;
+          }
+        }
+      }
+    }
+
+    &.@{tabs-prefix}-segment {
+      & > .@{tabs-prefix}-nav-wrapper {
+        & > .@{tabs-prefix}-nav {
+          & > .@{tabs-prefix}-nav-tab {
+            min-width: 80px;
+          }
+        }
+      }
+    }
+  }
+
   &-nav-wrapper {
     position: relative;
     display: inline-flex;
     overflow: hidden;
-    font-size: @tabs-nav-font-size;
 
     &&-has-scroll {
       > .@{tabs-prefix}-nav {
@@ -173,7 +204,6 @@
 
   &-card {
     > .@{tabs-prefix}-nav-wrapper {
-      font-size: @tabs-card-nav-font-size;
       > .@{tabs-prefix}-nav {
         z-index: 1;
         > .@{tabs-prefix}-nav-tab {

diff --git a/packages/components/tabs/style/themes/default.variable.less b/packages/components/tabs/style/themes/default.variable.less
@@ -3,12 +3,12 @@
 @tabs-active-color: @color-primary-d10;
 @tabs-disabled-color: @color-graphite-l10;
 
-@tabs-nav-font-size: @font-size-sm;
+@tabs-nav-font-size-md: var(--ix-font-size-md);
+@tabs-nav-font-size-lg: var(--ix-font-size-lg);
 @tabs-nav-background-color: @color-white;
 @tabs-nav-border-color: @color-graphite-l30;
 @tabs-nav-bottom-color: @color-graphite-l30;
 @tabs-card-nav-font-size: @font-size-md;
-@tabs-segment-nav-font-size: @font-size-sm;
 @tabs-segment-nav-disabled-background-color: @color-graphite-l40;
 @tabs-segment-nav-primary-active-background-color: @color-primary;
 @tabs-segment-nav-primary-active-text-color: @color-white;

diff --git a/packages/components/tabs/style/themes/seer.variable.less b/packages/components/tabs/style/themes/seer.variable.less
@@ -1 +1,4 @@
 @import './default.variable.less';
+
+@tabs-nav-font-size-md: var(--ix-font-size-sm);
+@tabs-nav-font-size-lg: var(--ix-font-size-md);