@one-platform/opc-back-to-top

Back to Top component that enables smooth scroll from the bottom of the page to the top of the page.

Usage no npm install needed!

<script type="module">
  import onePlatformOpcBackToTop from 'https://cdn.skypack.dev/@one-platform/opc-back-to-top';
</script>

README

opc-back-to-top Component 👋

Version Build Status Maintenance

A standardized web component based on Lit element for Red Hat One Platform back to top.

Usage

Default back-to-top

<opc-back-to-top></opc-back-to-top>
  • Back-to-top with reveal-at attribute, It reveals back to top once user scrolls upto specified pixels downwards.
<opc-back-to-top reveal-at="200"></opc-back-to-top>
  • Back-to-top with reveal-at attribute, It reveals back to top once user scrolls upto specified pixels downwards.
<opc-back-to-top reveal-at="200"></opc-back-to-top>
<opc-back-to-top></opc-back-to-top>

Slots

  • Back-to-top with default slot (optional) where users can pass icon and text if they like.
<opc-back-to-top>
  <button class="rh-text" tabindex="0">
    <svg xmlns='http://www.w3.org/2000/svg' width='20px' height='20px' viewBox='0 0 512 512'>
    <title>ionicons-v5-a</title>
    <polyline points='112 328 256 184 400 328' style='fill:none;stroke:#000;stroke-linecap:round;stroke-linejoin:round;stroke-width:48px'/>
    </svg>
    Go to Top
  </button>
</opc-back-to-top>

Attributes

reveal-at

  • It reveals back to top once user scrolls upto specified pixels downwards.

Install

npm install

Usage

Install opc-back-to-top

npm install --save @one-platform/opc-back-to-top 

For VanillaJS

  • Import component
import '@one-platform/opc-back-to-top';
  • Add component in html
<opc-back-to-top>
</opc-back-to-top>

For Angular

  • In your app.module include the CUSTOM_ELEMENTS_SCHEMA and import the component
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import '@one-platform/opc-back-to-top';

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
  ],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
  • Add component in any component html template
<opc-back-to-top>
</opc-back-to-top>

For React

  • Import the component in App.js
import '@one-platform/opc-back-to-top';
  • Add component in any component html render
<opc-back-to-top>
</opc-back-to-top>

Development server

  • Run development server
npm run dev opc-back-to-top

Build

npm run build opc-back-to-top

Run tests

npm run test

🤝 Contributors

👤 Anjnee K Sharma(anjnee.k.sharma@gmail.com)