Angular 10 - 使用 bootstrap-切换样式 Angular Material

Question

我正在使用 Angular Material 进行样式设置，但我想使用 bootstraps 切换样式而不是 Materials' mat-slide-toggle。必须安装 bootstrap 才能使用它。 here is the style I would like to use from bootstrap. And here 是我要替换的 Material 样式。

Answer 1

如果您不想安装 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, .btn-default.active, .open>.dropdown-toggle.btn-default {
    color: #333;
    background-color: #e6e6e6;
    border-color: #adadad;
}

那只是 low-hanging 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>

注意警告：

If you are using Bootstrap v2.3.2, use bootstrap2-toggle.min.js and bootstrap2-toggle.min.css instead.

Angular 10 - 使用 bootstrap-切换样式 Angular Material

Angular 10 - Using bootstrap-toggle style for Angular Material

slidetoggle

twitter-bootstrap

angular-material

angular