今サンプルのプログラムを使っていろいろ試しているところなのですが、
tabbarとカルーセルを組み合わせてメニューを作りたいのです。
イメージ的には最新のlineやカカオみたいな感じなのですが、
可能なのでしょうか?
いろいろ調べているのですが、なかなか見つからなくて・・・・
お手数をおかけしますがよろしくお願いします。
1 件の回答
意図しているUIのイメージが掴めておらず申し訳ないのですが、
タブの中で複数ページを切り替えたいということでしょうか?
もしそうであれば
タブバーを使う
カルーセルを使う
の組み合わせでいけそうです。
サンプル
ons.bootstrap();
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;
}
<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>
----- 追記 -----
返信が遅くなり申し訳ありませんでした。
スワイプでタブを切り替えたいということであればons-gesture-detector
を使うのが良さそうです。
ただ、切り替え中もかっこいいアニメーションをさせたいとかだとちょっと難しいような気がします。
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);
}
})
<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>
-
早速のご回答ありがとうございます。 こんなイメージなのですが、 あとは、 横にスワップするとblue→dark→orangeと変わりますよね。 それと同時にhome→comments→・・と併せて変わっていってほしいのです。 home=blue comments=dark tags=orange と言った感じなのです。。 blueで横にスワイプするとdarkのページが現れると同時に tabもcommentsがアクティブになる。 みたいなイメージなのです。 これは難しいのでしょうか??– user8710Commented 2015年3月6日 2:17
-