کنترل Card در انگولار متریال 7 – آموزش انگولار متریال

دوشنبه ۸ شهریور ۱۴۰۰
بازدید ۶۴۰ نفر
یعثوب سیفی زاده
(10 امتیاز از 2 رای)
Loading...

تصویر angular-material-7-card_6382 کنترل Card در انگولار متریال 7 – آموزش انگولار متریال

کنترل Card در انگولار متریال

یک دستورالعمل انگولار است که به منظور ایجاد کنترل Card با استایل متریال دیزاین مورد اسفتاده قرار می گیرد.

بخش های یک Card:

: بخش مربوط به عنوان را نمایش می دهد.
: بخش مربوط به عنوان ثانویه را نمایش می دهد.
: بخش مربوط به هدر را نمایش می دهد که دو مورد بالا در آن قرار می گیرند.
: بخش مربوط به محتوا را نمایش می دهد.
: بخش مربوط به دکمه ها یا Action ها را نمایش می دهد.
: بخش مربوط به فوتر را نمایش می دهد.

در این بخش چگونگی استفاده از این دستورالعمل را با یک مثال ساده بررسی خواهیم کرد.

ایجاد برنامه انگولار

در ادامه برنامه ای که در بخش ایجاد پروژه در انگولار ایجاد کرده بودیم را برای استفاده از کنترل تغییر می دهیم.

محتوای فایل app.module.ts را مانند نمونه زیر تغییر دهید:

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

import { BrowserModule } from '@angular/platform-browser';

import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

import {BrowserAnimationsModule} from '@angular/platform-browser/animations';

import {MatCardModule, MatButtonModule} from '@angular/material'

import {FormsModule, ReactiveFormsModule} from '@angular/forms';

@NgModule({

declarations: [

AppComponent

imports: [

BrowserModule,

BrowserAnimationsModule,

MatCardModule, MatButtonModule,

FormsModule,

ReactiveFormsModule

providers: [],

bootstrap: [AppComponent]

})

export class AppModule { }

محتوای فایل app.component.css:

.tp-card {
   max-width: 400px;
}
.tp-header-image {
   background-image: url('https://www.tutorialspoint.com/materialize/src/html5-mini-logo.jpg');
   background-size: cover;
}

.tp-card {

max-width: 400px;

}

.tp-header-image {

background-image: url('https://www.tutorialspoint.com/materialize/src/html5-mini-logo.jpg');

background-size: cover;

}

محتوای فایل app.component.html:

<mat-card class = "tp-card">
   <mat-card-header>
      <div mat-card-avatar class = "tp-header-image"></div>
      <mat-card-title>HTML5</mat-card-title>
      <mat-card-subtitle>HTML Basics</mat-card-subtitle>
   </mat-card-header>
   <img mat-card-image src = "https://www.tutorialspoint.com/materialize/src/html5-mini-logo.jpg" alt = "Learn HTML5">
   <mat-card-content>
      <p>
         HTML5 is the next major revision of the HTML standard superseding
         HTML 4.01, XHTML 1.0, and XHTML 1.1. HTML5 is a standard for
         structuring and presenting content on the World Wide Web.
      </p>
   </mat-card-content>
   <mat-card-actions>
      <button mat-button>LIKE</button>
      <button mat-button>SHARE</button>
   </mat-card-actions>
</mat-card>