gpt4 book ai didi

html - 使用 Angular 中的 ngFor 创建的具有不同样式的样式卡

转载 作者:太空宇宙 更新时间:2023-11-04 06:14:31 25 4
gpt4 key购买 nike

所以我想做的是将不同的样式应用于在 Angular 中使用 ngFor 创建的卡片。

现在它看起来像这样: Current look

我的目标是为每张卡片设置不同的样式。由于它是使用 ngFor 循环创建的,因此我只能为所有这些更改样式。

然后我设法为每个卡片元素分配一个类:

<div *ngFor="let module of modules" class="{{module.name}}">

之后我在 CSS 中应用了样式:

div.Rekrutacja {
background-color: rgb(1, 1, 1);
}

这部分起作用了。它选择了第一个元素,但我无法真正修改它。我将背景颜色设置为黑色,这就是我得到的:

enter image description here

所以它只是应用于某个区域(我不知道它是什么区域),我无法进入实际的垫卡以将其与其他区域分开。

HTML:

    <div class="flex-container">
<div *ngFor="let module of modules" class="{{module.name}}">
<mat-card matRipple [matRippleColor]="white" class="flex-items hvr-reveal" *ngxPermissionsOnly="module.permissionsRequired">
<span routerLink={{module.routing}}>
<mat-card-header>
<mat-card-title>
<h1>
<p style="text-align: center;">
{{module.name}}
</p>
</h1>
</mat-card-title>
</mat-card-header>
<div class="mat-icon-card">
<p style="text-align: center">
<mat-icon>{{module.icon}}</mat-icon>
</p>
</div>
<mat-divider></mat-divider>
<mat-card-content>
<h3>
<p style="text-align: center">
{{module.description}}
</p>
</h3>
</mat-card-content>
</span>
</mat-card>
</div>
</div>

CSS:

.mat-card {
background-color: rgba(255, 255, 255, 0.7);
}

div.Rekrutacja {
background-color: rgb(1, 1, 1);
}

TS:

modules: any = [
{
name: 'Rekrutacja',
icon: 'group',
description: 'Moduł obsługi działu rekrutacji. Zarządzanie kandydatami.',
routing: '/recruitment',
permissionsRequired: [CONSTS.permissionCodes.accessRecruitmentModule]
},
{
name: 'Sprzedaż',
icon: 'work',
description: 'Moduł obsługi działu sprzedaży. Zarządzenie firmami, osobami kontaktowymi i leadami.',
routing: '/sales',
permissionsRequired: [CONSTS.permissionCodes.accessSalesModule]
},
{
name: 'Ustawienia',
icon: 'settings',
description: 'Moduł panelu administracyjnego. Zarządzanie użytkownikami i ustawieniami aplikacji.',
routing: '/admin-panel',
permissionsRequired: [CONSTS.permissionCodes.accessAdminPanelModule]
},
];

最佳答案

而不是定位 <div>包装 <mat-card>这将导致背景颜色应用于 <div> , 瞄准实际 <mat-card>各自的 <div> :

div.Rekrutacja .mat-card {
background-color: rgb(1, 1, 1);
}

div.Sprzedaż .mat-card {
background-color: blue;
}

div.Ustawienia .mat-card {
background-color: yellow;
}

这是一个简化的 example在行动中。

希望对您有所帮助!

关于html - 使用 Angular 中的 ngFor 创建的具有不同样式的样式卡,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56114064/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com