Skip to main content
P
potatochips1-Visitor
1-Visitor
March 12, 2020
Question

slider button

  • March 12, 2020
  • 1 reply
  • 980 views

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

 

1.png

1 reply

S
sdidier17-Peridot
17-Peridot
March 12, 2020

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

Terms & ConditionsAccessibility statement