Question

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

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

{
"id":1,
"name":"bob",
"date":"23/01/2017"
}

{
"id":2,
"name":"alice",
"date":"23/01/2017"
}

{
"id":3,
"name":"david",
"date":"23/01/2017"
}

<强> CSS

<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>

<强> JS

   .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;
   }

如何使用angular4全屏制作自举卡？

1 个答案: