參考圖片
-> 看過我的參考圖片
->在那張圖片中，我采用了一個 for 回圈（用于創建盒子設計）并在上面制作了該設計
-> 但我想使用一個 HTML 類名更改所有框的背景顏色和邊框顏色（如圖所示）
->每個盒子的邊框顏色和背景顏色應該不同。
-> 看看影像中的第二個框（貸款），我們可以看到作物貸款管理員，但在其他框中，只有會員，如何為此設定條件？
->并且在所有框中的箭頭圖示僅在第一行中存在如何為此設定條件？
->怎么做？檢查我的代碼我對所有需要使用回圈和系結名稱、邊框顏色和背景顏色進行迭代的所有框都使用了單獨的 div。
html
<mat-card class="mat mr-4 ml-5 p-3" fxLayout="column" fxFlex>
<div fxLayout="row wrap" fxFlex fxLayoutGap="20px">
<ng-container *ngFor="let item of items">
<!-- all-items -->
<div fxFlex="calc(33.3% - 20px)" class="m-1 pt-3">
<div fxLayout class="cart-styling">
<div class="overview-cart">
<div class="ml-5 mt-4 heading-text">{{item?.title}}</div>
</div>
<img class="pr-5 mt-4" style="width: 90px;" alt="customer_icon" src="assets/icons/firsticon.png">
</div>
<div class="content pl-3">
<div>
<h6 fxLayoutAlign="space-between none" class="pb-1 pt-2 main-line border-bottom"> Members <mat-icon class="arrow-icon">arrow_right_alt</mat-icon> <span class="mr-4 value-color">1000</span></h6>
<h6 fxLayoutAlign="space-between none" class="pb-1 line border-bottom"> Non-Members <span class="mr-4 value-color">200</span></h6>
<h6 fxLayoutAlign="space-between none" class="pb-1 line border-bottom"> Traders <span class="mr-4 value-color">250</span></h6>
<h6 fxLayoutAlign="space-between none" class="pb-1 line border-bottom"> Employee <span class="mr-4 value-color">40</span></h6>
<h6 fxLayoutAlign="space-between none" class="pb-1 line border-bottom">-</h6>
<h6>-</h6>
</div>
</div>
</div>
<!-- /all-items -->
</ng-container>
</div>
</mat-card>
CSS
.overview-cart {
position: relative;
width: calc(100% - 80px);
background-color: #5f7dff;
overflow: hidden;
&:after {
content: "";
position: absolute;
right: -175px;
top: 0;
border-width: 153px;
border-style: solid;
border-color: transparent;
border-top-color: #fff;
z-index: 99;
transform: rotate(19deg);
}
}
.cart-styling {
width: 100%;
justify-content: center;
height: 30%;
border: 1px solid #5f7dff;
}
.heading-text {
font-size: 18px;
font-weight: normal;
color: #fff;
}
img {
width: 90px;
height: min-content;
}
.mat {
height: auto;
}
.line {
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
font-size: 14px;
}
.main-line {
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
font-size: 14px;
color: #0b4983;
}
.arrow-icon {
line-height: 0.8;
color: #0b4983;
margin-right: 75%;
}
.value-color {
color: #065a3d;
}
.content {
background-color: #f7f7f9;
}
ts檔案
items: any[]= [
{
id : 0,
title: 'Customer',
submodules: {
members: 1000,
non_members: 200,
traders: 250,
employees: 40
}
},
{
id: 1,
title: 'Loans',
submodules: {
Crop_loan_admin: 1000,
non_members: 200,
traders: 250,
employees: 40
}
},
{
id: 2,
title: 'Insurance',
submodules: {
members: 1000,
non_members: 200,
traders: 250,
employees: 40
}
},
// ]
// lists: any[]=[
{
id: 3,
title: 'Inventory',
submodules: {
members: 1000,
non_members: 200,
traders: 250,
employees: 40
}
},
{
id: 4,
title: 'Accounts',
submodules: {
members: 1000,
non_members: 200,
traders: 250,
employees: 40
}
},
{
id: 5,
title: 'Masters',
submodules: {
members: 1000,
non_members: 200,
traders: 250,
employees: 40
}
},
]
uj5u.com熱心網友回復：
將您的顏色存盤為每個的屬性 item
{
id : 0,
title: 'Customer',
theme : "red", // for example
submodules: {
members: 1000,
non_members: 200,
traders: 250,
employees: 40
}
},
然后ngStyl在 html 檔案中使用（檢查正確的 div 以放置 ngStyle
...
<ng-container *ngFor="let item of items">
<!-- all-items -->
<div fxFlex="calc(33.3% - 20px)" class="m-1 pt-3" [ngStyle]="{'background-color': item.theme, 'border-color': item.theme}">
<div fxLayout class="cart-styling">
<div class="overview-cart">
...
uj5u.com熱心網友回復：
你不能用一css節課來做到這一點。但你可以這樣做：
theme為您的物件添加顏色：
items: any[]= [
{
id: 0,
theme: '#ff0000',
title: 'Customer',
submodules: {
members: 1000,
non_members: 200,
traders: 250,
employees: 40
}
},
{
id: 1,
theme: '#00ff00',
title: 'Loans',
submodules: {
Crop_loan_admin: 1000,
non_members: 200,
traders: 250,
employees: 40
}
},
];
將其系結到 HTML：
<mat-card class="mat mr-4 ml-5 p-3" fxLayout="column" fxFlex>
<div fxLayout="row wrap" fxFlex fxLayoutGap="20px">
<ng-container *ngFor="let item of items">
<div [style]="'background-color: ' item.theme '; border: 1px solid ' item.theme ';'" fxFlex="calc(33.3% - 20px)" class="m-1 pt-3">
</div>
</ng-container>
</div>
</mat-card>
這會將指定的主題應用于每張卡片。
這是一個堆疊閃電戰示例。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/339581.html
標籤：javascript html css 有角的