diff --git a/src/tabs/demos/enUS/index.demo-entry.md b/src/tabs/demos/enUS/index.demo-entry.md index 0822a5a63ac..895e4ca5844 100644 --- a/src/tabs/demos/enUS/index.demo-entry.md +++ b/src/tabs/demos/enUS/index.demo-entry.md @@ -22,7 +22,7 @@ no-pane.vue update-bar-manually.vue bar-width.vue trigger.vue -position-debug.vue +placement.vue ``` ## API @@ -30,7 +30,7 @@ position-debug.vue ### Tabs Props | Name | Type | Default | Description | Version | -| --- | --- | --- | --- | --- | --- | --- | --- | +| --- | --- | --- | --- | --- | | addable | `boolean \| { disabled?: boolean }` | `false` | Whether to allow add tag. Only works when the tag's `type` is `card`. | | | animated | `boolean` | `false` | Whether to activate tab switching animation. It won't have effect if `placement` is `'left'` or `'right'`. | 2.27.0 | | bar-width | `number` | `undefined` | The width of the tab bar. | 2.25.0 | @@ -42,7 +42,7 @@ position-debug.vue | pane-style | `string \| object` | `undefined` | Style of the pane. | | | pane-wrapper-class | `string` | `undefined` | Class of the pane warpper. | NEXT_VERSION | | pane-wrapper-style | `string \| object` | `undefined` | Style of the pane warpper. | NEXT_VERSION | -| placement | `'left' | 'right' | 'top' | 'bottom'` | `'top'` | Placement of tabs. | NEXT_VERSION | +| placement | `'left' \| 'right' \| 'top' \| 'bottom'` | `'top'` | Placement of tabs. It won't work with `n-tabs` whose `type` is `'segment'`. | NEXT_VERSION | | tab-style | `string \| object` | `undefined` | Style of the tab. | | | tabs-padding | `number` | `0` | Left & right `padding` of the group of tabs. | | | trigger | `'click' \| 'hover'` | `'click'` | Trigger of activating a tab | 2.27.0 | diff --git a/src/tabs/demos/enUS/placement.demo.vue b/src/tabs/demos/enUS/placement.demo.vue new file mode 100644 index 00000000000..497d997c504 --- /dev/null +++ b/src/tabs/demos/enUS/placement.demo.vue @@ -0,0 +1,93 @@ + +# Tabs placement + + + + + diff --git a/src/tabs/demos/enUS/position-debug.demo.vue b/src/tabs/demos/enUS/position-debug.demo.vue deleted file mode 100644 index 7ce1174f46d..00000000000 --- a/src/tabs/demos/enUS/position-debug.demo.vue +++ /dev/null @@ -1,85 +0,0 @@ - -# Position - - - - diff --git a/src/tabs/demos/zhCN/index.demo-entry.md b/src/tabs/demos/zhCN/index.demo-entry.md index 3aa26d8e8e8..4555dcd988b 100644 --- a/src/tabs/demos/zhCN/index.demo-entry.md +++ b/src/tabs/demos/zhCN/index.demo-entry.md @@ -22,6 +22,7 @@ no-pane.vue update-bar-manually.vue bar-width.vue trigger.vue +placement.vue line-debug.vue style-inherit-debug.vue shadow-debug.vue @@ -29,7 +30,6 @@ unkeyed-debug.vue addable-debug.vue animation-debug.vue animationx-debug.vue -position-debug.vue ``` ## API @@ -37,7 +37,7 @@ position-debug.vue ### Tabs Props | 名称 | 类型 | 默认值 | 说明 | 版本 | -| --- | --- | --- | --- | --- | --- | --- | --- | +| --- | --- | --- | --- | --- | | addable | `boolean \| { disabled?: boolean }` | `false` | 是否允许添加标签，只在标签的 `type` 为 `card` 时生效 | | | animated | `boolean` | `false` | 标签页切换是否使用动画，当 `placement` 为 `'left'` 或 `'right'` 时不生效 | 2.27.0 | | bar-width | `number` | `undefined` | 标签条的宽度 | 2.25.0 | @@ -49,7 +49,7 @@ position-debug.vue | pane-style | `string \| object` | `undefined` | 面板的样式 | | | pane-wrapper-class | `string` | `undefined` | 面板容器的类名 | NEXT_VERSION | | pane-wrapper-style | `string \| object` | `undefined` | 面板容器的样式 | NEXT_VERSION | -| placement | `'left' | 'right' | 'top' | 'bottom'` | `'top'` | 标签的位置 | NEXT_VERSION | +| placement | `'left' \| 'right' \| 'top' \| 'bottom'` | `'top'` | 标签的位置，对于 `'segment'` 类型的 `n-tabs` 不生效 | NEXT_VERSION | | tab-style | `string \| object` | `undefined` | 标签的样式 | | | tabs-padding | `number` | `0` | 全部标签最左和最右的 `padding` | | | trigger | `'click' \| 'hover'` | `'click'` | 触发 tab 的方式 | 2.27.0 | diff --git a/src/tabs/demos/zhCN/placement.demo.vue b/src/tabs/demos/zhCN/placement.demo.vue new file mode 100644 index 00000000000..271e5fb33be --- /dev/null +++ b/src/tabs/demos/zhCN/placement.demo.vue @@ -0,0 +1,93 @@ + +# 标签页的位置 + + + + + diff --git a/src/tabs/demos/zhCN/position-debug.demo.vue b/src/tabs/demos/zhCN/position-debug.demo.vue deleted file mode 100644 index e0b92894083..00000000000 --- a/src/tabs/demos/zhCN/position-debug.demo.vue +++ /dev/null @@ -1,218 +0,0 @@ - -# Placement - - - - diff --git a/src/tabs/src/Tabs.tsx b/src/tabs/src/Tabs.tsx index 7486327b798..44a77bb447b 100644 --- a/src/tabs/src/Tabs.tsx +++ b/src/tabs/src/Tabs.tsx @@ -755,6 +755,7 @@ export default defineComponent({ ) } + const resolvedPlacement = isSegment ? 'top' : placement return (
@@ -774,7 +775,7 @@ export default defineComponent({ // other. adding a class will make it easy to write the // style. `${mergedClsPrefix}-tabs-nav--${type}-type`, - `${mergedClsPrefix}-tabs-nav--${placement}`, + `${mergedClsPrefix}-tabs-nav--${resolvedPlacement}`, `${mergedClsPrefix}-tabs-nav` ]} > @@ -823,7 +824,7 @@ export default defineComponent({ class={`${mergedClsPrefix}-tabs-nav-scroll-wrapper`} ref="scrollWrapperElRef" > - {['top', 'bottom'].includes(placement) ? ( + {['top', 'bottom'].includes(resolvedPlacement) ? ( {showPane && - (this.animated && (placement === 'top' || placement === 'bottom') ? ( + (this.animated && + (resolvedPlacement === 'top' || resolvedPlacement === 'bottom') ? (
- ) : ( - filterMapTabPanes( - tabPaneChildren, - this.mergedValue, - this.renderedNames - ) - ))} + ) : ( + filterMapTabPanes( + tabPaneChildren, + this.mergedValue, + this.renderedNames + ) + ))}
) }