diff --git a/components/tabs/__tests__/__snapshots__/demo.test.js.snap b/components/tabs/__tests__/__snapshots__/demo.test.js.snap index b68436c83..5e586bad1 100644 --- a/components/tabs/__tests__/__snapshots__/demo.test.js.snap +++ b/components/tabs/__tests__/__snapshots__/demo.test.js.snap @@ -452,12 +452,12 @@ exports[`renders ./components/tabs/demo/position.vue correctly 1`] = `
-
+
Content of Tab 1
- -
+
diff --git a/components/tabs/demo/position.vue b/components/tabs/demo/position.vue index 51f8721c9..fe481d9d7 100644 --- a/components/tabs/demo/position.vue +++ b/components/tabs/demo/position.vue @@ -23,7 +23,7 @@ Tab's position: left, right, top or bottom. Will auto switch to `top` in mobile left right - + Content of Tab 1 Content of Tab 2 Content of Tab 3 diff --git a/components/tabs/index.en-US.md b/components/tabs/index.en-US.md index f6237d65f..c3115d0d1 100644 --- a/components/tabs/index.en-US.md +++ b/components/tabs/index.en-US.md @@ -22,7 +22,7 @@ Ant Design has 3 types of Tabs for different situations. | Property | Description | Type | Default | Version | | --- | --- | --- | --- | --- | | activeKey(v-model) | Current TabPane's key | string | - | | -| animated | Whether to change tabs with animation. Only works while `tabPosition="top"\|"bottom"` | boolean \| {inkBar:boolean, tabPane:boolean} | `true`, `false` when `type="card"` | | +| animated | Whether to change tabs with animation. Only works while tabPosition=`"top"` \| `"bottom"` | boolean \| {inkBar:boolean, tabPane:boolean} | `true`, `false` when `type="card"` | | | destroyInactiveTabPane | Whether destroy inactive TabPane when change tab | boolean | false | | | hideAdd | Hide plus icon or not. Only works while `type="editable-card"` | boolean | `false` | } | | size | preset tab bar size | `large` \| `default` \| `small` | `default` | | diff --git a/components/tabs/index.zh-CN.md b/components/tabs/index.zh-CN.md index 2abaccc32..c8a284fb5 100644 --- a/components/tabs/index.zh-CN.md +++ b/components/tabs/index.zh-CN.md @@ -25,7 +25,7 @@ Ant Design 依次提供了三级选项卡,分别用于不同的场景。 | 参数 | 说明 | 类型 | 默认值 | 版本 | | | --- | --- | --- | --- | --- | --- | | activeKey(v-model) | 当前激活 tab 面板的 key | string | 无 | | | -| animated | 是否使用动画切换 Tabs,在 \`tabPosition=top | bottom\` 时有效 | boolean \| {inkBar:boolean, tabPane:boolean} | true, 当 type="card" 时为 false | | +| animated | 是否使用动画切换 Tabs,在 tabPosition=`"top"` \| `"bottom"` 时有效 | boolean \| {inkBar:boolean, tabPane:boolean} | true, 当 type="card" 时为 false | | | centered | 标签居中展示 | boolean | false | 3.0 | | | destroyInactiveTabPane | 被隐藏时是否销毁 DOM 结构 | boolean | false | | | | hideAdd | 是否隐藏加号图标,在 `type="editable-card"` 时有效 | boolean | false | | | diff --git a/components/tabs/src/Tabs.tsx b/components/tabs/src/Tabs.tsx index d3f4612ec..25a287dca 100644 --- a/components/tabs/src/Tabs.tsx +++ b/components/tabs/src/Tabs.tsx @@ -155,8 +155,8 @@ const InternalTabs = defineComponent({ const { prefixCls, direction, size, rootPrefixCls } = useConfigInject('tabs', props); const rtl = computed(() => direction.value === 'rtl'); const mergedAnimated = computed(() => { - const { animated } = props; - if (animated === false) { + const { animated, tabPosition } = props; + if (animated === false || ['left', 'right'].includes(tabPosition)) { return { inkBar: false, tabPane: false,