ADDAPPTABLES card
Craftsjs 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 | @craftsjs/card |
|---|---|
| 15 | 5.x |
| 13 | 4.x |
| 12 | 3.x |
| 11 | 2.x |
| 10 | 1.x |
npm i @craftsjs/card --S
Install peer dependencies
npm i
@craftsjs/core
@angular/material
@angular/animations
@angular/cdk --S
How to use
- Import the module CardModule
import { CardModule } from '@craftsjs/card';
@NgModule({
imports: [CardModule]
})
export class YourModule { }simple card
<craftsjs-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>
</craftsjs-card>Oval card
<craftsjs-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>
</craftsjs-card>- Finally, it is important to import the styles to the application
@import '~@craftsjs/core/craftsjs-grid.theme';
@import '~@angular/material/theming';
@import '~@craftsjs/card/craftsjs-card.theme';
$craftsjs-app-primary: mat-palette($mat-teal, 800);
$craftsjs-app-accent: mat-palette($mat-pink, 800, A100, 100);
$craftsjs-app-warn: mat-palette($mat-red);
$craftsjs-app-theme: mat-light-theme($craftsjs-app-primary, $craftsjs-app-accent, $craftsjs-app-warn);
$craftsjs-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($craftsjs-app-theme);
@include card($craftsjs-app-theme, $craftsjs-theme-variables);
}- Do not forget to put the theme-default class in the html body
<body class="theme-default"></body>