如何使用 angular4 使引导卡全屏显示？

Question

我在同一页面上有多张卡片现在我正在尝试添加功能，如果用户单击图标使该卡片全屏显示并且它应该覆盖在其他卡片上，如何使引导卡片在其他元素之上重新调整大小？

detail.component.html

<div class="card card-outline-info" >
  <div class="card-header bg-info"><h5>Detail</h5><span class="pull-right p fa fa-compass" [ngClass]="{'expandWidget':isClassExpanded}" (click)="onClickMe($event)"style="font-size:25px"></span></div>
  <div class="card-block">
      <div class="table-responsive" style="cursor: pointer">
        <generic-table [gtClasses]="'table-hover'" #myCustomTable [gtSettings]="secondConfigObject.settings" [gtFields]="secondConfigObject.fields" [gtData]="secondConfigObject.data"></generic-table>
      </div>
    </div>
  </div>

app.component.ts

 onClickMe(ev) {
        ev.preventDefault();

       cons event = this;

        if (event.children('span').hasClass('fa fa-compass'))
        {
            event.children('span').removeClass('fa fa-compass');
            event.children('span').addClass('fa fa-exchange');
        }
        else if (event.children('span').hasClass('fa fa-exchange'))
        {
            event.children('span').removeClass('fa fa-exchange');
            event.children('span').addClass('fa fa-compass');
        }
          (event).closest('.card').toggleClass('expandWidget');
}

app.component.css

.expandWidget {
  display: block;
  z-index: 9999;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  overflow: auto;
}

Answer 1

使用面板而不是卡片。试试这个。

HTML

<div class="container">
    <div class="row">
    <div class="col-md-8">
        <h2>Fullscreen toggle</h2>
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">Panel title</h3>
                <ul class="list-inline panel-actions">
                    <li><a href="#" id="panel-fullscreen" role="button"     title="Toggle fullscreen"><i class="glyphicon glyphicon-resize-full"></i></a>    </li>
                </ul>
            </div>
            <div class="panel-body">
                <h3>Panel body</h3>
                <p>Click the resize icon in the top right to make this fullscreen.</p>
            </div>
        </div>
    </div>
</div>
</div>

CSS

   .panel-actions {
    margin-top: -20px;
    margin-bottom: 0;
    text-align: right;
    }
   .panel-actions a {
     color:#333;
     }
   .panel-fullscreen {
   display: block;
   z-index: 9999;
   position: fixed;
   width: 100%;
   height: 100%;
   top: 0;
   right: 0;
   left: 0;
   bottom: 0;
   overflow: auto;
   }

JS

$(document).ready(function () {
//Toggle fullscreen
$("#panel-fullscreen").click(function (e) {
    e.preventDefault();

    var $this = $(this);

    if ($this.children('i').hasClass('glyphicon-resize-full'))
    {
        $this.children('i').removeClass('glyphicon-resize-full');
        $this.children('i').addClass('glyphicon-resize-small');
    }
    else if ($this.children('i').hasClass('glyphicon-resize-small'))
    {
        $this.children('i').removeClass('glyphicon-resize-small');
        $this.children('i').addClass('glyphicon-resize-full');
    }
    $(this).closest('.panel').toggleClass('panel-fullscreen');
});
});