Angular 10 - 对 Angular 材质使用 bootstrap-toggle 样式

Posted 2023-02-25

【中文标题】Angular 10 - 对 Angular 材质使用 bootstrap-toggle 样式

【英文标题】：Angular 10 - Using bootstrap-toggle style for Angular Material

【发布时间】：2020-10-28 18:10:58

【问题描述】：

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

【参考方案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;

而这只是 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。

【讨论】：

你可能是对的，尽管混合引导程序和材料是不好的做法。要安装，我是否只使用 npm 而不是像 npm install bootstrap-toggle

这样的 bower

是的，看起来你可以：npmjs.com/package/bootstrap-toggle

它与 npm 一起安装，但在添加 ` ` 后似乎没有任何效果。也许需要引导程序，或者我在我的 Angular 10 应用程序中的某处缺少注入？

可能。我精通 Bootstrap，但不精通 Angular。试试这个：techiediaries.com/angular-bootstrap