在ng-bootstrap中按下按钮时显示一个小的内联删除按钮

Question

我使用ng-bootstrap Angular4完成了我想要的实现。

图像

如您所见，我使用“复选框”按钮显示后端的响应。如果您点击按钮，则不会显示 x 按钮，它也会隐藏下面的其他一些html元素。

点击（选中）

我实际上正在寻求改进布局，我希望 x 按钮能够以某种方式跨越在一起，以获得平滑的感觉。

我不知道 Bootstrap4.x 或ng-bootstrap本身可以做任何事情的任何组件。

我正在寻找任何设计建议或改进。

码

<!-- Search Keywords go here -->
<div class="container" *ngIf="Output.length">
    <div class="row">
        <div class="col-sm-2">
            <label class="col-form-label-lg"><b> Search History </b></label>
        </div>
        <div class="col-sm-10">
            <div class="btn-group btn-group-toggle" *ngFor="let keyword of Output; let cbIndex = index">
                    <label class="btn-primary" ngbButtonLabel>
                        <input type="checkbox"
                               ngbButton
                               #kwCheck
                               (change)="cbInput= kwCheck.checked; hideKW(cbIndex)"
                        > {{keyword.kw}}
                    </label>
                    <span><button class="btn btn-xs btn-danger"
                              (click)="deleteKW(keyword.kw); $event.stopPropagation()"
                              [disabled]=kwCheck.checked
                              [hidden]="kwCheck.checked">&times;</button>
                    </span>
            </div>
        </div>
    </div>
</div>

Output.length是来自后端的JSON响应数组。

Answer 1

至少有两种方法可以做到。

1. 使用btn-group。除了您使用btn类作为非按钮的输入容器之外，它也非常好。

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet"/>
<div class="btn-group" role="group" aria-label="Basic example">
  <label class="btn d-flex align-items-center bg-primary px-3 mb-0">
    <input type="checkbox" class="" id="customCheck1">
    <span class="px-1 mb-0" for="customCheck1">Check</span>
  </label>
  <button type="button" class="btn btn-danger">&times;</button>
</div>

1. 使用input-group。我更喜欢这种方法，因为所有类都有意义。

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet" />
<div class="input-group w-auto">
  <label class="d-flex align-items-center w-auto bg-primary  px-3 mb-0">
    <input type="checkbox" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
    <span class="pl-2">Check</span>
  </label>
  <div class="input-group-prepend">
    <button class="btn btn-danger" type="button">&times;</button>
  </div>
</div>

更新

要隐藏复选框的tick mark，请使用btn-group-toggle。它与bootstrap的方法相同。

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet" />
<div class="input-group w-auto ">
  <div class="btn-group-toggle" data-toggle="buttons">
    <label class="btn btn-primary" style="border-radius: 0;">
      <input type="checkbox" autocomplete="off"> Check
    </label>
  </div>
  <div class="input-group-prepend">
    <button class="btn-danger btn" id="basic-addon1">&times;</button>
  </div>
</div>

据我所知，无法将border重置为零。因此，您必须使用自定义CSS。*

https://codepen.io/anon/pen/qKOdJv?editors=1000