1

我们如何在 angular2 中使用带有名称的引导切换按钮？我的应用程序中有 ng2-bootstrap 包，但它没有带名称的引导切换按钮。我想在我的应用程序中使用 Active/Inactive 切换开关按钮。

通过普通 CSS

 <div class="checkbox-inline checkbox-ios">
              <label for="checkbox-ios1" class="switch">
                <input type="checkbox" class="ios" checked id="checkbox-ios1" (click)="checkStatus(item.Id)"><i></i>
              </label>
            </div>
.switch{
  box-sizing: content-box;
  margin-left: -20px;
}

.switch input {
  display: none;
}
.switch i {
  display: inline-block;
  cursor: pointer;
  padding-right: 20px;
  transition: all ease 0.2s;
  -webkit-transition: all ease 0.2s;
  border-radius: 20px;
  box-shadow: inset 0 0 1px rgba(0,0,0,.5);
}
.switch i:before {
  display: block;
  content: '';
  width: 30px;
  height: 30px;
  padding: 1px;
  border-radius: 20px;
  background: white;
  box-shadow: 0 1px 2px rgba(0,0,0,.5);
}
.switch :checked + i {
  padding-right: 0;
  padding-left: 20px;
  background: rgb(100, 189, 99);
}

我们如何在 angular2 中使用带有名称的引导切换按钮？请建议或帮助我。

4

0 回答 0