How to use enyo.Slideable and show it

I am learning how to use all the arrangers to render panels and such. So.. I have searched the forums and can't find how to show an enyo.Slideable from a button/function. Here is the code I am working with:
How do I go about showing the slideable as it is not showing right now? Also where is the documentation for slideables?
enyo.kind({
	name: "App",
	kind: "Panels",
	arrangerKind: "CarouselArranger",
	classes: "app-panels",
	arrangerKind: "CollapsingArranger",
	style: "background-image:url('assets/bg.png')",
	index: 1,
	narrowFit: false,
	components: [
		{name: "panelOne", classes: "calc-panel panels-background", components: [ 
			{kind: "onyx.Toolbar", classes: "height-toolbar", components: [ 
				{content: "Panel One"}
			]},
			
		]},
		{name: "panelTwo", classes: "code-panel panels-background", components: [
			{kind: "onyx.Toolbar", components: [
				{kind: "onyx.Grabber"},
				{content: "Panel Two"},
				{kind: "onyx.Button", content: "Calculator", onTap: "showCalc"}
			]},
			{kind: "enyo.RichText", value: "<b>Code</b> Here", classes: "code-style"}
		]},
		{kind: "enyo.Slideable", name: "Calc", classes: "pullout", components: [
			{kind: "onyx.Toolbar", components: [
				{kind: "onyx.Grabber"},
				{content: "Third Panel"}
			]},
			{kind: "simpleCalculator"}
		]}
	],
	showCalc: function(inSender, inEvent) {
		//this.$.Calc.setIndex(2);
		//this.$.Calc.show();
	}
});

Comments

  • You should be able to use this.$.Calc.animateToMin(), this.$.Calc.animateToMax(), this.$.Calc.toggleMinMax, and this.$.Calc.animateTo(XX) functions to control showing and hiding of your slideable. Documentation is at: http://latest.enyojs.com/api-tool/#enyo.Slideable.

    With regards to your code: I probably wouldn't put the slideable in a Panel kind as it will probably be created as a separate panel. Maybe better to create Panel and Slideable that are siblings in one container.
  • Thank you for the help! How do you go about changing the slideable to be aligned to the right side instead of the left? Tried changing the value and min but it seems like the gestures still think it is a left sided slideable.
  • Check out http://latest.enyojs.com/lib/layout/slideable/samples/ (or the lib/layout/slideable/samples directory in your local install). There are SlideableSample.html and SlideableSample.js files there that will show you how to do a right sided slideable.
  • So helpful! One last thing I am still confused on is how to get objects to be aligned on the bottom of the page, like a toolbar or a grabber without the toolbar (exc).
  • There used to be a nice sample of Slideable with a Grabber control but I can't seem to find it in docs or sampler...

    Basically, in your components for the Slideable, use position:absolute or position:fixed with top/bottom values to position it relative to the slider...
  • I would say maybe look at the Bing Maps sample.
    enyojs.com/samples/maps/
    It has a Slideable that pulls out from the right side of the app.

    enyojs.com/samples/maps/source/MapsApp.js
    enyojs.com/samples/maps/source/Pullout.js

    Hope that helps you a bit.
    Thanks


    Freddy
  • Thanks psarin and Fred. Got it working correctly. I got it do what I wanted using:
    {kind: "enyo.Slideable", name: "Calc", classes: "slide", axis: "h", unit: "%", value: 100, min: 0, max: 100, components: [ ]};
    .slide {
    	position: absolute;
    	top: 57px;
    	right: 0;
    	bottom: 0;
    	width: 320px;
    	height: 100%;
    }
Sign In or Register to comment.