当前位置：文江博客 Node Package Readme @addapptables/card 中文文档教程

@addapptables/card 中文文档教程

发布于 4 年前浏览 5 项目主页更新于 2 年前

ADDAPPTABLES card

ADAPTABLES card 是一个角度库

查看演示

示例代码

Getting Started

首先，让我们通过 npm 安装包：

选择与您的 Angular 版本对应的版本：

Angular	@addapptables/card
8	2.x
7	1.x

npm i @addapptables/card --S

安装对等依赖

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

How to use

Import the module CardModule

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

项simple card

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

Oval card

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

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

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

$addapptable-app-primary: mat-palette($mat-teal, 800);
$addapptable-app-accent:  mat-palette($mat-pink, 800, A100, 100);
$addapptable-app-warn: mat-palette($mat-red);
$addapptable-app-theme: mat-light-theme($addapptable-app-primary, $addapptable-app-accent, $addapptable-app-warn);
$addapptable-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($addapptable-app-theme);
    @include addapptable-card($addapptable-app-theme, $addapptable-theme-variables);
}

Do not forget to put the theme-default class in the html body

<body class="theme-default"></body>

原文

ADDAPPTABLES card

ADAPTABLES card is a library for angular

See demo

Example code

Getting Started

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

Choose the version corresponding to your Angular version:

Angular	@addapptables/card
8	2.x
7	1.x

npm i @addapptables/card --S

Install peer dependencies

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

How to use

Import the module CardModule

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

simple card

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

Oval card

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

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

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

$addapptable-app-primary: mat-palette($mat-teal, 800);
$addapptable-app-accent:  mat-palette($mat-pink, 800, A100, 100);
$addapptable-app-warn: mat-palette($mat-red);
$addapptable-app-theme: mat-light-theme($addapptable-app-primary, $addapptable-app-accent, $addapptable-app-warn);
$addapptable-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($addapptable-app-theme);
    @include addapptable-card($addapptable-app-theme, $addapptable-theme-variables);
}

Do not forget to put the theme-default class in the html body

<body class="theme-default"></body>

友情链接

文江博客

@addapptables/card 中文文档教程

ADDAPPTABLES card

Getting Started

How to use

ADDAPPTABLES card

Getting Started

How to use

你可能也喜欢

友情链接