以下是一个使用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属性设置项之间的间距。每个网格项都有一个相同的背景颜色和内边距。
你可以根据需要修改和扩展这个示例来适应你的具体需求。