Angular 的可扩展卡

Posted 2023-03-13

【中文标题】Angular 的可扩展卡

【英文标题】：Expandable cards for Angular

【发布时间】：2022-01-19 20:31:01

【问题描述】：

我正在向 Angular 中的现有项目添加一项功能。 我有一些显示某些信息的布尔玛卡。 我想要一个以下选项：当没有点击任何卡片时，它们将只显示从 API 获得的数据的简短版本。如果我单击其中一张卡片，我希望该卡片水平和垂直扩展，因此它会变得更宽更高，并显示来自 API 的完整信息。 我的问题是，我不知道从哪里开始。我看到提到了像 https://bulma-collapsible.netlify.app/installation/ 这样的 Ionic、Angular Material、自定义 Bulma 库。我想使用最简单的解决方案。如果有人能指出我正确的方向，我将不胜感激。教程，手册，任何东西，因为我不确定我需要哪个工具。

编辑 所以左上角的卡片应该展开成红色矩形，其他卡片应该移动到这个展开的大卡片下面。如果当时只能扩展一张卡，那也将是有益的。所以如果第一个展开，我点击第二个，第一个会折叠，第二个会展开。

<section class="section">
  <div class="container">
    <div class="columns is-multiline" *ngIf="dummyCampaigns">
      <div class="column is-4" *ngFor="let campaign of dummyCampaigns">
        <div class="card">
          <div class="card-image">
            <figure class="image is-4by3">
              <img src="https://bulma.io/images/placeholders/1280x960.png" >
            </figure>
          </div>
          <div class="card-content">
            <div class="media">
              <div class="media-content">
                <p class="title is-4"> campaign.title </p>
                <p class="subtitle is-6"> campaign.owner </p>
              </div>
            </div>
            <div class="content">
               campaign.campaignDetails 
              <br>
              <time datetime="2016-1-1">11:09 PM - 1 Jan 2016</time>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

【问题讨论】：

请分享一些代码，以便我们根据您当前的代码进行思考。

【参考方案1】：

对于您的场景，我有一个简单的解决方案，可以使用基本的 css Animatable CSS properties 水平和垂直扩展卡片。例如过渡属性。 这是更多详细信息的链接， https://developer.mozilla.org/en-US/docs/Web/CSS/transition