ons-splitter menu reveal effect



  • On onsen v1 it was very easy to add the effect “reveal” to the menu, which pushes the content to the right side.

    Now on onsen v2 we have the element ons-splitter.

    My question is how can I add the type=“reveal” to this element?

    Thanks!



  • I have read the documentation but it says nothing of the “type” attribute in the ons-splitter/ons-splitter-side element

    I have tried it but it does not work:

    <!doctype html>
    <html lang="en" ng-app="my-app">
    <head>
        <title>App</title>
        <meta charset="utf-8">
    
        <!-- ONSENUI v2.1.0 and ANGULARJS v1.6.1 -->
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/onsen/2.1.0/css/onsenui.css"/>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/onsen/2.1.0/css/onsen-css-components.css"/>
        
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/onsen/2.1.0/js/onsenui.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/onsen/2.1.0/js/angular-onsenui.js"></script>
    
    </head>
    <body>
    
        <ons-navigator var="navegador" page="main.html"></ons-navigator>
    
        <ons-template id="main.html">
            
            <ons-splitter var="mySplitter" ng-controller="SplitterController as splitter">
              <!-- TYPE: overlay - push - reveal -->
              <ons-splitter-side side="left" width="220px" collapse swipeable type="push">
                <ons-page>
                  <ons-list>
                    <ons-list-item ng-click="splitter.load('home.html')" tappable>
                      Home
                    </ons-list-item>
                  </ons-list>
                </ons-page>
              </ons-splitter-side>
              <ons-splitter-content id="content" page="home.html"></ons-splitter-content>
            </ons-splitter>
        </ons-template>
    
        <ons-template id="home.html">
          <ons-page>
            <ons-toolbar>
              <div class="left">
                <ons-toolbar-button ng-click="mySplitter.left.open()">
                  <ons-icon icon="md-menu"></ons-icon>
                </ons-toolbar-button>
              </div>
              <div class="center">
                Main
              </div>
            </ons-toolbar>
            <p style="text-align: center; opacity: 0.6; padding-top: 20px;">
              HOME
            </p>
          </ons-page>
        </ons-template>
    
        <script type="text/javascript">
            var app = angular.module('my-app', ['onsen']);
    
            app.controller('SplitterController', function($scope) {
                this.load = function(page) {
                    content.load(page).then(function() {
                        mySplitter.left.close();
                    });
                }
    
            });
        </script>
    
    </body>
    </html>
    


  • mmmm so there is no such an effect for the version 2? that would be a shame :(

    anyone could please help us? thank you!



  • @philippogol You probably will have to do a custom animation. There are some docs on how to do those, but I am mobile and don’t have any links handy.


  • Onsen UI

    There is only ‘overlay’ animation implemented in v2 currently. This other topic has more info.


Log in to reply