在 Angular 6 Card Botton-Center 边框上添加图像/徽章答案

【问题标题】：Add image/badge on Angular 6 Card Botton-Center border在 Angular 6 Card Botton-Center 边框上添加图像/徽章
【发布时间】：2018-08-26 09:27:37
【问题描述】：

我目前正在使用 Angular 6 开发一个搜索面板，我想在卡片底部中心边框上放置一个“箭头”图像或徽章，用于切换显示/隐藏搜索面板。所需的输出如下所示谁能建议我可以做些什么来实现输出。

<div *ngIf="isSearchVisible" class="search-panel-lower">
  <div class="card">
    <div class="card-body">
      <form>
         <!--Code here-->
      </form>
    </div>
  </div>
</div>

【问题讨论】：

你是在问如何在那里放一个这样的按钮吗？或者如何显示/隐藏面板，或者如何设置按钮样式？你试过什么？
@ChrisW。如何在那里放置一个按钮。我已经完成了切换部分。有什么库可以用来在边框上添加按钮还是应该使用 CSS？

标签： angular angular6

【解决方案1】：

你可以像这样使用 CSS 放置一个按钮。

    <div class="card" style="position:relative;overflow:initial;">
        <div class="card-title">
            title
        </div>
        <div class="card-content">
            content
        </div>
        <!-- button code -->
        <div style="position:absolute;text-align:center;width:100%;bottom:-10px;">button icon</div>
    </div>

【讨论】：