Question

我正在尝试使用Kendo UI和angular-kendo构建UI。但是不想使用Kendo CSS。想要一个Bootstrap集成。

以下链接提供了有关如何执行此操作的信息： docs.telerik.com/kendo-ui/getting-started/using-kendo-with/using-kendo-with-twitter-bootstrap

并有一个示例演示页面： demos.telerik.com/kendo-ui/bootstrap /

现在我们从演示页面和说明中观察到的是Bootstrap与JQuery编码一起工作。虽然我们可以将jQuery作为对Kendo UI的依赖，但我们并不想在JQuery中编写代码。我们只想使用Angular指令。

我们注意到上面显示的演示页面绘制了一个下拉框：

 <div id="configurator-wrap" class="col-sm-9 hidden-xs">
      <div id="configurator" class="row">
                  <label class="col-sm-4">
                      <div class="description">Dimensions</div>
                      <select id="dimensions">
                      </select>
                  </label>
     </div>
 </div>

Bootstrap要求像这样的JQuery：

 <script>
      $("#dimensions").kendoDropDownList({
          dataTextField: "text",
          dataValueField: "value",
          value: "common",
          dataSource: [
              { text: "Default", value: "common" },
              { text: "Bootstrap", value: "common-bootstrap" }
          ],
          change: function(e) {
              var commonLink = Application.getCurrentCommonLink();
              Application.updateLink(commonLink, Application.getCommonUrl(this.value()));
          }
      });
  </script>

相反，我们希望能够使用angular-kendo写下拉方式。我们将包括Bootstrap CSS等，它应该给出Bootstrap外观。像这样：

<select kendo-drop-down-list>
  <option value="1">Thing 1</option>
  <option value="2">Thing 2</option>
  <option value="3">Thing 3</option>
</select>

在本演示中给出，（但这是使用kendo CSS文件）：http://kendo-labs.github.io/angular-kendo/#/

Answer 1

当涉及到Kendo UI的外观时，它完全由CSS主题驱动。这意味着无论您使用的是jQuery方法，AngularJS方法，还是您想要采用的任何方法，主题都会驱动组件的外观。

因此，在Kendo UI Bootstrap demo中，您会看到引用了以下CSS文件：

<link href="[...]/kendo.common-bootstrap.min.css" rel="stylesheet">
<link href="[...]/kendo.bootstrap.min.css" rel="stylesheet">
<link href="[...]/kendo.dataviz.min.css" rel="stylesheet">
<link href="[...]/kendo.dataviz.bootstrap.min.css" rel="stylesheet">

这些都可以在Kendo UI的本地安装目录中找到。在这种情况下，专门使用AngularJS没什么特别的。

您需要为此特定演示所做的只是用angular-kendo版本替换Kendo UI组件的jQuery实例化。

另外，请注意：如果你使用任何Bootstrap JS插件，你也需要jQuery，因为它们也依赖于jQuery。

带有Bootstrap外观的Angular-kendo

1 个答案: