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

Jump to bottom

feat(Tabs): add bottomLineMode props #968

Merged
merged 2 commits into from
Jul 18, 2023
Merged

feat(Tabs): add bottomLineMode props #968

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
7fffc99
feat(Tabs): add bottomLineMode props
anlyyao Jul 17, 2023
7f5cef5
fix(Tabs): resolved badgeProps invalid
anlyyao Jul 18, 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
22 changes: 0 additions & 22 deletions src/tabs/__test__/__snapshots__/demo.test.jsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -106,7 +106,6 @@ exports[`Tabs > Tabs badgeVue demo works fine 1`] = `

<div
class="t-tabs__track t-tabs__track--top"
style=""
/>
</div>
</div>
Expand Down Expand Up @@ -259,7 +258,6 @@ exports[`Tabs > Tabs contentVue demo works fine 1`] = `

<div
class="t-tabs__track t-tabs__track--top"
style=""
/>
</div>
</div>
Expand Down Expand Up @@ -405,7 +403,6 @@ exports[`Tabs > Tabs evenlyVue demo works fine 1`] = `

<div
class="t-tabs__track t-tabs__track--top"
style=""
/>
</div>
</div>
Expand Down Expand Up @@ -540,7 +537,6 @@ exports[`Tabs > Tabs evenlyVue demo works fine 1`] = `

<div
class="t-tabs__track t-tabs__track--top"
style=""
/>
</div>
</div>
Expand Down Expand Up @@ -710,7 +706,6 @@ exports[`Tabs > Tabs evenlyVue demo works fine 1`] = `

<div
class="t-tabs__track t-tabs__track--top"
style=""
/>
</div>
</div>
Expand Down Expand Up @@ -917,7 +912,6 @@ exports[`Tabs > Tabs evenlyVue demo works fine 1`] = `

<div
class="t-tabs__track t-tabs__track--top"
style=""
/>
</div>
</div>
Expand Down Expand Up @@ -1131,7 +1125,6 @@ exports[`Tabs > Tabs iconVue demo works fine 1`] = `

<div
class="t-tabs__track t-tabs__track--top"
style=""
/>
</div>
</div>
Expand Down Expand Up @@ -1434,7 +1427,6 @@ exports[`Tabs > Tabs isometricVue demo works fine 1`] = `

<div
class="t-tabs__track t-tabs__track--top"
style=""
/>
</div>
</div>
Expand Down Expand Up @@ -1571,7 +1563,6 @@ exports[`Tabs > Tabs mobileVue demo works fine 1`] = `

<div
class="t-tabs__track t-tabs__track--top"
style=""
/>
</div>
</div>
Expand Down Expand Up @@ -1706,7 +1697,6 @@ exports[`Tabs > Tabs mobileVue demo works fine 1`] = `

<div
class="t-tabs__track t-tabs__track--top"
style=""
/>
</div>
</div>
Expand Down Expand Up @@ -1876,7 +1866,6 @@ exports[`Tabs > Tabs mobileVue demo works fine 1`] = `

<div
class="t-tabs__track t-tabs__track--top"
style=""
/>
</div>
</div>
Expand Down Expand Up @@ -2083,7 +2072,6 @@ exports[`Tabs > Tabs mobileVue demo works fine 1`] = `

<div
class="t-tabs__track t-tabs__track--top"
style=""
/>
</div>
</div>
Expand Down Expand Up @@ -2425,7 +2413,6 @@ exports[`Tabs > Tabs mobileVue demo works fine 1`] = `

<div
class="t-tabs__track t-tabs__track--top"
style=""
/>
</div>
</div>
Expand Down Expand Up @@ -2605,7 +2592,6 @@ exports[`Tabs > Tabs mobileVue demo works fine 1`] = `

<div
class="t-tabs__track t-tabs__track--top"
style=""
/>
</div>
</div>
Expand Down Expand Up @@ -2775,7 +2761,6 @@ exports[`Tabs > Tabs mobileVue demo works fine 1`] = `

<div
class="t-tabs__track t-tabs__track--top"
style=""
/>
</div>
</div>
Expand Down Expand Up @@ -2945,7 +2930,6 @@ exports[`Tabs > Tabs mobileVue demo works fine 1`] = `

<div
class="t-tabs__track t-tabs__track--top"
style=""
/>
</div>
</div>
Expand Down Expand Up @@ -3133,7 +3117,6 @@ exports[`Tabs > Tabs mobileVue demo works fine 1`] = `

<div
class="t-tabs__track t-tabs__track--top"
style=""
/>
</div>
</div>
Expand Down Expand Up @@ -3332,7 +3315,6 @@ exports[`Tabs > Tabs mobileVue demo works fine 1`] = `

<div
class="t-tabs__track t-tabs__track--top"
style=""
/>
</div>
</div>
Expand Down Expand Up @@ -3514,7 +3496,6 @@ exports[`Tabs > Tabs mobileVue demo works fine 1`] = `

<div
class="t-tabs__track t-tabs__track--top"
style=""
/>
</div>
</div>
Expand Down Expand Up @@ -4093,7 +4074,6 @@ exports[`Tabs > Tabs sizeVue demo works fine 1`] = `

<div
class="t-tabs__track t-tabs__track--top"
style=""
/>
</div>
</div>
Expand Down Expand Up @@ -4275,7 +4255,6 @@ exports[`Tabs > Tabs sizeVue demo works fine 1`] = `

<div
class="t-tabs__track t-tabs__track--top"
style=""
/>
</div>
</div>
Expand Down Expand Up @@ -4440,7 +4419,6 @@ exports[`Tabs > Tabs statusVue demo works fine 1`] = `

<div
class="t-tabs__track t-tabs__track--top"
style=""
/>
</div>
</div>
Expand Down
9 changes: 9 additions & 0 deletions src/tabs/props.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,15 @@ export default {
type: Boolean,
default: true,
},
/** 激活下划线的模式*/
bottomLineMode: {
type: String as PropType<TdTabsProps['bottomLineMode']>,
default: 'fixed' as TdTabsProps['bottomLineMode'],
validator(val: TdTabsProps['theme']): boolean {
if (!val) return true;
return ['fixed', 'auto', 'full'].includes(val);
},
},
/** 组件尺寸 */
size: {
type: String as PropType<TdTabsProps['size']>,
Expand Down
1 change: 1 addition & 0 deletions src/tabs/tabs.en-US.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ name | type | default | description | required
animation | Object | - | Typescript：`TabAnimation` `type TabAnimation = { duration: number } & Record<string, any>`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/tabs/type.ts) | N
list | Array | - | Typescript：`Array<TdTabPanelProps>` | N
showBottomLine | Boolean | true | \- | N
bottomLineMode | String | fixed'| options：fixed/auto/full ｜ N
LeeJim marked this conversation as resolved.
Show resolved Hide resolved
size | String | medium | options：medium/large | N
spaceEvenly | Boolean | true | \- | N
sticky | Boolean | false | \- | N
Expand Down
3 changes: 2 additions & 1 deletion src/tabs/tabs.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@
animation | Object | - | 动画效果设置。其中 duration 表示动画时长。TS 类型：`TabAnimation` `type TabAnimation = { duration: number } & Record<string, any>`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/tabs/type.ts) | N
list | Array | - | 选项卡列表。TS 类型：`Array<TdTabPanelProps>` | N
showBottomLine | Boolean | true | 是否展示底部激活线条 | N
bottomLineMode | String | fixed | 激活下划线的模式。可选项：fixed/auto/full ｜ N
size | String | medium | 组件尺寸。可选项：medium/large | N
spaceEvenly | Boolean | true | 选项卡头部空间是否均分 | N
sticky | Boolean | false | 是否开启粘性布局 | N
Expand Down Expand Up @@ -50,7 +51,7 @@ value | String / Number | - | 选项卡的值，唯一标识。TS 类型：`TabV
--td-tab-track-color | @brand-color | -
--td-tab-track-radius | 4px | -
--td-tab-track-thickness | 3px | -
--td-tab-track-width | 16px | -
--td-tab-track-width | 16px | 当前激活 tab 下划线的宽度，仅在 bottomLineMode 为 'fixed' 时有效
--td-tab-nav-bg-color | @bg-color-container | -
--td-tab-item-active-color | @brand-color | -
--td-tab-item-color | @font-gray-1 | -
Expand Down
28 changes: 19 additions & 9 deletions src/tabs/tabs.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,6 +58,7 @@ import {
readonly,
Fragment,
watch,
CSSProperties,
} from 'vue';
import config from '../config';
import TabsProps from './props';
Expand All @@ -76,7 +77,6 @@ export default defineComponent({
props: TabsProps,
emits: ['update:value', 'update:modelValue'],
setup(props, context) {
const placement = ref('top');
const theme = computed(() => props.theme);
const spaceEvenly = computed(() => props.spaceEvenly);
const showBottomLine = computed(() => props.showBottomLine);
Expand Down Expand Up @@ -137,21 +137,31 @@ export default defineComponent({
const navScroll = ref<HTMLElement | null>(null);
const navWrap = ref<HTMLElement | null>(null);
const navLine = ref<HTMLElement | null>(null);
const lineStyle = ref('');
const lineStyle = ref();
const moveToActiveTab = () => {
if (navWrap.value && navLine.value && showBottomLine.value) {
const tab = navWrap.value.querySelector<HTMLElement>(`.${activeClass}`);
if (!tab) return;
const line = navLine.value;
if (placement.value === 'left') {
lineStyle.value = `transform: translateY(${tab.offsetTop}px);${
props.animation ? `transition-duration:${props.animation.duration}ms` : ''
}`;
const tabInner = tab.querySelector<HTMLElement>(`.${prefix}-badge`);
const style: CSSProperties = {};
if (props.bottomLineMode === 'auto') {
style.width = `${Number(tabInner?.offsetWidth)}px`;
style.transform = `translateX(${Number(tab?.offsetLeft) + Number(tabInner?.offsetLeft)}px)`;
} else if (props.bottomLineMode === 'full') {
style.width = `${Number(tab?.offsetWidth)}px`;
style.transform = `translateX(${Number(tab?.offsetLeft)}px)`;
} else {
lineStyle.value = `transform: translateX(${
Number(tab.offsetLeft) + Number(tab.offsetWidth) / 2 - line.offsetWidth / 2
}px);${props.animation ? `transition-duration:${props.animation.duration}ms` : ''}`;
style.transform = `translateX(${
Number(tab?.offsetLeft) + (Number(tab?.offsetWidth) - Number(line?.offsetWidth)) / 2
}px)`;
}

if (props.animation) {
style.transitionDuration = `${props.animation.duration}ms`;
}

lineStyle.value = style;
}
};

Expand Down
5 changes: 5 additions & 0 deletions src/tabs/type.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,11 @@ export interface TdTabsProps {
* @default true
*/
showBottomLine?: boolean;
/**
* 激活下划线的模式
* @default fixed
*/
bottomLineMode?: 'fixed' | 'auto' | 'full';
/**
* 组件尺寸
* @default medium
Expand Down