Question

我有角度2应用程序，我正在使用md-card显示磁贴。我想在md-card中添加一个扩展面板。单击面板，它应该展开并显示一些内容。是否可以在md-card中添加这样的组件？或者有更好的设计方法吗？喜欢展示一些可扩展的瓷砖/卡片？我在网上检查了这些链接，它显示了一个可以扩展的列表。我不确定我是否可以使用这张内卡。 https://github.com/Gbuomprisco/ng2-expansion-panels https://material.io/guidelines/components/expansion-panels.html#expansion-panels-behavior

这些是使用的版本＆＃34; @ angular / core＆＃34;：＆＃34; 2.4.10＆＃34; ＆＃34; @ angular / material＆＃34;：＆＃34; 2.0.0-beta.2＆＃34;

以下是样本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>

Answer 1

我找到了使用ng2-expansion-panels进行Angular 2应用的解决方案。 https://github.com/Gbuomprisco/ng2-expansion-panels

示例代码

using System;
using Android.App;
using Android.Views;
using Java.Lang;
using Android.Support.V4.App;
using App.Fragments;

namespace App.Adapters
{
    public class TabsPagerAdapter : FragmentStatePagerAdapter
    {
        public TabsPagerAdapter(Android.Support.V4.App.FragmentManager fm) : base(fm)
        {

        }

        public override int Count
        {
            get { return 2; }
        }

        public override Android.Support.V4.App.Fragment GetItem(int position)
        {
            switch (position)
            {
                case 0:
                    return new HomeFragment();
                case 1:
                    return new ChatFragment();
                default:
                    throw new NotImplementedException();
            }
        }

        public override ICharSequence GetPageTitleFormatted(int position)
        {
            switch (position)
            {
                case 0:
                    return new Java.Lang.String(Application.Context.GetString(Resource.String.tab1_chats));
                case 1:
                    return new Java.Lang.String(Application.Context.GetString(Resource.String.tab2_bets));
                default:
                    return null;

            }
        }

    }
}

如何在角度2应用中使用md-card内的扩展面板组件？

1 个答案: