0

Kendo UI と angular-kendo で UI を構築しようとしています。でもKendo CSSは使いたくない。ブートストラップの統合が必要です。

以下のリンクは、これを行う方法に関する情報を提供します: docs.telerik.com/kendo-ui/getting-started/using-kendo-with/using-kendo-with-twitter-bootstrap

サンプルのデモ ページがあります: demos.telerik.com/kendo-ui/bootstrap/

デモ ページと手順からわかったことは、Bootstrap が JQuery コーディングで動作することです。Kendo UI への依存関係として jQuery を使用することは問題ありませんが、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>

このデモにあるように (ただし、これは剣道 CSS ファイルを使用しています): http://kendo-labs.github.io/angular-kendo/#/

4

1 に答える 1

2

Kendo UI のルック アンド フィールに関しては、すべて CSS テーマによって駆動されます。これは、jQuery アプローチ、AngularJS アプローチ、またはどのようなアプローチを使用する場合でも、テーマがコンポーネントの外観を決定することを意味します。

したがって、Kendo UI Bootstrap デモでは、次の 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 を操作するために特別なことは何もありません。

この特定のデモで行う必要があるのは、Kendo UI コンポーネントの jQuery インスタンス化を angular-kendo バージョンに置き換えることだけです。

また、補足: Bootstrap JS プラグインのいずれかを使用する場合は、jQuery にも依存しているため、jQuery も必要になります。

于 2014-03-26T20:00:07.400 に答える