说明:使用angular实现grid效果,支持文字图片多条数据展示
效果图:
step1:
<mat-grid-list cols="2" rowHeight="2:1">
<mat-grid-tile *ngFor="let course of courses">{{ course }}</mat-grid-tile>
</mat-grid-list>
<mat-grid-list style="padding-top: 30px" cols="3" rowHeight="2:1">
<mat-grid-tile *ngFor="let prodotu of prodotus">
<mat-card>
<mat-card-header>
<mat-card-title>{{ prodotu.task }}</mat-card-title>
</mat-card-header>
<mat-card-content>
<img ngSrc="{{prodotu?.icon}}" width="50" height="50" alt="">
</mat-card-content>
<p>{{ prodotu.description }}</p>
</mat-card>
<p></p>
</mat-grid-tile>
</mat-grid-list>
step2:
mat-grid-tile {
background: lightblue;
}
mat-card {
background: red;
width: 50%;
}
step3:
import {Component, OnInit} from '@angular/core';
import {MatGridListModule} from '@angular/material/grid-list';
import {
MatCard,
MatCardActions,
MatCardContent,
MatCardHeader,
MatCardImage,
MatCardTitle
} from '@angular/material/card';
import {MatDivider} from '@angular/material/divider';
import {MatButton} from '@angular/material/button';
import {MatTooltip} from '@angular/material/tooltip';
import {NgForOf, NgOptimizedImage} from '@angular/common';
@Component({
selector: 'app-home',
standalone: true,
imports: [MatGridListModule, MatCard, MatCardHeader, MatCardContent, MatCard, MatCardTitle, MatCardContent, MatDivider, MatCardActions, MatButton, MatTooltip, NgForOf, MatCardImage, NgOptimizedImage],
templateUrl: './home.component.html',
styleUrl: './home.component.css'
})
export class HomeComponent implements OnInit{
todos: Todo[] = [];
dialogData: Todo = {task: '', description: '', icon: ''};
courses:number[]=[1,2,3,4,5,6,7,8,9,10,11,12]
prodotus :Todo[]=[]
ngOnInit(): void {
this.prodotus[0] = {task: '101', description: '火箭少女',icon: 'http://e.hiphotos.baidu.com/image/pic/item/a1ec08fa513d2697e542494057fbb2fb4316d81e.jpg'};
this.prodotus[1] = {task: '102', description: '黄金木乃伊',icon: 'http://e.hiphotos.baidu.com/image/pic/item/a1ec08fa513d2697e542494057fbb2fb4316d81e.jpg'};
this.prodotus[2] = {task: '103', description: '螳螂',icon: 'http://e.hiphotos.baidu.com/image/pic/item/a1ec08fa513d2697e542494057fbb2fb4316d81e.jpg'};
this.prodotus[3] = {task: '104', description: '雪山精英',icon: 'http://e.hiphotos.baidu.com/image/pic/item/a1ec08fa513d2697e542494057fbb2fb4316d81e.jpg'};
this.prodotus[4] = {task: '105', description: '特战先锋',icon: 'http://e.hiphotos.baidu.com/image/pic/item/a1ec08fa513d2697e542494057fbb2fb4316d81e.jpg'};
console.log(this.prodotus)
console.log(this.courses)
console.log(this.todos)
console.log(this.dialogData)
}
goToRole(name:string){
console.log(name)
}
}
interface Todo {
icon:string;
task: string;
description: string;
}
end