is it possible to have sliding screens in one mashup?

[schakravarthy]

hi ,

i want to create a UI where i need  to have sliding option to change from one screen to another ...i want to know if this is possible . pls let me know

Thanks

[vxavier]

I don't know if there is any better way, but you can build container mashup inside of a layout with left and right side bars. You can put the change slide buttoms in the side bars and make them transparent and overlay.

Them you can use the container mashup that will receive the names of the mashups that you want to build the slide. You can make the buttons change this name using expressions or services. And I think that is enough to have your slide mashup. 

Hope it helps,

Vinicius Xavier.

[vxavier]

I tested it and it worked. 

[gbucur]

Hi,

You can use Tabs responsive and some CSS. I've done this in one of the apps.

Here is the CSS:

/* style animation tabs */

.overview-tabs .tabsv2-actual-tab-contents:first-child:not(unselected-tabv2-container) > .widget-bounding-box > .widget-content {
	transition: all 0.7s cubic-bezier(.85,0,.15,1);
	transform: translateX(0);
	opacity: 1;
}

.overview-tabs .tabsv2-actual-tab-contents:first-child.unselected-tabv2-container > .widget-bounding-box > .widget-content  {
	transform: translateX(-100%);
	transition: all 0.7s cubic-bezier(.85,0,.15,1);
	visibility: visible !important;
	opacity: 0;
}

.overview-tabs .tabsv2-actual-tab-contents:last-child:not(unselected-tabv2-container) > .widget-bounding-box > .widget-content  {
	transition: all 0.7s cubic-bezier(.85,0,.15,1);
	transform: translateX(0);
	opacity: 1;
}

.overview-tabs .tabsv2-actual-tab-contents:last-child.unselected-tabv2-container > .widget-bounding-box > .widget-content  {
	transform: translateX(100%);
	transition: all 0.7s cubic-bezier(.85,0,.15,1);
	visibility: visible !important;
	opacity: 0;
}

"overview-tabs" is a class that I assigned to the tabs or if you're using an older version than 8.3, you can set the class on the container the tabs are in.

This will only work with 2 tabs and won't have the desired effect if use it with more.

For a seamless effect set 0 for tab height.

BR,

Gabriel