cancel
Showing results for 
Search instead for 
Did you mean: 
cancel
Showing results for 
Search instead for 
Did you mean: 
cancel
Showing results for 
Search instead for 
Did you mean: 

is it possible to have sliding screens in one mashup?

schakravarthy
6-Contributor

is it possible to have sliding screens in one mashup?

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

3 REPLIES 3
vxavier
13-Aquamarine
(To:schakravarthy)

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
13-Aquamarine
(To:vxavier)

I tested it and it worked. 

gbucur
5-Regular Member
(To:schakravarthy)

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

 

Announcements