comment faire pour que le contenu à l'intérieur du mat-card 2 composants défilent? Je n'ai rien trouvé sur le site internet de material 2
Ce n'est pas une fonctionnalité intégrée. Pour faire défiler le contenu, définissez une hauteur pour le sélecteur <mat-card-content>
. Voici un exemple:
<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>
Lien vers StackBlitz demo .
Vous pouvez utiliser Flexbox pour atteindre cet objectif:
Ajoutez une classe scrollable-content
à votre mat-card
pour que le contenu remplisse la carte.
.mat-card.scrollable-content {
overflow: hidden;
display: flex;
flex-direction: column;
> .mat-card-title-group {
display: block;
}
> .mat-card-content {
overflow-y: auto;
}
}
Voici ce que j'ai fait dans mon propre code.
Vous pouvez suivre une approche similaire, mais cela fonctionne.
.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>