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

Community Tip - Stay updated on what is happening on the PTC Community by subscribing to PTC Community Announcements. X

slider button

potatochips
14-Alexandrite

slider button

How to make a slider button that when I click the next arrow it will generate for the next panel.

 

1.png

1 REPLY 1

Hello jc2,B

 

I think, I will have this approach to do a such UI.

  • Use a Grid Widget with 2 Rows. One for buttons and tabs. Another one for panel.
  • In Column Properties of the first row, change Flex Direction to Row, Justification to Center and Alignment to Start.
  • For each buttons with arrows, use an Toggle Button Widget. Svg images will be enough to hToave a different display when clicking and in a normal state.
  • For each tabs, use a Label Widget. Use a custom CSS stylesheet to control font type, background color ...etc..
  • Apply another CSS stylesheet to new label tab selected. Apply back default CSS stylesheet to label tab not anymore selected
  • Last thing, how to have a content diferent in each tab, in the second Row in the Grid ?
  • Use a Panel Widget for each tabs.
  • In Javascript, display only the current panel. So, switch off Visible Property for the Panel linked to Label tab not more selected.
  • Put that you need in each panel/
  • In Toggle Buttons, in EVENTS, in Pressed event, call the Javascript function to do action needed
  • In Label Widget, we have also a Click Event. It is possible to have a Javascript function to select another tab when clicking on it.

 

Is it helping you ?

 

Best regards,

Samuel

Announcements

Top Tags