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

Refactor ScrollTop and add types

pull/726/head
Cagatay Civici 2020-11-30 13:28:22 +03:00
parent c6c0388669
commit b9dcab5ec9
4 changed files with 29 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/components/scrolltop/ScrollTop.d.ts vendored
View File

@ -0,0 +1,10 @@
import Vue from 'vue';
declare class ScrollTo extends Vue {
target?: string;
threshold?: number;
icon?: boolean;
behavior?: boolean;
}
export default ScrollTo;

10
src/components/scrolltop/ScrollTop.vue
View File

@ -21,13 +21,17 @@ export default {
type: String,
default: 'window'
},
visiblePosition: {
threshold: {
type: Number,
default: 400
},
icon: {
type: String,
default: 'pi pi-chevron-up'
},
behavior: {
type: String,
default: 'smooth'
}
},
mounted() {
@ -47,11 +51,11 @@ export default {
let scrollElement = this.target === 'window' ? window : this.$el.parentElement;
scrollElement.scroll({
top: 0,
behavior: 'smooth'
behavior: this.behavior
});
},
checkVisibility(scrollY) {
if (scrollY > this.visiblePosition)
if (scrollY > this.threshold)
this.visible = true;
else
this.visible = false;

2
src/views/scrolltop/ScrollTopDemo.vue
View File

@ -28,7 +28,7 @@
Eget egestas purus viverra accumsan in nisl nisi. Suscipit adipiscing bibendum est ultricies integer.
Mattis aliquam faucibus purus in massa tempor nec.
</p>
<ScrollTop target="parent" :visiblePosition="100" class="custom-scrolltop" icon="pi pi-arrow-up" />
<ScrollTop target="parent" :threshold="100" class="custom-scrolltop" icon="pi pi-arrow-up" />
</ScrollPanel>
</div>
</div>

16
src/views/scrolltop/ScrollTopDoc.vue
View File

@ -18,11 +18,11 @@ import ScrollTop from 'primevue/scrolltop';
</code></pre>
<h5>Threshold</h5>
<p>When the vertical scroll position reaches a certain threshold, ScrollTop gets displays. This value is
defined with the <i>visiblePosition</i> property that defaults to 400.</p>
<p>When the vertical scroll position reaches a certain value, ScrollTop gets displayed. This value is
defined with the <i>threshold</i> property that defaults to 400.</p>
<pre v-code>
<code>
&lt;ScrollTop :visiblePosition="400" /&gt;
&lt;ScrollTop :threshold="200" /&gt;
</code></pre>
@ -56,7 +56,7 @@ import ScrollTop from 'primevue/scrolltop';
<td>Target of the ScrollTop, valid values are "window" and "parent".</td>
</tr>
<tr>
<td>visiblePosition</td>
<td>threshold</td>
<td>number</td>
<td>400</td>
<td>Defines the threshold value of the vertical scroll position of the target to toggle the visibility.</td>
@ -66,6 +66,12 @@ import ScrollTop from 'primevue/scrolltop';
<td>string</td>
<td>pi pi-chevron-up</td>
<td>Icon to display.</td>
</tr>
<tr>
<td>behavior</td>
<td>string</td>
<td>smooth</td>
<td>Defines the scrolling behavi, "smooth" adds an animation and "auto" scrolls with a jump.</td>
</tr>
</tbody>
</table>
@ -123,7 +129,7 @@ import ScrollTop from 'primevue/scrolltop';
Eget egestas purus viverra accumsan in nisl nisi. Suscipit adipiscing bibendum est ultricies integer.
Mattis aliquam faucibus purus in massa tempor nec.
&lt;/p&gt;
&lt;ScrollTop target="parent" :visiblePosition="100" class="custom-scrolltop" icon="pi pi-arrow-up"/&gt;
&lt;ScrollTop target="parent" :threshold="100" class="custom-scrolltop" icon="pi pi-arrow-up" /&gt;
&lt;/ScrollPanel&gt;
</template>
</code></pre>