以下是一个使用Angular创建仪表板网格的示例代码:
app.component.html:
{{ item }}
app.component.css:
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr); /* 3列等宽 */
grid-gap: 10px; /* 间距 */
}
.grid-item {
background-color: #ccc;
padding: 10px;
text-align: center;
}
app.component.ts:
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
gridItems: number[] = [1, 2, 3, 4, 5, 6, 7, 8, 9]; // 示例数据
}
在这个示例中,我们使用ngFor
指令对gridItems
数组进行循环,每个数组项都会生成一个div
元素,然后使用CSS的grid
属性来设置网格布局。我们将网格容器分为3列,使用grid-gap
属性设置项之间的间距。每个网格项都有一个相同的背景颜色和内边距。
你可以根据需要修改和扩展这个示例来适应你的具体需求。