mui/examples/angular/tabs.html at master · CssFormWork/mui · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
<!doctype html>
<html ng-app="myApp">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- for example only -->
    <script src="../assets/vendor/angular/1.5.3/angular.min.js"></script>
    <!-- end -->

    <link rel="stylesheet" type="text/css" href="../assets/mui/css/mui.css"/>
    <script src="../assets/mui/angular/mui-angular.min.js"></script>
    <script>
      var myApp = angular.module("myApp", ["mui"]);


      myApp.controller('TestCtrlA', function($scope) {
        $scope.selectedIndex = 1;
        $scope.data = {
          selectedIndex: 1
        };

        $scope.onChange = function() {
          console.log('onChange: ' + $scope.selectedIndex);
        };

        $scope.onSelect = function(val) {
          console.log('onSelect: ' + val);
        };

        $scope.onDeselect = function(val) {
          console.log('onDeselect: ' + val);
        };

        $scope.$watch('selectedIndex', function(newVal, oldVal) {
          console.log('selectedIndex: ' + newVal);
        });
      });


      myApp.controller("TestCtrlC", function($scope) {
        $scope.selectedIndex = 1;

        $scope.onChange = function() {
          console.log('onChange: ' + $scope.selectedIndex);
        };

        $scope.nextTab = function() {
          console.log('nextTab');
          if ($scope.selectedIndex === 2) $scope.selectedIndex = 0;
          else $scope.selectedIndex += 1;

          console.log('should be: ' + $scope.selectedIndex);
        };
      });
    </script>
  </head>
  <body>
    <mui-container>
      <h1>Tabs</h1>
      <mui-panel>
        <h3>Default tabs</h3>
        <em>Second tab should be selected, will display onChange, onSelect, onDeselect, selectedIndex messages in console</em>
        <div ng-controller="TestCtrlA">
          <mui-tabs
              selected="selectedIndex"
              on-change="onChange()"
          >
            <mui-tab
                label="Tab 0"
                on-select="onSelect('0')"
                on-deselect="onDeselect('0')"
            >
              TabA1 Content
            </mui-tab>
            <mui-tab
                label="Tab 1"
                on-select="onSelect('1')"
                on-deselect="onDeselect('1')"
            >
              TabA2 Content
            </mui-tab>
          </mui-tabs>
        </div>

        <br>
        <br>

        <h3>Justified tabs</h3>
        <em>Tab labels should be justified, third should be active</em>
        <mui-tabs selected="2" justified>
          <mui-tab label="Tab 1">
            TabB1 Content
          </mui-tab>
          <mui-tab label="Tab 2">
            TabB2 Content
          </mui-tab>
          <mui-tab label="Tab 3">
            TabB3 Content
          </mui-tab>
        </mui-tabs>

        <br>
        <br>

        <h3>Tabs with incrementor</h3>
        <em>Should increment tabs when button is clicked, should only call onChange when user changes tabs manually</em>
        <div ng-controller="TestCtrlC">
          <mui-tabs selected="selectedIndex" on-change="onChange()">
            <mui-tab label="tab1">
              TabC1 Content
            </mui-tab>
            <mui-tab label="tab2">
              TabC2 Content
            </mui-tab>
            <mui-tab label="tab3">
              TabC3 Content
            </mui-tab>
          </mui-tabs>
          <mui-button variant="raised" ng-click="nextTab()">
            Next Tab
          </mui-button>
        </div>

        <br>
        <br>

        <h3>Active tab</h3>
        <em>Second label should be active</em>
        <mui-tabs>
          <mui-tab label="Tab 1">
            TabD1 Content
          </mui-tab>
          <mui-tab label="Tab 2" active>
            TabD2 Content
          </mui-tab>
          <mui-tab label="Tab 3">
            TabD3 Content
          </mui-tab>
        </mui-tabs>

      </mui-panel>
    </mui-container>
  </body>
</html>