

今サンプルのプログラムを使っていろいろ試しているところなのですが、  
tabbarとカルーセルを組み合わせてメニューを作りたいのです。  
イメージ的には最新のlineやカカオみたいな感じなのですが、  
可能なのでしょうか？  
いろいろ調べているのですが、なかなか見つからなくて・・・・  
お手数をおかけしますがよろしくお願いします。


CC BY-SA 3.0
2015-03-06T00:16:58.663
7508
2016-06-29T07:04:37.293
8710
question
onsen-ui
tabbarとカルーセルを組み合わせてメニューを組みたい


意図しているUIのイメージが掴めておらず申し訳ないのですが、  
タブの中で複数ページを切り替えたいということでしょうか？

もしそうであれば  
[タブバーを使う](http://ja.onsen.io/guide/overview.html#UsingTabBar)  
[カルーセルを使う](http://ja.onsen.io/guide/overview.html#UsingCarousel)  
の組み合わせでいけそうです。

**サンプル**

[code]

    ons.bootstrap();
[/code]

[code]

    ons-carousel-item {
      display: table;
      text-align: center;
    }
    .item-label {
      display: table-cell;
      vertical-align: middle;
      color: white;
      line-height: 1;
      font-size: 48px;
      font-weight: bold;
    }
    .cover-label {
      text-align: center;
      position: absolute;
      left: 0px;
      width: 100%;
      bottom: 10px;
      color: white;
    }
[/code]

[code]

    <script src="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.2.2/build/js/angular/angular.min.js"></script>
    <script src="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.2.2/build/js/onsenui.min.js"></script>
    <link href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.2.2/build/css/onsenui.css" rel="stylesheet"/>
    <link href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.2.2/build/css/onsen-css-components.css" rel="stylesheet"/>
    
    <ons-tabbar>
       <ons-tab page="home.html" label="Home" icon="ion-home" active="true"></ons-tab>
      <ons-tab page="comments.html" label="Comments" icon="ion-chatbox-working"></ons-tab>
      <ons-tab page="tags.html" label="Tags" icon="ion-ios-pricetag"></ons-tab>
      <ons-tab page="settings.html" label="Settings" icon="ion-ios-cog"></ons-tab>
    </ons-tabbar>
    
    <ons-template id="home.html">
      <ons-toolbar>
        <div class="center">Home</div>
      </ons-toolbar>
    
      <ons-page>
        <ons-carousel swipeable overscrollable auto-scroll fullscreen var="carousel">
          <ons-carousel-item style="background-color: gray;">
            <div class="item-label">GRAY</div>
          </ons-carousel-item>
          <ons-carousel-item style="background-color: #085078;">
            <div class="item-label">BLUE</div>
          </ons-carousel-item>
          <ons-carousel-item style="background-color: #373B44;">
            <div class="item-label">DARK</div>
          </ons-carousel-item>
          <ons-carousel-item style="background-color: #D38312;">
            <div class="item-label">ORANGE</div>
          </ons-carousel-item>
          <ons-carousel-cover><div class="cover-label">Swipe left or right</div></ons-carousel-cover>
        </ons-carousel>
      </ons-page>
    </ons-template>
    
    <ons-template id="comments.html">
      <ons-toolbar>
        <div class="center">Comments</div>
      </ons-toolbar>
      
      <p style="padding-top: 100px; color: #999; text-align: center">Page Contents</p>
    </ons-template>
    
    <ons-template id="tags.html">
      <ons-toolbar>
        <div class="center">Tags</div>
      </ons-toolbar>
      
      <p style="padding-top: 100px; color: #999; text-align: center">Page Contents</p>
    </ons-template>
    
    <ons-template id="feed.html">
      <ons-toolbar>
        <div class="center">Feed</div>
      </ons-toolbar>
      
      <p style="padding-top: 100px; color: #999; text-align: center">Page Contents</p>
    </ons-template>
    
    <ons-template id="settings.html">
      <ons-toolbar>
        <div class="center">Settings</div>
      </ons-toolbar>
      
      <p style="padding-top: 100px; color: #999; text-align: center">Page Contents</p>
    </ons-template>
[/code]

----- 追記 -----

返信が遅くなり申し訳ありませんでした。  
スワイプでタブを切り替えたいということであれば`ons-gesture-detector`を使うのが良さそうです。  
ただ、切り替え中もかっこいいアニメーションをさせたいとかだとちょっと難しいような気がします。

[code]

    ons.bootstrap()
    .controller('SwipeCtrl', function($scope) {
      // 検出するスワイプの速さの設定（小さくしたほうがゆっくり）
      Hammer.gestures.Swipe.defaults.swipeVelocityX = 0.01;
      $scope.swipe = function(direction) {
        var index = tab.getActiveTabIndex()
        if (direction === 'left') {
          if (index === 3) return;
          index += 1;
        } else if (direction === 'right') {
          if (index === 0) return;
          index -= 1;
        }
        tab.setActiveTab(index);
      }
    })
[/code]

[code]

    <link href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.0-beta/build/css/onsenui.css" rel="stylesheet"/>
    <link href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.0-beta/build/css/onsen-css-components.css" rel="stylesheet"/>
    <script src="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.0-beta/build/js/angular/angular.min.js"></script>
    <script src="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.0-beta/build/js/onsenui.min.js"></script>
    
    <body ng-controller="SwipeCtrl">
      <ons-gesture-detector ng-swipeleft="swipe('left')" ng-swiperight="swipe('right')">
      <ons-tabbar var="tab">
          <ons-tab page="home.html" label="Home" icon="ion-home" active="true"></ons-tab>
        <ons-tab page="comments.html" label="Comments" icon="ion-chatbox-working"></ons-tab>
        <ons-tab page="tags.html" label="Tags" icon="ion-ios-pricetag"></ons-tab>
        <ons-tab page="settings.html" label="Settings" icon="ion-ios-cog"></ons-tab>
      </ons-tabbar>
      </ons-gesture-detector>
    </body>
    
    <ons-template id="home.html">
      <ons-toolbar>
        <div class="center">Home</div>
      </ons-toolbar>
    
      <p style="padding-top: 100px; color: #999; text-align: center">Home Page Contents</p>
      </ons-page>
    </ons-template>
    
    <ons-template id="comments.html">
      <ons-toolbar>
        <div class="center">Comments</div>
      </ons-toolbar>
      
      <p style="padding-top: 100px; color: #999; text-align: center">Comment Page Contents</p>
    </ons-template>
    
    <ons-template id="tags.html">
      <ons-toolbar>
        <div class="center">Tags</div>
      </ons-toolbar>
      
      <p style="padding-top: 100px; color: #999; text-align: center">Tags Page Contents</p>
    </ons-template>
    
    <ons-template id="settings.html">
      <ons-toolbar>
        <div class="center">Settings</div>
      </ons-toolbar>
      
      <p style="padding-top: 100px; color: #999; text-align: center">Settings Page Contents</p>
    </ons-template>
[/code]


CC BY-SA 3.0
2015-03-06T01:40:49.280
7511
2015-04-10T08:34:33.647
2015-04-10T08:34:33.647
3516
3516
7508
answer