在 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

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

使用btn-group。它的语义也很好，除了你使用 btn class 作为非按钮的输入容器。

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

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

<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

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

show a small inline delete button upon button press in ng-bootstrap

html

bootstrap-4

ng-bootstrap

angular

图片

点击后（选中）

代码

更新