要使Angular 9卡片主体内容滚动,您可以使用CSS样式和HTML结构来实现。以下是一个示例解决方案:
Card Header
.card {
width: 300px;
height: 400px;
overflow: hidden;
border: 1px solid #ccc;
border-radius: 5px;
}
.card-header {
background-color: #f5f5f5;
padding: 10px;
}
.card-body {
overflow-y: auto;
padding: 10px;
}
import { Component } from '@angular/core';
@Component({
selector: 'app-card',
templateUrl: './card.component.html',
styleUrls: ['./card.component.css']
})
export class CardComponent {
scrollHeight: string;
constructor() {
this.scrollHeight = '300px'; // 设置卡片主体内容的最大高度
}
}
在这个示例中,我们首先定义了一个.card类,它具有固定的宽度和高度,并设置了overflow:hidden以隐藏超出卡片的内容。然后,在.card-body类中,我们将overflow-y属性设置为auto,以便自动显示垂直滚动条。
在组件代码中,我们使用scrollHeight属性来设置.card-body的最大高度。您可以根据需要调整此属性的值。
请注意,此解决方案假设您已经创建了一个名为CardComponent的组件,并将其用作卡片的组件。
希望这个示例能帮到您!
上一篇:Angular 9仅在需要时预加载特定模块,并且不是一次性预加载所有模块。
下一篇:Angular 9可以在http://127.0.0.1:8080作为PWA工作,但无法在http://192.168.1.197:8080和Heroku上工作。