I want to view the carousel subwindow in the ONSEN UI.

I don't think I can get an image just by the title, so I will display the image.

For the implementation image, tap the information icon to display the sub-window of the image
I am thinking of displaying the operation description of the application on the carousel.
Also, tap the x icon in the upper right corner to erase the sub-window.

I have implemented the above UI as a native, but is it possible to implement it with ONSEN UI?
If you know how to implement it like this, please let me know.

javascript onsen-ui angularjs cordova

2022-09-30 20:58

1 Answers

If you combine it with ons-dialog, it looks like this.
The style of the dialog seems to be set to <div class="dialog"> under ons-dialog, so adjusting the style may be a bit troublesome (for the time being, we only change the size and location of the sample).

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>

2022-09-30 20:58

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656