VvScrollUp Component

The VvScrollUp Component is a GSAP powered component that automatically handles the classic scroll to the top of a page functionality, and also by default hides itself when the page is scrolled fully to the top.

Import

To import a VvScrollUp Component installed by the vueventus CLI or vv-update CLI:

// ./src/components/SomeComponent.vue
import VvScrollUp from './vv/buttons/VvScrollUp.vue'

TIP

CLI installed components pass through VueVentus defaults via component props. Each prop default value can be customized globally by overriding VvConfig defaults in your app ./src/app.vv.ts file or singularly in a component instance.

Prop: buttonClasses

Type: String
Default: "rounded-full"

The VvScrollUp Component buttonClasses prop sets the underlying VvButton's Tailwind CSS classes.

Syntax

<VvScrollUp button-classes="rounded-full"/>

Prop: color

Type: String
Default: "primary"

The VvScrollUp Component color prop sets the underlying VvButton's palette color value (in conjunction with the palette prop value).

Syntax

<VvScrollUp color="primary"/>

Typing for Downstream Component Instances

Coming Soon!

Prop: debug

Type: Boolean
Default: false

The VvScrollUp Component debug prop toggles the debugging state of a component instance. When in debugging mode, each component instance prop value can be viewed through data-vv-scroll-up- prefixed HTML attributes.

Syntax

<VvScrollUp :debug="true"/>

Prop: fab

Type: Boolean
Default: true

The VvScrollUp Component fab prop sets the underlying VvButton's boolean fab value, which switches the base classes for the button to the fabSizes set of classes.

Syntax

<VvScrollUp :fab="true"/>

Prop:

Type: Boolean
Default: false

The VvScrollUp Component isVisible prop sets the visibility state of the component, which by default is false to allow the VvScrollUp component to animate into view once a user has scrolled a page. If the value of the isVisible prop is true, then the component won't animate in/out and will stay visible.

Syntax

<VvScrollUp :is-visible="false"/>

Prop: offsetMinimum

Type: Number
Default: 100

The VvScrollUp Component offsetMinimum prop sets threshold (in pixels) that determines when the VvScrollUp component will animate into view once a user has scrolled a page past the offsetMinimum value.

Syntax

<VvScrollUp :offset-minimum="100"/>

Prop: palette

Type: String
Default: "solid"

The VvScrollUp Component palette prop sets the underlying VvButton's color value (in conjunction with the color prop value).

Syntax

<VvScrollUp palette="solid"/>

Typing for Downstream Component Instances

Coming Soon!

Prop: size

Type: String
Default: "xs"

The VvScrollUp Component size prop sets the underlying VvButton's size value.

Syntax

<VvScrollUp size="xs"/>

Typing for Downstream Component Instances

Coming Soon!

Prop: title

Type: String
Default: "Scroll to Top"

The VvScrollUp Component title prop sets the underlying VvButton's title attribute value, which is shown to users that hover over the button without moving the cursor for a second or so, and is also accessible by screen readers.

Syntax

<VvScrollUp title="Scroll to Top"/>

Slot: #default

The VvScrollUp Component has a standard #default Vue slot to insert child elements/nodes into the component.

Syntax

<VvScrollUp>
    <VvFa icon="house"/>
</VvScrollUp>

Current Version:

v0.61.7