2.2.0 • Published 5 years ago
th-card v2.2.0
Thiqah Card Reusable Component
Thiqah card 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 card Reusable Component package run the following command line in your bash or command prompt
npm install th-card
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-card/vendors.js"></script>
<script type="text/javascript" src="node_modules/th-card/app.js"></script>
- in case you need to add any global style files such as bootstrap, be sure that you are injecting it inside BODY tag
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
- inside your HTML, be sure from passing all needed properties
<main>
<th-card
c-title="alert title here !"
c-image="image src"
c-actionPrim="1"
c-actionSec="1">
<p slot="c-body">
body will be here !!
</p>
</th-card>
</main>
- to integrate with the implemented component, listen to its events and update its data
var ThCard = function () {
this.element = document.querySelector("th-card");
this.events();
};
ThCard.prototype.events = function () {
this.element.addEventListener("cardActionPrim", this.cardactionPrim.bind(this));
this.element.addEventListener("cardActionSec", this.cardactionSec.bind(this));
};
ThCard.prototype.cardactionPrim = function (event) {
console.log(event)
};
ThCard.prototype.cardactionSec = function (event) {
console.log(event)
};
window.addEventListener("load", event => {
new ThCard();
});
Usage in Angular web project
- First, add vendors.js and app.js files into angular.json file.
"scripts": [
"node_modules/th-card/vendors.js",
"node_modules/th-card/app.js"
]
- Now, import CUSTOM_ELEMENTS_SCHEMA and NO_ERRORS_SCHEMA inside app.nodule.ts and add schemas to @NgModule
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.ts add
import { Component, ElementRef, NgZone } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
@ViewChild("card", { static: false }) card: ElementRef;
public isRtl: boolean;
data;
constructor(
private elementRef: ElementRef,
private _ngZone: NgZone) {}
preparecard() {
const mycard = this.card.nativeElement;
mycard.addEventListener('cardActionPrim', (event) => {
this._ngZone.run(() => this.data = console.log(event));
});
mycard.addEventListener('cardActionSec', (event) => {
this._ngZone.run(() => this.data = console.log(event));
});
}
ngAfterViewInit() {
this.preparecard();
}
}
- inside component.html add the custom element
<main>
<th-card
#card
c-title="alert title here !"
c-image="image src"
c-actionPrim="1"
c-actionSec="1">
<p slot="c-body">
body will be here !!
</p>
</th-card>
</main>
Component Properties
Property Name | Description | value |
---|---|---|
c-title | title for card | string |
c-image | src for image | string |
c-actionPrim | primary action | 0 or 1 |
c-actionSec | secondary action | 0 or 1 |
Events
Events Name | Description | return |
---|---|---|
cardactionPrim | for thr primary card action | JSON Object |
cardactionSec | for thr secondary card action | JSON Object |
License
THIQAH Frontend Team KSA