Angular Material基础卡部分

Angular Material是一个由谷歌开发的UI组件库，以便Angular开发人员能够以一种结构化和响应式的方式开发现代应用程序。通过使用这个库，我们可以大大增加终端用户的用户体验，从而为我们的应用程序赢得人气。这个库包含了现代的即用型元素，可以直接使用，只需最少或没有额外的代码。

它<mat-card>是一个内容的容器，可以用来插入媒体、文本和动作到单一主题的背景。设计卡片的基本要求只是一个<mat-card>有一些内容的元素，它将被用来建立简单的卡片。

语法:

<mat-card> Content </mat-card>

这个元素有开头标签，后面是内容或一些代码，最后是结束标签。Angular Material为该<mat-card>元素提供了大量的预设部分，这些预设部分在<mat-card>下面给出。

上述元素主要用于预先造型的内容容器，而不是使用任何额外的API。然而，与<mat-card-actions>的align属性<mat-card-actions>主要用于将动作定位在容器的 “开始 “或 “结束”。

安装语法:

为了在Angular Material中使用Basic Card Section，我们必须在本地机器上安装Angular CLI，这将有助于添加和配置Angular material库。满足所需条件后，在Angular CLI上键入以下命令。

ng add @angular/material

详细的安装过程请参考在Angular应用程序中添加Angular材料组件的文章。

项目结构:

安装成功后，项目结构将如下所示。

例子：下面的例子说明了Angular材料卡的实现。

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { FormsModule } from "@angular/forms";
  
import { AppComponent } from "./app.component";
import { MatCardModule } from "@angular/material/card";
import { MatButtonModule } from "@angular/material/button";
  
@NgModule({
  imports: 
  [BrowserModule, 
   FormsModule, 
   MatCardModule, 
   MatButtonModule
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent],
})
export class AppModule {}

@import "~material-icons/iconfont/material-icons.css";
p {
  font-family: "Lato", sans-serif;
  text-align: justify;
}
.example-card {
  max-width: 450px;
  margin: 10px;
}
  
mat-card-subtitle {
  font-size: 18px;
}
  
mat-card-title {
  color: green;
  font-size: 55px;
  justify-content: center;
  display: flex;
}

<mat-card class="example-card">
    <mat-card-header>
        <mat-card-title>GeeksforGeeks</mat-card-title>
        <mat-card-subtitle> 
            One stop solution for all CS Subjects 
        </mat-card-subtitle>
    </mat-card-header>
    <mat-card-content>
        <p>
            With the idea of imparting programming 
            knowledge, Mr. Sandeep Jain, an IIT Roorkee 
            alumnus started a dream, GeeksforGeeks. 
            Whether programming excites you or you feel 
            stifled, wondering how to prepare for 
            interview questions or how to ace data 
            structures and algorithms, GeeksforGeeks 
            is a one-stop solution. With every tick of 
            time, we are adding arrows in our quiver.
            From articles on various computer science 
            subjects to programming problems for practice,
            from basic to premium courses, from technologies
            to entrance examinations, we have been building
            ample content with superior quality. In a short
            span, we have built a community of 1 Million+ 
            Geeks around the world, 20,000+ Contributors and
            500+ Campus Ambassador in various colleges across
            the nation. Our success stories include a lot of
            students who benefitted in their placements and 
            landed jobs at tech giants. Our vision is to 
            build a gigantic network of geeks and we are 
            only a fraction of it yet.
        </p>
  
    </mat-card-content>
    <mat-card-actions>
        <button mat-button style=
                "background-color:blue; 
                 color:white"> 
            LIKE 
        </button>
        <button mat-button style=
                "background-color:green; 
                 color:white">
            SHARE 
        </button>
    </mat-card-actions>
</mat-card>

import { Component } from '@angular/core';
  
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
}

输出: