README
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(anjnee.k.sharma@gmail.com)