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, type: String,
default: 'window' default: 'window'
}, },
visiblePosition: { threshold: {
type: Number, type: Number,
default: 400 default: 400
}, },
icon: { icon: {
type: String, type: String,
default: 'pi pi-chevron-up' default: 'pi pi-chevron-up'
},
behavior: {
type: String,
default: 'smooth'
} }
}, },
mounted() { mounted() {
@ -47,11 +51,11 @@ export default {
let scrollElement = this.target === 'window' ? window : this.$el.parentElement; let scrollElement = this.target === 'window' ? window : this.$el.parentElement;
scrollElement.scroll({ scrollElement.scroll({
top: 0, top: 0,
behavior: 'smooth' behavior: this.behavior
}); });
}, },
checkVisibility(scrollY) { checkVisibility(scrollY) {
if (scrollY > this.visiblePosition) if (scrollY > this.threshold)
this.visible = true; this.visible = true;
else else
this.visible = false; 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. Eget egestas purus viverra accumsan in nisl nisi. Suscipit adipiscing bibendum est ultricies integer.
Mattis aliquam faucibus purus in massa tempor nec. Mattis aliquam faucibus purus in massa tempor nec.
</p> </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> </ScrollPanel>
</div> </div>
</div> </div>

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

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