如何使mat-card材料2组件内的内容滚动?我在材料2网站上找不到任何东西
答案 0 :(得分:6)
这不是内置功能。要使内容可滚动,请为<mat-card-content>
选择器设置高度。这是一个例子:
<mat-card>
<mat-card-header>
<mat-card-title>CARD TITLE</mat-card-title>
</mat-card-header>
<mat-card-content [style.overflow]="'auto'" [style.height.px]="'300'">
<p>
The Shiba Inu is the smallest of the six original and distinct
spitz breeds of dog from Japan. A small, agile dog that copes very
well with mountainous terrain, the Shiba Inu was originally bred
for hunting.
</p>
</mat-card-content>
<mat-card-actions>
<button mat-button>LIKE</button>
<button mat-button>SHARE</button>
</mat-card-actions>
</mat-card>
链接到StackBlitz demo。
答案 1 :(得分:3)
您可以利用Flexbox来实现这一目标:
向scrollable-content
添加课程mat-card
,以使内容填满该卡片。
.mat-card.scrollable-content {
overflow: hidden;
display: flex;
flex-direction: column;
> .mat-card-title-group {
display: block;
}
> .mat-card-content {
overflow-y: auto;
}
}
答案 2 :(得分:1)
这是我在自己的代码中所做的。
您可以采用类似的方法,但它确实有效。
的CSS
:host {
width: 100%;
height: 100%;
}
.container {
width: 100%;
height: 100%;
}
.content {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
align-content: center;
}
.policy-card {
width: 80%;
min-width: 280px;
height: 70%;
min-height: 280px;
margin: auto;
font-weight: unset !important;
box-shadow: 0px 3px 15px 0px rgba(0, 0, 0, 0.35);
display: flex;
flex-flow: column nowrap;
align-items: center;
justify-content: center;
align-content: center;
}
.header-image {
background-color: #44c2cc;
}
.text-container {
overflow-y: scroll;
}
html的
<mat-sidenav-container class="container">
<mat-sidenav-content class="content">
<mat-card class="policy-card">
<mat-card-header>
<div mat-card-avatar class="header-image"></div>
<mat-card-title>Title</mat-card-title>
<mat-card-subtitle>Subtitle</mat-card-subtitle>
</mat-card-header>
<mat-card-actions>
<button mat-button>LIKE</button>
<button mat-button>SHARE</button>
</mat-card-actions>
<mat-card-content [style.overflow]="'auto'">
<p>
The Shiba Inu is the smallest of the six original and distinct
spitz breeds of dog from Japan. A small, agile dog that copes very
well with mountainous terrain, the Shiba Inu was originally bred
for hunting.
</p>
</mat-card-content>
</mat-card>
答案 3 :(得分:0)
尝试一下。关键是在可滚动的div中设置position:absolute:
.flex {
flex: 1 1 auto;
}
.scrollable {
overflow: auto;
box-sizing: border-box;
position: absolute;
right: 0;
top: 0;
width: 100%;
height: 100%;
}
<mat-card class="flex">
<div class="scrollable">
...
</div>
</mat-card>