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

opc-back-to-top Component 👋

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([e-mail])