Vitral 0.2
Diversos

ScrollTop

Um botão de voltar ao topo de uma página longa ou de um elemento com rolagem, que aparece depois de um limite.

Testado com WAI-ARIA

Importação

main.ts
import { ScrollTop } from '@vitral/vue';

Num elemento

Line 1: scroll down and the button appears at the bottom of this box.

Line 2: scroll down and the button appears at the bottom of this box.

Line 3: scroll down and the button appears at the bottom of this box.

Line 4: scroll down and the button appears at the bottom of this box.

Line 5: scroll down and the button appears at the bottom of this box.

Line 6: scroll down and the button appears at the bottom of this box.

Line 7: scroll down and the button appears at the bottom of this box.

Line 8: scroll down and the button appears at the bottom of this box.

Line 9: scroll down and the button appears at the bottom of this box.

Line 10: scroll down and the button appears at the bottom of this box.

Line 11: scroll down and the button appears at the bottom of this box.

Line 12: scroll down and the button appears at the bottom of this box.

Line 13: scroll down and the button appears at the bottom of this box.

Line 14: scroll down and the button appears at the bottom of this box.

Line 15: scroll down and the button appears at the bottom of this box.

Line 16: scroll down and the button appears at the bottom of this box.

Line 17: scroll down and the button appears at the bottom of this box.

Line 18: scroll down and the button appears at the bottom of this box.

Line 19: scroll down and the button appears at the bottom of this box.

Line 20: scroll down and the button appears at the bottom of this box.

<script setup lang="ts">import { ScrollTop } from '@vitral/vue';</script> <template>    <div tabindex="0" aria-label="Long text" style="position: relative; height: 14rem; width: 100%; overflow: auto; border: 1px solid var(--vt-content-border-color); border-radius: 8px; padding: 1rem">        <p v-for="n in 20" :key="n">Line {{ n }}: scroll down and the button appears at the bottom of this box.</p>        <ScrollTop target="parent" :threshold="100" />    </div></template>

API

Lido de packages/vue/src/components/ScrollTop/types.ts, então diz o que o componente aceita de fato.

Props

NomeTipoDescrição
target'window' | 'parent'O que ele rola: a página (o padrão) ou o elemento em que está.
thresholdnumberQuanto descer, em pixels, antes de aparecer. O padrão é 400.
iconIconPropO padrão é uma seta para cima.
behavior'smooth' | 'auto'`'smooth'` (o padrão) ou `'auto'`. Com movimento reduzido, sempre salta.
severitySeverity—

Mais pt, dt e unstyled de BaseProps; veja pass-through e modo sem estilo.

Emits

EventoPayloadDescrição
clickevent: MouseEvent—