Как использовать компонент панели расширения внутри md-карты в приложении angular 2?

У меня есть приложение angular 2, в котором я показываю плитки с помощью md-card. Я хочу добавить панель расширения внутри md-card. При щелчке по панели она должна расшириться и отобразить некоторый контент. Можно ли добавить такой компонент внутрь md-карты? Или есть какой-нибудь лучший способ его спроектировать? Хотите отобразить несколько расширяемых плиток / карточек? Я проверил эти ссылки в Интернете, там есть список, который можно расширить. Я не уверен, что смогу использовать эту внутреннюю карту. https://github.com/Gbuomprisco/ng2-expansion-panels https://material.io/guidelines/components/expansion-panels.html#expansion-panels-behavior

это используемые версии "@ angular / core": "2.4.10" "@ angular / material": "2.0.0-beta.2"

ниже приведен пример использования md-карты

<div fxLayout="row" fxLayoutWrap  style="padding-bottom: 15px; 
padding-top: 15px; margin:auto; justify-content: center;background-color:paleturquoise;" >  
  <md-card fxFlex.gt-md="30" fxFlex.md="30"  fxFlex.sm="auto" fxFlex.xs="100" *ngFor="let data of myData" style="margin:10px;">
  <md-card-content >  
    <h1>Name: {{data.name}} </h1> 
  <h3 [ngStyle]="{'margin-top': '-3px','margin-bottom': '20px'}">{{data.time | date:'HH:mm:ss, MMMM dd'}}</h3>
  <h2>content1: {{data.somedata1 }}</h2>
  <h2>content2: {{data.somedata2}}</h2>
  <h2>content3: {{data.somedata2}}</h2>
  <h2>content4: {{data.somedata3}}</h2>
  <h3>
    <a routerLink="">some link here</a> 
    </h3>
    // Add expansion panel or collapsable UI component here
  </md-card-content>
  </md-card> 
</div>

material-design angular angular-material angular-material2 angular-ui
person user2301    schedule 11.07.2017    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Я нашел решение использовать ng2-extension-panel для приложения Angular 2. https://github.com/Gbuomprisco/ng2-expansion-panels

образец кода

<div fxLayout="row" fxLayoutWrap  style="padding-bottom: 15px; 
    padding-top: 15px; margin:auto; justify-content: center;background-color:paleturquoise;" >  
    <md-card fxFlex.gt-md="30" fxFlex.md="30"  fxFlex.sm="auto" fxFlex.xs="100" *ngFor="let data of myData" style="margin:10px;"
[ngStyle]="{'backgroundColor': data.time > timeLimit1  ? '#69F0AE':(data.time < timeLimit2  ? '#FF5252':'yellow' )}">
        <md-card-content >  
        <h1>Name: {{data.name}} </h1> 
        <h3 [ngStyle]="{'margin-top': '-3px','margin-bottom': '20px'}">{{data.time | date:'HH:mm:ss, MMMM dd'}}</h3>
        <h3>
        <a routerLink="">some link here</a> 
        </h3>
            <expansion-panels-container>
                <expansion-panel >
                <expansion-panel-title>
                Title1
                </expansion-panel-title>
                <expansion-panel-content>
                <h2>content1: {{data.somedata1 }}</h2>
                <h2>content2: {{data.somedata2}}</h2>
                <h2>content3: {{data.somedata2}}</h2>
                <h2>content4: {{data.somedata3}}</h2>
                </expansion-panel-content>
                </expansion-panel>
                <expansion-panel>
                <expansion-panel-title>
                Title2
                </expansion-panel-title>
                <expansion-panel-content>
                <h2>content2: {{data.somedata2}}</h2>
                <h2>content3: {{data.somedata2}}</h2>
                <h2>content4: {{data.somedata3}}</h2>
                </expansion-panel-content>
                </expansion-panel>
            </expansion-panels-container>
        </md-card-content>
    </md-card> 
    </div>
person user2301    schedule 12.07.2017