

Monaca Onsen UIでタブバーを2段にして表示することは可能でしょうか


CC BY-SA 3.0
2015-05-25T06:19:22.700
10578
2016-10-24T07:49:09.677
9656
question
monaca onsen-ui
Monaca Onsen UI でタブバーを2段表示したい


実装を見てみましたが、特に途中で段を変えるといった処理は入っていないようなので、  
2段表示は難しいと思います。

こんな感じでした（一部抜粋）。

[code]

    // tabbar itemのテンプレート
    var defaultInnerTemplate =
        '<div ng-if="icon != undefined" class="tab-bar__icon">' +
          '<ons-icon icon="{{tabIcon}}"></ons-icon>' +
        '</div>' +
        '<div ng-if="label" class="tab-bar__label">{{label}}</div>';
    
    // tabbar item追加
    compile: function(element, attrs) {
      element.addClass('tab-bar__item');
    
      return function(scope, element, attrs, controller, transclude) {
        var tabbarView = element.inheritedData('ons-tabbar');
        if (!tabbarView) {
          throw new Error('This ons-tab element is must be child of ons-tabbar element.');
        }
    
        element.addClass(tabbarView._scope.modifierTemplater('tab-bar--*__item'));
        element.addClass(tabbarView._scope.modifierTemplater('tab-bar__item--*'));
    
        transclude(scope.$parent, function(cloned) {
          var wrapper = angular.element(element[0].querySelector('.tab-bar-inner'));
    
          if (attrs.icon || attrs.label || !cloned[0]) {
            var innerElement = angular.element('<div>' + defaultInnerTemplate + '</div>').children();
            wrapper.append(innerElement);
            $compile(innerElement)(scope);
          } else {
            wrapper.append(cloned);
          }
        });
    
[/code]


CC BY-SA 3.0
2015-05-25T07:37:59.190
10586
2015-05-25T07:37:59.190
3516
10578
answer