13

我使用 Angular Material 2，我想要一个卡片标题图标按钮。如何将按钮设置在右侧？

我的计划： 在此处输入图像描述

当前网站： 在此处输入图像描述

我想在标题中设置按钮。我该怎么做？我排除了类别代码，因为没有问题。在打字稿代码中，只有一个用于添加更多卡片的 for 循环和一个用于单击卡片的虚拟方法。

.healthy-search {
    width: 100%
}

.healthy-card {
    margin-right: 5px;
    margin-bottom: 5px;
}
<div class="flex-container" fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center center" fxLayoutAlign.xs="start">
  <div class="flex-item" fxFlex="90%" fxFlex.xs="90%">
    <mat-form-field class="healthy-search">
      <textarea matInput placeholder="Suche"></textarea>
    </mat-form-field>
  </div>
</div>
<div class="flex-container" fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center center" fxLayoutAlign.xs="start">
  <div class="flex-item" fxFlex="85%" fxFlex.xs="85%">
    <mat-expansion-panel>
    
     <!-- Here is the Category -->
     

     <!--Elements of Category -->

      <div class="flex-container" fxLayoutWrap fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center center" fxLayoutAlign.xs="start">
        <div class="flex-item healthy-card" fxFlex="400px" *ngFor="let number of numbers" (click)="cardClick()">
          <mat-card class="example-card">
            <mat-card-header>
              <mat-card-title>Title {{number}}</mat-card-title>
              <button mat-icon-button fxLayoutAlign="right">
                <mat-icon aria-label="Example icon-button with a heart icon">Edit</mat-icon>
              </button>
              <button mat-icon-button fxLayoutAlign="right">
                <mat-icon aria-label="Example icon-button with a heart icon">Delete</mat-icon>
              </button>
            </mat-card-header>
            <img mat-card-image src="https://material.angular.io/assets/img/examples/shiba2.jpg" alt="Photo of a Shiba Inu">
            <mat-card-content>
              <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>
        </div>
      </div>
    </mat-expansion-panel>
  </div>
</div>

天琴座

4

3 回答 3

16

这篇文章很老了，但也许其他人也偶然发现了这个。（在撰写此答案时，当前版本是 Angular Material 6）

我建议使用 <mat-card-title-group> 属性。从文档（https://material.angular.io/components/card/overview）：

<mat-card-title-group> 可用于将标题、副标题和图像组合成一个部分。

这样，标题和描述将被捆绑到一个单独的 div 中，并且 fxFlex 容器实际上可以工作。这也允许在左侧添加按钮/图标。

一个示例可能如下所示：

<mat-card-header>
    <mat-icon>help</mat-icon>
    <mat-card-title-group>
        <mat-card-title>
            Title
        </mat-card-title>
        <mat-card-subtitle>
            Subtitle
        </mat-card-subtitle>
    </mat-card-title-group>
    <div fxFlex></div>
    <button mat-button>Click me!</button>
</mat-card-header>
于 2018-05-08T13:51:38.067 回答
8

首先从按钮中删除 fxLayoutAlign="right" 。fxLayoutAlign 用于容器。

您需要在标题和按钮之间使用 fxFlex 的 div 或其他占位符。这会将按钮推到最后。

<md-card-header fxLayout="row">
  <md-card-title >Title </md-card-title>
  <div fxFlex></div>
  <button md-button>Something</button>
</md-card-header>
于 2017-12-06T09:31:24.367 回答
3

在角度材料 7 中，这对我来说看起来不错：

<mat-card>
 <mat-card-header>
  <mat-card-title-group>
    <mat-card-title>
      Title
    </mat-card-title>
    <mat-card-subtitle>
      Subtitle
    </mat-card-subtitle>
  </mat-card-title-group>
  <div fxFlex></div>
  <div fxLayoutAlign="center center">
    <button mat-stroked-button>Click me!</button>
  </div>
 </mat-card-header> 
</mat-card>
于 2019-05-16T13:15:33.890 回答