タイトルだけではイメージがつかないと思いますので画像を表示します。
実装イメージはインフォメーションアイコンをタップすると、画像のサブウィンドウを
表示し、カルーセルでアプリの操作説明を表示させようと考えております。
また、右上の×アイコンのタップでサブウィンドウが消えます。
ネイティブでは上記UIを実装したことがあるのですが、ONSEN UIで実装可能でしょうか?
このような実装方法をご存知でしたらご教示のほどお願いします。
スタック・オーバーフローはプログラマーとプログラミングに熱心な人のためのQ&Aサイトです。すぐ登録できます。
登録してこのコミュニティに参加するons-dialog
と組み合わせるならこんな感じですかね。
ダイアログのスタイルはons-dialog
配下に<div class="dialog">
で設定されるみたいなので、このやり方だとスタイルの調整はちょっと面倒かもしれないです(一応サンプルは大きさと大きさ変更に伴う位置だけ変更しています)。
ons.bootstrap()
.controller('DialogController', function($scope) {
$scope.dialogs = {};
$scope.show = function(dlg) {
if (!$scope.dialogs[dlg]) {
ons.createDialog(dlg).then(function(dialog) {
$scope.dialogs[dlg] = dialog;
dialog.show();
});
}
else {
$scope.dialogs[dlg].show();
}
}
});
ons-dialog.sub .dialog {
top: 50%;
left: 50%;
width: 80%;
height: 80%;
}
<link href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.6/build/css/onsenui.css" rel="stylesheet"/>
<link href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.6/build/css/onsen-css-components.css" rel="stylesheet"/>
<ons-page>
<ons-toolbar>
<div class="center">Dialog</div>
</ons-toolbar>
<ons-list ng-controller="DialogController">
<ons-list-item ng-click="show('login.html')" modifier="tappable">
Show SubWindow
</ons-list-item>
</ons-list>
</ons-page>
<ons-template id="login.html">
<ons-dialog var="dialog" cancelable class="sub">
<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>
</ons-dialog>
</ons-template>
<script src="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.6/build/js/angular/angular.min.js"></script>
<script src="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.6/build/js/onsenui.min.js"></script>