1.5.0 • Published 5 years ago
th-spinner v1.5.0
Thiqah Spinner Reusable Component
Thiqah Spinner Reusable Component is a lit-element web component that developed by Thiqah Frontend Team
Installation
- 1- configure .npmrc create .npmrc file inside your project and add thiqah NPM registry on thiqah TFS to allow your machine from installing our NPM package.
registry=https://tf.thiqah.sa/tfs/DefaultCollection/_packaging/Thiqah.ReusableComponent.FrontEnd/npm/registry/
always-auth=true
- 2- install package: to install Spinner Reusable Component package run the following command line in your bash or command prompt
npm install th-spinner
Usage in regular web project
Static pages any none JS framework inside your html file,
- Add vendor and app JS Files at the end of BODY tag:
<script type="text/javascript" src="node_modules/th-spinner/vendors.js"></script>
<script type="text/javascript" src="node_modules/th-spinner/app.js"></script>
- Add spinner.css file in your header.
<link rel="stylesheet" rel="node_modules/th-spinner/spinner.css" />
- inside your HTML, be sure from passing all needed properties
<main>
<th-spinner s-img="loader-img-path"></th-spinner>
</main>
Usage in Angular web project
- First, add vendors.js and app.js files into angular.json file.
"scripts": [
"node_modules/th-spinner/vendors.js",
"node_modules/th-spinner/app.js"
]
- add spinner.css file inside angular.json styles.
"styles": [
"node_modules/th-spinner/spinner.css"
]
- Now, import **CUSTOM_ELEMENTS_SCHEMA** and **NO_ERRORS_SCHEMA** inside app.nodule.ts and add schemas to @NgModule
```typescript
import { CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA } from '@angular/core';
@NgModule({
imports: [
BrowserModule,
],
declarations: [],
providers: [],
bootstrap: [AppComponent],
schemas: [
CUSTOM_ELEMENTS_SCHEMA,
NO_ERRORS_SCHEMA
]
})
- inside component.html add the custom element
<main>
<th-spinner s-img="loader-img-path"></th-spinner>
</main>
Component Properties
1- s-img Property:-
- Take STRING value.
- Default Value => MCI Image if you did not ptha any image.
- Value Must be an img path
License
THIQAH Frontend Team KSA
1.5.0
5 years ago