@ngartifex/card NPM

ADDAPPTABLES card

ngartifex card is a library for angular

Getting Started

To get started, let's install the package through npm:

Choose the version corresponding to your Angular version:

Angular	@ngartifex/card
13	4.x
12	3.x
11	2.x
10	1.x

npm i @ngartifex/card --S

Install peer dependencies

npm i
@ngartifex/core
@angular/material
@angular/animations
@angular/cdk --S

How to use

Import the module CardModule

import { CardModule } from '@ngartifex/card';
@NgModule({
  imports: [CardModule]
})
export class YourModule { }

simple card

<ngartifex-card>
  <card-header>
    <card-header-linear>
      <card-title>
        <mat-icon matSuffix>horizontal_split</mat-icon>
        <span>Simple card</span>
      </card-title>
    </card-header-linear>
  </card-header>
  <mat-divider></mat-divider>
  <card-body>
    // custom component
  </card-body>
</ngartifex-card>

Oval card

<ngartifex-card>
  <card-header>
    <card-header-oval>
      <card-title>
        <mat-icon matSuffix>horizontal_split</mat-icon>
        <span>Oval card</span>
      </card-title>
    </card-header-oval>
  </card-header>
  <card-body>
    // custom component
  </card-body>
</ngartifex-card>

Finally, it is important to import the styles to the application

@import '~@ngartifex/core/_ngartifex-grid.theme';
@import '~@angular/material/theming';
@import '~@ngartifex/card/_ngartifex-card.theme';

$ngartifex-app-primary: mat-palette($mat-teal, 800);
$ngartifex-app-accent:  mat-palette($mat-pink, 800, A100, 100);
$ngartifex-app-warn: mat-palette($mat-red);
$ngartifex-app-theme: mat-light-theme($ngartifex-app-primary, $ngartifex-app-accent, $ngartifex-app-warn);
$ngartifex-theme-variables: (
    text: white,
    border-radius: 5px,
    color-blue: #20a9d2,
    color-success: #5cb85c,
    color-info: #5bc0de,
    color-warning: #e09d3d,
    color-danger: #d43934,
    gray-color: #696868
);
@include mat-core();
body.theme-default {
    @include angular-material-theme($ngartifex-app-theme);
    @include card($ngartifex-app-theme, $ngartifex-theme-variables);
}