Browse Source

add abp card header directive

pull/15836/head
Barış Can Yılmaz 4 years ago
parent
commit
26a75d5b1f
  1. 24
      npm/ng-packs/packages/theme-shared/src/lib/components/card/card.component.ts
  2. 22
      npm/ng-packs/packages/theme-shared/src/lib/components/card/card.module.ts

24
npm/ng-packs/packages/theme-shared/src/lib/components/card/card.component.ts

@ -1,12 +1,20 @@
import { Component, Directive, Input } from '@angular/core'; import { Component, Directive, Input } from '@angular/core';
@Directive({
selector: `abp-card-header, [abp-card-header], [abpCardHeader]`,
host: {
class: 'card-header',
},
})
export class CardHeader {}
@Directive({ @Directive({
selector: `abp-card-title, [abp-card-title], [abpCardTitle]`, selector: `abp-card-title, [abp-card-title], [abpCardTitle]`,
host: { host: {
class: 'card-title', class: 'card-title',
}, },
}) })
export class CardTitle{} export class CardTitle {}
@Directive({ @Directive({
selector: `abp-card-subtitle, [abp-card-subtitle], [abpCardSubtitle]`, selector: `abp-card-subtitle, [abp-card-subtitle], [abpCardSubtitle]`,
@ -14,7 +22,7 @@ export class CardTitle{}
class: 'card-subtitle', class: 'card-subtitle',
}, },
}) })
export class CardSubtitle{} export class CardSubtitle {}
@Directive({ @Directive({
selector: `abp-card-text, [abp-card-text], [abpCardText]`, selector: `abp-card-text, [abp-card-text], [abpCardText]`,
@ -22,7 +30,7 @@ export class CardSubtitle{}
class: 'card-text', class: 'card-text',
}, },
}) })
export class CardText{} export class CardText {}
@Directive({ @Directive({
selector: `abp-card-img-top, [abp-card-img-top], [abpCardImgTop]`, selector: `abp-card-img-top, [abp-card-img-top], [abpCardImgTop]`,
@ -30,7 +38,7 @@ export class CardText{}
class: 'card-img-top', class: 'card-img-top',
}, },
}) })
export class CardImgTop{} export class CardImgTop {}
@Directive({ @Directive({
selector: `abp-card-link, [abp-card-link], [abpCardLink]`, selector: `abp-card-link, [abp-card-link], [abpCardLink]`,
@ -38,14 +46,12 @@ export class CardImgTop{}
class: 'card-link', class: 'card-link',
}, },
}) })
export class CardLink{} export class CardLink {}
@Component({ @Component({
selector: 'abp-card', selector: 'abp-card',
template: ` template: ` <div class="card" [ngClass]="cardClass" [ngStyle]="cardStyle">
<div class="card" [ngClass]="cardClass" [ngStyle]="cardStyle"> <ng-content></ng-content>
<ng-content ></ng-content>
</div>`, </div>`,
}) })
export class CardComponent { export class CardComponent {

22
npm/ng-packs/packages/theme-shared/src/lib/components/card/card.module.ts

@ -1,13 +1,14 @@
import { CommonModule } from '@angular/common'; import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core'; import { NgModule } from '@angular/core';
import { CardBodyComponent } from './card-body.component'; import { CardBodyComponent } from './card-body.component';
import { import {
CardComponent, CardComponent,
CardImgTop, CardImgTop,
CardLink, CardLink,
CardSubtitle, CardSubtitle,
CardText, CardText,
CardTitle CardTitle,
CardHeader,
} from './card.component'; } from './card.component';
import { CardHeaderComponent } from './card-header.component'; import { CardHeaderComponent } from './card-header.component';
import { CardFooterComponent } from './card-footer.component'; import { CardFooterComponent } from './card-footer.component';
@ -22,13 +23,12 @@ const declarationsWithExports = [
CardText, CardText,
CardImgTop, CardImgTop,
CardLink, CardLink,
CardHeader,
]; ];
@NgModule({ @NgModule({
declarations: [ declarations: [...declarationsWithExports],
...declarationsWithExports,
],
imports: [CommonModule], imports: [CommonModule],
exports: [...declarationsWithExports], exports: [...declarationsWithExports],
}) })
export class CardModule { } export class CardModule {}

Loading…
Cancel
Save