vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Refactor #1446

pull/1533/head
mertsincan 2021-09-01 11:11:11 +03:00
parent 2b3e461811
commit 214942a87b
1 changed files with 9 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/components/tabview/TabView.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<div :class="contentClasses"> <div :class="contentClasses">
<div class="p-tabview-nav-container"> <div class="p-tabview-nav-container">
<button v-if="scrollable && !backwardIsDisabled" :class="prevButtonClasses" @click="navBackward" type="button" v-ripple> <button v-if="scrollable && !backwardIsDisabled" ref="prevBtn" :class="prevButtonClasses" @click="navBackward" type="button" v-ripple>
<span class="pi pi-chevron-left"></span> <span class="pi pi-chevron-left"></span>
</button> </button>
<div ref="content" class="p-tabview-nav-content" @scroll="onScroll"> <div ref="content" class="p-tabview-nav-content" @scroll="onScroll">
@ -15,7 +15,7 @@
<li ref="inkbar" class="p-tabview-ink-bar"></li> <li ref="inkbar" class="p-tabview-ink-bar"></li>
</ul> </ul>
</div> </div>
<button v-if="scrollable && !forwardIsDisabled" :class="nextButtonClasses" @click="navForward" type="button" v-ripple> <button v-if="scrollable && !forwardIsDisabled" ref="nextBtn" :class="nextButtonClasses" @click="navForward" type="button" v-ripple>
<span class="pi pi-chevron-right"></span> <span class="pi pi-chevron-right"></span>
</button> </button>
</div> </div>
@ -125,15 +125,20 @@ export default {
event.preventDefault(); event.preventDefault();
}, },
getVisibleButtonWidths() {
const { prevBtn, nextBtn } = this.$refs;
return [prevBtn, nextBtn].reduce((acc, el) => el ? acc + DomHandler.getWidth(el) : acc, 0);
},
navBackward() { navBackward() {
const content = this.$refs.content; const content = this.$refs.content;
const width = DomHandler.getWidth(content); const width = DomHandler.getWidth(content) - this.getVisibleButtonWidths();
const pos = content.scrollLeft - width; const pos = content.scrollLeft - width;
content.scrollLeft = pos <= 0 ? 0 : pos; content.scrollLeft = pos <= 0 ? 0 : pos;
}, },
navForward() { navForward() {
const content = this.$refs.content; const content = this.$refs.content;
const width = DomHandler.getWidth(content); const width = DomHandler.getWidth(content) - this.getVisibleButtonWidths();
const pos = content.scrollLeft + width; const pos = content.scrollLeft + width;
const lastPos = content.scrollWidth - width; const lastPos = content.scrollWidth - width;