jube-fork/Jube.App/wwwroot/kendo/examples/toolbar/angular.html

<!DOCTYPE html>
<html>
<head>
    <title>AngularJS</title>
    <meta charset="utf-8">
    <link href="../content/shared/styles/examples-offline.css" rel="stylesheet">
    <link href="../../styles/kendo.common.min.css" rel="stylesheet">
    <link href="../../styles/kendo.rtl.min.css" rel="stylesheet">
    <link href="../../styles/kendo.default.min.css" rel="stylesheet">
    <link href="../../styles/kendo.default.mobile.min.css" rel="stylesheet">
    <script src="../../js/jquery.min.js"></script>
    <script src="../../js/jszip.min.js"></script>
    <script src="../../js/angular.min.js"></script>
    <script src="../../js/kendo.all.min.js"></script>
    <script src="../content/shared/js/console.js"></script>
    <script>
        
    </script>
    
    
</head>
<body>
    
        <a class="offline-button" href="../index.html">Back</a>
    
    <div id="example" ng-app="KendoDemos">
  <div class="demo-section k-content wide" ng-controller="MyCtrl">
    <div kendo-toolbar k-options="toolbarOptions"></div>
  </div>
</div>

<script>
  angular.module("KendoDemos", [ "kendo.directives" ])
      .controller("MyCtrl", function($scope){
          $scope.toolbarOptions = {
              items: [
                  { type: "button", text: "Button" },
                  { type: "button", text: "Toggle Button", togglable: true },
                  {
                      type: "splitButton",
                      text: "Insert",
                      menuButtons: [
                          { text: "Insert above", icon: "insert-up" },
                          { text: "Insert between", icon: "insert-middle" },
                          { text: "Insert below", icon: "insert-down" }
                      ]
                  },
                  { type: "separator" },
                  { template: "<label>Format:</label>" },
                  {
                      template: "<input kendo-drop-down-list k-options='formatOptions' style='width: 150px;' />",
                      overflow: "never"
                  },
                  { type: "separator" },
                  {
                      type: "buttonGroup",
                      buttons: [
                          { icon: "align-left", text: "Left", togglable: true, group: "text-align" },
                          { icon: "align-center", text: "Center", togglable: true, group: "text-align" },
                          { icon: "align-right", text: "Right", togglable: true, group: "text-align" }
                      ]
                  },
                  {
                      type: "buttonGroup",
                      buttons: [
                          { icon: "bold", text: "Bold", togglable: true, showText: "overflow" },
                          { icon: "italic", text: "Italic", togglable: true, showText: "overflow" },
                          { icon: "underline", text: "Underline", togglable: true, showText: "overflow" }
                      ]
                  },
                  {
                      type: "button",
                      text: "Action",
                      overflow: "always"
                  },
                  {
                      type: "button",
                      text: "Another Action",
                      overflow: "always"
                  },
                  {
                      type: "button",
                      text: "Something else here",
                      overflow: "always"
                  }
              ]
          };
          $scope.formatOptions = {
              optionLabel: "Paragraph",
              dataTextField: "text",
              dataValueField: "value",
              dataSource: [
                  { text: "Heading 1", value: 1 },
                  { text: "Heading 2", value: 2 },
                  { text: "Heading 3", value: 3 },
                  { text: "Title", value: 4 },
                  { text: "Subtitle", value: 5 },
              ]
          };
      })
</script>


    
</body>
</html>