如何自定义样式 angular-bootstrap-toggle？

Question

我在我的库中包含 angular-bootstrap-toggle 以进行切换。我也在设置 on 和 off 值。但是标签溢出了，并且被切换按钮重叠 - Image 1 和 Image 2。我想设置自己的风格。根据 angular-bootstrap-toggle 上的在线文档，我们可以添加 style 属性。我试过了，但我得到一个错误说'：预期'，如下所示：

 <div>
     <toggle ng-model="selectedTicket" ng-change="toggleTicket()" on="Ticket" off="Image" style="ami"></toggle>
 </div> 

在包含所有css文件后，我的index.html文件中定义了样式：

<style>
        .toggle.ami {
            width: 80px;
        }
        .toggle.ami .toggle-handle{
            width: 80px;
        }
</style>

如果有任何建议可以帮助我克服这个问题，我将不胜感激。

Answer 1

如果您将 HTML 中的“样式”更改为“类”，它应该可以工作：

<div>
  <toggle ng-model="selectedTicket" ng-change="toggleTicket()" on="Ticket" off="Image" class="ami"></toggle>
</div> 

您还需要从 .toggle CSS 选择器中删除 .，因为 toggle 不是一个类：

<style>
  toggle.ami {
    width: 80px;
  }
  toggle.ami .toggle-handle{
    width: 80px;
  }
</style>