[英]How to make angular material <md-card> expandable?
I'm displaying dynamic content by looping with md-card
tags. 我通过使用
md-card
标签循环显示动态内容。 What I want to achieve is to show additional information when clicking on an md-card
by expanding it like an accordion. 我想要实现的是通过像手风琴一样扩展它来点击
md-card
时显示其他信息。
Has anybody already tried this? 有没有人试过这个?
You can use md-item/md-card 你可以使用md-item / md-card
<md-item ng-repeat="user in users" class="item"
ng-class="{ 'selected-item': $index == selectedUserIndex}">
<md-item-content class="user tile md-whiteframe-z1"
ng-class="{ 'selected md-whiteframe-z2': $index == selectedUserIndex}"
layout="column">
<div layout="row" layout-fill ng-click="selectUserIndex($index)" class="folded">
<div class="md-tile-left">
<img ng-src="{{ user.face }}" class="face">
</div>
<div class="md-tile-content" layout="column" layout-align="center start">
<h3>{{ user.name.first + " " + user.name.last }}</h3>
<p ng-hide="$index == selectedUserIndex">
<span>Something</span>
</p>
</div>
</div>
<md-divider layout-fill ng-show="$index == selectedUserIndex"></md-divider>
<div layout="column" layout-fill class="expanded">
<span>some content</span>
<br/>
<span>some content</span>
<br/>
<span>some content</span>
<br/>
<span>some content</span>
<br/>
<span>some content</span>
<br/>
<span>some content</span>
<br/>
<span>some content</span>
</div>
</md-item-content>
<md-divider class="divider-inset" ng-if="!$last"></md-divider>
</md-item>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.