показать небольшую встроенную кнопку удаления после нажатия кнопки в ng-bootstrap - PullRequest
Новая
       7

показать небольшую встроенную кнопку удаления после нажатия кнопки в ng-bootstrap

0 голосов
/ 01 июня 2018

Моя текущая реализация того, что я хочу, выполняется с использованием ng-bootstrap для Angular4.

Изображение

non checked button

AsВы можете видеть, что я использовал кнопку флажка, чтобы отобразить ответ от бэкэнда.Если вы нажмете на кнопку, кнопка x не будет отображаться, а также скроет некоторые другие HTML-элементы ниже.

После нажатия (отмечено)

checked button

Я на самом деле стремлюсь улучшить макет, и мне бы хотелось, чтобы кнопка x была как-то объединена для ощущения smooth .

Я не знаю ни о каких компонентах из Bootstrap4.x или ng-bootstrap, которые могли бы что-то сделать.

Я ищу какие-либо конструктивные предложения или улучшенияfor.

code 

<!-- 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 от серверной части.

1 Ответ

0 голосов
/ 01 июня 2018

Есть, по крайней мере, два способа сделать это.

  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>
Используйте 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

...