Angular 10-对Angular Material使用bootstrap-toggle样式

问题描述

我正在使用Angular Material进行样式设置，但我想使用自举切换样式，而不是Material的mat-slide-toggle。无需安装引导程序就无法使用它。 here是我想从引导程序中使用的样式。 here是我要替换的Material样式。

解决方法

如果您不想安装Bootstrap，则需要在项目中手动重新创建相关代码。

但是，这意味着您需要在Bootstrap存储库中仔细找到所有正确的CSS和JS，这可能会很麻烦，因为CSS遍布各处，并且可能基于父元素继承其他CSS。另外，根据切换状态，CSS可能会更改。

以下是我发现的一些主要CSS内容：

.toggle {
    position: relative;
    overflow: hidden;
}
.toggle-on.btn {
    padding-right: 24px;
}
.toggle-on {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 50%;
    margin: 0;
    border: 0;
    border-radius: 0;
}
.toggle-off.btn {
    padding-left: 24px;
}

.toggle-group {
    position: absolute;
    width: 200%;
    top: 0;
    bottom: 0;
    left: 0;
    transition: left 0.35s;
    -webkit-transition: left 0.35s;
    -moz-user-select: none;
    -webkit-user-select: none;
}
div.toggle {
    margin-right: 10px;
}
.toggle.btn {
    min-width: 59px;
    min-height: 34px;
}
.toggle input[type="checkbox"] {
    display: none;
}
.toggle-handle {
    position: relative;
    margin: 0 auto;
    padding-top: 0px;
    padding-bottom: 0px;
    height: 100%;
    width: 0px;
    border-width: 0 1px;
}
.btn-default:active,.btn-default.active,.open>.dropdown-toggle.btn-default {
    background-image: none;
}
.btn-default:hover,.btn-default:focus,.btn-default:active,.open>.dropdown-toggle.btn-default {
    color: #333;
    background-color: #e6e6e6;
    border-color: #adadad;
}

那只是垂头丧气的CSS成果。要以与Bootstrap相同的方式获取所有内容，将需要花费大量的反复试验。

另外，Bootstrap使用CSS隐藏实际的复选框，然后使用JS添加全新的div：

<div class="toggle-group">
  <label class="btn btn-primary toggle-on">On</label>
  <label class="btn btn-default active toggle-off">Off</label>
  <span class="toggle-handle btn btn-default"></span></div>

然后添加功能来控制将此新DOM内容链接到复选框状态，处理新切换按钮的单击等。

TL; DR 这是很多可以重新创建的东西。

而且，根据您提供的网站，您并没有添加所有的Bootstrap，而只是添加了Toggle功能，因此我真的不明白为什么您不只是将其引入项目中。

如果您真的不想“安装”，则可以使用CDN：

<link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>

注意警告：

如果您使用的是Bootstrap v2.3.2，请改用bootstrap2-toggle.min.js和bootstrap2-toggle.min.css。