ons-splitter menu reveal effect

philippogol

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!

anderson

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>

philippogol

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

anyone could please help us? thank you!

munsterlander

@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.

Fran Diox

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

Notice: The Monaca & Onsen UI Community Forum is shutting down.

For Onsen UI bug reports, feature requests and questions, please use the Onsen UI GitHub issues page. For help with Monaca, please contact Monaca Support Team.

Thank you to all our community for your contributions to the forum. We look forward to hearing from you in the new communication channels.

ons-splitter menu reveal effect